move modal styles to utils

amnet-native/app/CardAddModal.tsx

@@ -1,31 +1,20 @@
-import {useCallback, useEffect, useMemo, useState} from "react";
+import {useCallback, useEffect, useState} from "react";
+import {TextInput, TouchableOpacity, View} from "react-native";
 import {Button, Card, Divider, Paragraph, useTheme} from "react-native-paper";
-import {StyleSheet, TextInput, TouchableOpacity, View} from "react-native";
+import {useModalStyles} from "../utils/ModalStyles";
 
+import {AMCard} from "../models/AMCard";
 import RealmContext from "../models/RealmContext";
 import {generateCardNumber} from "../models/AM-API";
-import {AMCard} from "../models/AMCard";
 
 const {useRealm} = RealmContext;
 
 export default function CardAddModal({navigation}) {
+    const realm = useRealm();
     const theme = useTheme();
-    const themedStylesheet = useMemo(() => StyleSheet.create({
-        ...styles,
-        formItemInput: {
-            flex: 1,
-            color: theme.colors.onSurface
-        },
-        formFootnote: {
-            fontSize: 13,
-        },
-        headerText: {
-            color: theme.colors.primary
-        }
-    }), [theme]);
+    const modalStyles = useModalStyles();
 
     // state values
-    const realm = useRealm();
     const [cardName, setCardName] = useState('');
     const [cardNumber, setCardNumber] = useState('');
 
@@ -49,30 +38,30 @@ export default function CardAddModal({navigation}) {
     useEffect(() => {
         navigation.setOptions({
             headerLeft: () => <TouchableOpacity onPress={() => navigation.goBack()}>
-                <Paragraph style={themedStylesheet.headerText}>Cancel</Paragraph>
+                <Paragraph style={modalStyles.headerText}>Cancel</Paragraph>
             </TouchableOpacity>,
         });
-    }, [navigation, themedStylesheet]);
+    }, [navigation, modalStyles]);
 
     useEffect(() => {
         const canSave = cardName.length && cardNumber.length === 20;
-        const themeOptions = canSave ? themedStylesheet.headerText : {color: theme.colors.outline};
+        const themeOptions = canSave ? modalStyles.headerText : {color: theme.colors.outline};
 
         navigation.setOptions({
             headerRight: () => <TouchableOpacity disabled={!canSave} onPress={() => cardAddCallback(cardNumber, cardName)}>
                 <Paragraph style={{...themeOptions, fontWeight: "600"}}>Save</Paragraph>
             </TouchableOpacity>
         })
-    }, [navigation, themedStylesheet, cardName, cardNumber]);
+    }, [navigation, modalStyles, cardName, cardNumber]);
 
     return (<View style={{display: "flex", gap: 10, justifyContent: "center", paddingHorizontal: 15, paddingTop: 25}}>
         <Card>
             <Card.Content>
-                <View style={themedStylesheet.formItemRow}>
-                    <Paragraph style={themedStylesheet.formItemName}>
+                <View style={modalStyles.formItemRow}>
+                    <Paragraph style={modalStyles.formItemName}>
                         Card Name
                     </Paragraph>
-                    <TextInput style={themedStylesheet.formItemInput}
+                    <TextInput style={modalStyles.formItemInput}
                                numberOfLines={1} autoFocus
                                value={cardName}
                                onChangeText={setCardName}
@@ -82,11 +71,11 @@ export default function CardAddModal({navigation}) {
 
                 <Divider style={{marginVertical: 15}}/>
 
-                <View style={themedStylesheet.formItemRow}>
-                    <Paragraph style={themedStylesheet.formItemName}>
+                <View style={modalStyles.formItemRow}>
+                    <Paragraph style={modalStyles.formItemName}>
                         Matrix Code
                     </Paragraph>
-                    <TextInput style={themedStylesheet.formItemInput}
+                    <TextInput style={modalStyles.formItemInput}
                                numberOfLines={1}
                                placeholder="0000 0000 0000 0000 0000"
                                placeholderTextColor={theme.colors.outline}
@@ -96,24 +85,10 @@ export default function CardAddModal({navigation}) {
             </Card.Content>
         </Card>
 
-        <Paragraph style={themedStylesheet.formFootnote}>
+        <Paragraph style={modalStyles.formFootnote}>
             If you have a physical card, you can enter the 20-digit code on the back.
         </Paragraph>
 
         <Button mode="text" onPress={() => setCardNumber(generateCardNumber())}>Generate Matrix Code</Button>
     </View>)
 }
-
-const styles = StyleSheet.create({
-    formItemName: {
-        minWidth: 100,
-        fontWeight: "400"
-    },
-    formItemRow: {
-        flexDirection: "row",
-        alignItems: "center"
-    },
-    formItemDivider: {
-        marginVertical: 15
-    }
-})

amnet-native/utils/ModalStyles.ts

@@ -0,0 +1,35 @@
+import {StyleSheet} from "react-native";
+import {useTheme} from "react-native-paper";
+import {useMemo} from "react";
+
+const modalStyles = StyleSheet.create({
+    formItemName: {
+        minWidth: 100,
+        fontWeight: "400"
+    },
+    formItemRow: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    formItemDivider: {
+        marginVertical: 15
+    }
+});
+
+export function useModalStyles() {
+    const theme = useTheme();
+    return useMemo(() => StyleSheet.create({
+        ...modalStyles,
+        formItemInput: {
+            flex: 1,
+            color: theme.colors.onSurface
+        },
+        formFootnote: {
+            fontSize: 13,
+            color: theme.colors.outline
+        },
+        headerText: {
+            color: theme.colors.primary
+        }
+    }), [theme]);
+}