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';


const SettingsPage = () => {

  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}>
      <ScrollView>
      {listItem.map((item) => 
        <List.Item title={item.title}
          titleStyle={styles.listItemText}
          key={item.id}
          left={props=><List.Icon {...props} size={24} style={{paddingHorizontal: 16}}  icon={item.icon} color={colors.topColor}/>} 
          right={props => <EntypoIcon name="chevron-thin-right" size={16} color={colors.black}/>}/>
      )}
      </ScrollView>
     
    </View>
  )
}

export default SettingsPage

const styles = StyleSheet.create({
    listItemText:{
      fontFamily: fonts.type.medium
    }
})