fix: Settings Menu Button refactor

src/components/MenuButton/index.tsx

@@ -0,0 +1,34 @@
+import React, { FC, ReactNode } from 'react';
+import { NavigationProp, useNavigation } from '@react-navigation/native';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import { styles } from './style';
+import { Colors } from '../../theme';
+
+import ArrowRightIcon from '../../../assets/icons/right-arrow.svg';
+
+type ButtonProps = {
+  label: string;
+  icon: ReactNode;
+  buttonFn?: (navigate: NavigationProp<ReactNavigation.RootParamList>) => void;
+  red?: boolean;
+};
+
+export const SettingsButton: FC<ButtonProps> = ({ label, icon, buttonFn, red }) => {
+  const navigation = useNavigation();
+
+  return (
+    <TouchableOpacity
+      style={[styles.alignStyle, styles.buttonWrapper, { justifyContent: 'space-between' }]}
+      onPress={() => (buttonFn ? buttonFn(navigation) : null)}
+    >
+      <View style={styles.alignStyle}>
+        {icon}
+        <Text style={[styles.buttonLabel, red ? { color: Colors.RED } : null]}>{label}</Text>
+      </View>
+      <View>
+        <ArrowRightIcon fill={red ? Colors.RED : Colors.LIGHT_GRAY} width={20} height={20} />
+      </View>
+    </TouchableOpacity>
+  );
+};

src/components/MenuButton/style.ts

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../theme';
+import { getFontSize } from '../../utils';
+
+export const styles = StyleSheet.create({
+  alignStyle: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  buttonWrapper: {
+    width: '100%',
+    height: 48
+  },
+  buttonLabel: {
+    color: Colors.DARK_BLUE,
+    fontSize: getFontSize(12),
+    fontWeight: '700',
+    marginLeft: 15
+  }
+});

src/components/index.ts

@@ -10,3 +10,4 @@ export * from './FlatList';
 export * from './RegionPopup';
 export * from './LocationPopup';
 export * from './Loading';
+export * from './MenuButton';

src/screens/InAppScreens/ProfileScreen/Settings/index.tsx

@@ -1,11 +1,6 @@
-import React, { FC, ReactNode } from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import React from 'react';
 
-import { NavigationProp, useNavigation } from '@react-navigation/native';
-
-import { styles } from './styles';
-
-import { Header, PageWrapper } from '../../../../components';
+import { Header, PageWrapper, SettingsButton } from '../../../../components';
 import { NAVIGATION_PAGES } from '../../../../types';
 import { Colors } from '../../../../theme';
 
@@ -19,16 +14,9 @@ import ShieldIcon from '../../../../../assets/icons/shield.svg';
 import ExitIcon from '../../../../../assets/icons/exit.svg';
 import UserXMark from '../../../../../assets/icons/user-xmark.svg';
 
-import ArrowRightIcon from '../../../../../assets/icons/right-arrow.svg';
-
-type ButtonType = {
-  label: string;
-  icon: ReactNode;
-  red?: boolean;
-  buttonFn?: (navigationHook: NavigationProp<ReactNavigation.RootParamList>) => void;
-};
+import type { MenuButtonType } from '../../../../types/components';
 
-const buttons: ButtonType[] = [
+const buttons: MenuButtonType[] = [
   {
     label: 'Edit Profile',
     icon: <UserPenIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
@@ -88,30 +76,4 @@ const Settings = () => {
   );
 };
 
-type ButtonProps = {
-  label: string;
-  icon: ReactNode;
-  buttonFn?: (navigate: NavigationProp<ReactNavigation.RootParamList>) => void;
-  red?: boolean;
-};
-
-const SettingsButton: FC<ButtonProps> = ({ label, icon, buttonFn, red }) => {
-  const navigation = useNavigation();
-
-  return (
-    <TouchableOpacity
-      style={[styles.alignStyle, styles.buttonWrapper, { justifyContent: 'space-between' }]}
-      onPress={() => (buttonFn ? buttonFn(navigation) : null)}
-    >
-      <View style={styles.alignStyle}>
-        {icon}
-        <Text style={[styles.buttonLabel, red ? { color: Colors.RED } : null]}>{label}</Text>
-      </View>
-      <View>
-        <ArrowRightIcon fill={red ? Colors.RED : Colors.LIGHT_GRAY} width={20} height={20} />
-      </View>
-    </TouchableOpacity>
-  );
-};
-
 export default Settings;

src/types/components/button.ts

@@ -1,7 +1,16 @@
 import { Colors } from '../../theme';
+import { ReactNode } from 'react';
+import { NavigationProp } from '@react-navigation/native';
 
 export enum ButtonVariants {
   FILL = Colors.ORANGE,
   TEXT = Colors.DARK_BLUE,
   OPACITY = 'rgba(33, 37, 41, 0.2)'
 }
+
+export type MenuButtonType = {
+  label: string;
+  icon: ReactNode;
+  red?: boolean;
+  buttonFn?: (navigationHook: NavigationProp<any>) => void;
+};