Realigned Chevron Icon to Center

src/screens/Settings/SettingsPage.js

@@ -6,143 +6,145 @@ import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitle
 import { List } from 'react-native-paper'
 import EntypoIcon from 'react-native-vector-icons/Entypo'
 import { ThemeContext } from '../../context/theme.context'
+import { moderateScale } from '../../constants/metrics'
 
 const SettingsPage = props => {
-    const { navigation, route } = props
+  const { navigation, route } = props
 
-    const theme = useContext(ThemeContext)
-    const currentTheme = theme.state.theme
+  const theme = useContext(ThemeContext)
+  const currentTheme = theme.state.theme
 
-    const listItem = [
-        {
-            id: 1,
-            title: 'Edit Profile',
-            icon: 'account',
-            navigation: () => navigation.navigate('EditProfile'),
-        },
-        {
-            id: 2,
-            title: 'Notification',
-            icon: 'bell',
-            navigation: () => navigation.navigate('Notification'),
-        },
-        {
-            id: 3,
-            title: 'Security',
-            icon: 'security',
-            navigation: () => navigation.navigate('Security'),
-        },
-        {
-            id: 4,
-            title: 'Invite Friends',
-            icon: 'account-multiple-plus',
-            navigation: () => navigation.navigate('InviteFriends'),
-        },
-        {
-            id: 5,
-            title: 'Help',
-            icon: 'chat-question',
-            navigation: () => navigation.navigate('HelpPageNav'),
-        },
-        {
-            id: 6,
-            title: 'Switch Theme',
-            icon: 'theme-light-dark',
-            navigation: () => {
-                if (currentTheme === 'dark')
-                  theme.dispatch({ type: "LIGHTMODE" });
-                else
-                  theme.dispatch({ type: "DARKMODE" });
-              }
-        },
-        {
-            id: 7,
-            title: 'Logout',
-            icon: 'logout',
-            navigation: () => true
-        },
-    ]
+  const listItem = [
+    {
+      id: 1,
+      title: 'Edit Profile',
+      icon: 'account',
+      navigation: () => navigation.navigate('EditProfile'),
+    },
+    {
+      id: 2,
+      title: 'Notification',
+      icon: 'bell',
+      navigation: () => navigation.navigate('Notification'),
+    },
+    {
+      id: 3,
+      title: 'Security',
+      icon: 'security',
+      navigation: () => navigation.navigate('Security'),
+    },
+    {
+      id: 4,
+      title: 'Invite Friends',
+      icon: 'account-multiple-plus',
+      navigation: () => navigation.navigate('InviteFriends'),
+    },
+    {
+      id: 5,
+      title: 'Help',
+      icon: 'chat-question',
+      navigation: () => navigation.navigate('HelpPageNav'),
+    },
+    {
+      id: 6,
+      title: 'Switch Theme',
+      icon: 'theme-light-dark',
+      navigation: () => {
+        if (currentTheme === 'dark')
+          theme.dispatch({ type: "LIGHTMODE" });
+        else
+          theme.dispatch({ type: "DARKMODE" });
+      }
+    },
+    {
+      id: 7,
+      title: 'Logout',
+      icon: 'logout',
+      navigation: () => true
+    },
+  ]
 
-    const styles = StyleSheet.create({
-        container: {
-          backgroundColor: colors().dominant,
-          height: '100%',
-        },
-        
-      });
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: colors().dominant,
+      height: '100%',
+    },
 
-    return (
-        <View style={styles.container}>
-            <NewscoutTitleHeader
-                title="Settings"
-                backButtonShown={true}
-                onBackClick={() => navigation.goBack()}
-                headerStyle={{elevation: 2}}
+  });
+
+  return (
+    <View style={styles.container}>
+      <NewscoutTitleHeader
+        title="Settings"
+        backButtonShown={true}
+        onBackClick={() => navigation.goBack()}
+        headerStyle={{ elevation: 2 }}
+      />
+      <View>
+        <ScrollView>
+          {listItem.map(item => (
+            <SettingListItem
+              title={item.title}
+              key={item.id}
+              id={item.id}
+              icon={item.icon}
+              onPress={item.navigation}
             />
-            <View>
-                <ScrollView>
-                    {listItem.map(item => (
-                        <SettingListItem
-                            title={item.title}
-                            key={item.id}
-                            id={item.id}
-                            icon={item.icon}
-                            onPress={item.navigation}
-                        />
-                    ))}
-                </ScrollView>
-            </View>
+          ))}
+        </ScrollView>
+      </View>
 
 
-        </View>
-    )
+    </View>
+  )
 }
 
 const SettingListItem = props => {
-    const {title, id, icon, onPress} = props;
-    const theme = useContext(ThemeContext)
-    const currentTheme = theme.state.theme
-    const styles = StyleSheet.create({
-        listItemText: {
-            fontFamily: fonts.type.medium,
-            color: colors().recessive
-          },
-          circularIcon: {
-            backgroundColor: currentTheme === 'light' ? colors().primaryTintColor : colors().black_variant,
-            marginLeft: 20,
-            padding: 8,
-            // maxHeight:48,
-            // maxWidth: 48,
-            borderRadius: 32,
-          },
-    })
+  const { title, id, icon, onPress } = props;
+  const theme = useContext(ThemeContext)
+  const currentTheme = theme.state.theme
+  const styles = StyleSheet.create({
+    listItemText: {
+      fontFamily: fonts.type.medium,
+      color: colors().recessive
+    },
+    circularIcon: {
+      backgroundColor: currentTheme === 'light' ? colors().primaryTintColor : colors().black_variant,
+      marginLeft: 20,
+      padding: 8,
+      // maxHeight:48,
+      // maxWidth: 48,
+      borderRadius: 32,
+    },
+  })
 
-    return (
-      <TouchableOpacity onPress={onPress}>
-        <List.Item
-          title={title}
-          titleStyle={styles.listItemText}
-          key={id}
-          left={props => (
-            <List.Icon
-              {...props}
-              size={24}
-              style={styles.circularIcon}
-              icon={icon}
-              color={colors().primaryColor}
-            />
-          )}
-          right={props => (
-            <EntypoIcon
-              name="chevron-thin-right"
-              size={16}
-              color={colors().recessive}
-            />
-          )}
-        />
-      </TouchableOpacity>
-    );
-  };
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <List.Item
+        title={title}
+        titleStyle={styles.listItemText}
+        key={id}
+        left={props => (
+          <List.Icon
+            {...props}
+            size={24}
+            style={styles.circularIcon}
+            icon={icon}
+            color={colors().primaryColor}
+          />
+        )}
+        right={props => (
+          <View style={{justifyContent:'center'}}><EntypoIcon
+            name="chevron-thin-right"
+            size={moderateScale(16)}
+            color={colors().recessive}
+          /></View>
+        )}
+
+      />
+    </TouchableOpacity>
+  );
+};
 
 export default SettingsPage