React-Nav-Melon/screens/SettingsPage.js

import { ScrollView, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { List } from 'react-native-paper';
import EntypoIcon from 'react-native-vector-icons/dist/Entypo'
import colors from '../theme/colors';
import fonts from '../theme/fonts';
import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';


const SettingsPage = (props) => {

    const {
      navigation
    } = props

  const listItem = [
    {
      id:1,
      title:"Edit Profile",
      icon:'account'
    },
    {
      id:2,
      title: "Notification",
      icon:'bell'
    },
    {
      id:3,
      title:"Security",
      icon:'security'
    },
    {
      id:4,
      title: "Invite Friends",
      icon:'account-multiple-plus'
    },
    {
      id:5,
      title:"Help",
      icon:'chat-question'
    },
    {
      id:6,
      title:"Dark mode",
      icon:'theme-light-dark'
    },
    {
      id:7,
      title:"Logout",
      icon:'logout'
    },
  ]
  return (
    <View style={styles.container}>
      <NewscoutTitleHeader title="Settings" backButtonShown={true} onBackClick={() => navigation.goBack()}/>
      <ScrollView>
      {listItem.map((item) => 
         <SettingListItem title={item.title} key={item.id} id={item.id} icon={item.icon}/> 
      )}
      </ScrollView>
     
    </View>
  )
}

const SettingListItem = (props) => {
  const {
    title,
    id,
    icon
  } = props
  
  return (
    <>
      <List.Item title={title}
          titleStyle={styles.listItemText}
          key={id}
          left={props => 
              <List.Icon 
              {...props}
              size={24} 
              style={styles.circularIcon}
              icon={icon}
              color={colors.topColor}/>
            } 
          right={props => <EntypoIcon name="chevron-thin-right" size={16} color={colors.black}/>}/>
    </>
  )
}

export default SettingsPage

const styles = StyleSheet.create({
    container:{
      backgroundColor: colors.white,
      height: '100%'
    },
    listItemText:{
      fontFamily: fonts.type.medium
    },
    circularIcon:{
      backgroundColor: colors.primaryTintColor,
      marginLeft: 16,
      padding:8,
      // maxHeight:48,
      // maxWidth: 48,
      borderRadius: 32,
      
    }
})