separate the component for clean code

www/js/control/CustomModesSettingRow.tsx

@@ -0,0 +1,37 @@
+import React, { useState, useContext } from 'react';
+import SettingRow from './SettingRow';
+import { Modal } from 'react-native';
+import { List, Dialog, Button } from 'react-native-paper';
+import { AppContext } from '../App';
+
+const CustomModesSettingRow = () => {
+  const [isCustomModesModalOpen, setIsCustomModesModalOpen] = useState(false);
+  const { customModes, setCustomModes } = useContext(AppContext);
+
+  return (
+    <>
+      <SettingRow
+        textKey="control.edit-custom-modes"
+        iconName="label-multiple"
+        action={() => setIsCustomModesModalOpen(true)}></SettingRow>
+      <Modal
+        visible={isCustomModesModalOpen}
+        onDismiss={() => setIsCustomModesModalOpen(false)}
+        transparent={true}>
+        <Dialog visible={isCustomModesModalOpen} onDismiss={() => setIsCustomModesModalOpen(false)}>
+          <Dialog.Title>Custom Modes</Dialog.Title>
+          <Dialog.Content>
+            {customModes.map((mode, idx) => {
+              return <List.Item key={mode + idx} title={mode} onPress={(e) => console.log(e)} />;
+            })}
+          </Dialog.Content>
+          <Dialog.Actions>
+            <Button onPress={() => setIsCustomModesModalOpen(false)}>Close</Button>
+          </Dialog.Actions>
+        </Dialog>
+      </Modal>
+    </>
+  );
+};
+
+export default CustomModesSettingRow;

www/js/control/ProfileSettings.jsx

@@ -33,6 +33,7 @@ import { storageClear } from '../plugin/storage';
 import { getAppVersion } from '../plugin/clientStats';
 import { getConsentDocument } from '../splash/startprefs';
 import { logDebug } from '../plugin/logger';
+import CustomModesSettingRow from './CustomModesSettingRow';
 
 //any pure functions can go outside
 const ProfileSettings = () => {
@@ -421,10 +422,7 @@ const ProfileSettings = () => {
           desc={authSettings.opcode}
           descStyle={settingStyles.monoDesc}></SettingRow>
         <DemographicsSettingRow></DemographicsSettingRow>
-        <SettingRow
-          textKey="control.edit-custom-modes"
-          iconName="label-multiple"
-          action={() => console.log('custom modes')}></SettingRow>
+        <CustomModesSettingRow />
         <SettingRow
           textKey="control.view-privacy"
           iconName="eye"