React-Nav-Melon/screens/NotificationSettingsPage.js

import {StyleSheet, Text, View} from 'react-native';
import React, { useState } from 'react';
import fonts from '../theme/fonts';
import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';
import { List, Switch } from 'react-native-paper';

const NotificationSettingsPage = props => {
  const {navigation} = props;

  const [soundStatus, setSoundStatus] = useState(false);
  const [vibrateStatus, setVibrateStatus] = useState(false);
  const [tipStatus, setTipStatus] = useState(false);
  const [serviceStatus, setServiceStatus] = useState(false);

  const listItems = [
    {
      title: 'Sound',
      id: 0,
      state: soundStatus,
      onChange: () => setSoundStatus(!soundStatus),
    },
    {
      title: 'Vibrate',
      id: 1,
      state: vibrateStatus,
      onChange: () => setVibrateStatus(!vibrateStatus),
    },
    {
      title: 'New tips available',
      id: 2,
      state: tipStatus,
      onChange: () => setTipStatus(!tipStatus),
    },
    {
      title: 'New service available',
      id: 3,
      state: serviceStatus,
      onChange: () => setServiceStatus(!serviceStatus),
    },
  ];
  return (
    <View>
      <NewscoutTitleHeader
        title={'Notifications'}
        backButtonShown={true}
        onBackClick={() => navigation.goBack()}
      />

      {listItems.map(item => (
        <List.Item
          title={item.title}
          titleStyle={styles.listItemText}
          style={styles.listItem}
          key={item.id}
          right={props => (
            <Switch
              value={item.state}
              onValueChange={item.onChange}
            />
          )}
        />
      ))}
      {/* <List.Item
        title={'Face ID'}
        titleStyle={styles.listItemText}
        style={styles.listItem}
        key={'1'}
        right={props => (
          <Switch
            value={soundStatus}
            onValueChange={() => setFaceIdStatus(!faceIdStatus)}
          />
        )}
      />
      <List.Item
        title={'Remember Me'}
        titleStyle={styles.listItemText}
        style={styles.listItem}
        key={'2'}
        right={props => (
          <Switch
            value={rememberMeStatus}
            onValueChange={() => setRememberMeStatus(!rememberMeStatus)}
          />
        )}
      />
      <List.Item
        title={'Touch ID'}
        titleStyle={styles.listItemText}
        style={styles.listItem}
        key={'3'}
        right={props => (
          <Switch
            value={touchIdStatus}
            onValueChange={() => setTouchIdStatus(!touchIdStatus)}
          />
        )}
      /> */}
    </View>
  );
};

export default NotificationSettingsPage;

const styles = StyleSheet.create({
  listItemText: {
    fontFamily: fonts.type.medium,
  },
  listItem: {
    height: 64,
    justifyContent: 'center',
  },
});