React-Nav-Melon/screens/SecurityPage.js

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

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

  // States
  const [faceIdStatus, setFaceIdStatus] = useState(false);
  const [rememberMeStatus, setRememberMeStatus] = useState(false);
  const [touchIdStatus, setTouchIdStatus] = useState(false);

  return (
    <View>
      <NewscoutTitleHeader
        title={'Security'}
        backButtonShown={true}
        onBackClick={() => navigation.goBack()}
      />
      <List.Item
        title={'Face ID'}
        titleStyle={styles.listItemText}
        style={styles.listItem}
        key={'1'}
        right={props => (
          <Switch
            value={faceIdStatus}
            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
        style={{
          paddingHorizontal: 16,
        }}>
        <PrimaryOutlineButton title={'Change Password'}  />
      </View>
    </View>
  );
};

export default SecurityPage;

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