Add multilanguage support

lib/components/EditModal.tsx

@@ -5,6 +5,7 @@ import {
     StyleSheet,
 } from 'react-native';
 import Modal from "react-native-modal";
+import { useTranslation } from 'react-i18next';
 
 import { Colors } from '@/lib/constants/Colors';
 import { ThemedView } from '@/lib/components/ThemedView';
@@ -29,6 +30,7 @@ interface EditModalProps {
 const CustomModal: React.FC<EditModalProps> = ({ title, visible, onClose, onSave, fields }) => {
     const colorScheme = useColorScheme() ?? 'light';
     const [ inputValues, setInputValues ] = useState<Record<string, string>>( {} );
+    const { t } = useTranslation();
 
     useEffect( () => {
         const initialValues: Record<string, string> = {};
@@ -54,13 +56,13 @@ const CustomModal: React.FC<EditModalProps> = ({ title, visible, onClose, onSave
     return (
         <Modal isVisible={visible} useNativeDriverForBackdrop={true}>
             <ThemedView style={{ ...styles.view, backgroundColor: Colors[ colorScheme ].background }}>
-                <ThemedText style={styles.text}>{title ? title : 'Pas je gegevens aan:'}</ThemedText>
+                <ThemedText style={styles.text}>{title ? title : t( "modal.default.title" )}</ThemedText>
 
                 {fields.map( (field, index) => (
                     <ThemedView key={index} style={styles.inputContainer}>
                         {field.title && <ThemedText style={styles.inputTitle}>{field.title}</ThemedText>}
                         <TextInput
-                            style={[styles.input, {color: Colors[ colorScheme ].text}]}
+                            style={[ styles.input, { color: Colors[ colorScheme ].text } ]}
                             placeholder={field.placeholder}
                             onChangeText={(text) => handleInputChange( field.name, text )}
                             value={inputValues[ field.name ] || ''}
@@ -73,11 +75,11 @@ const CustomModal: React.FC<EditModalProps> = ({ title, visible, onClose, onSave
                 <ThemedView style={styles.buttonContainer}>
                     <TouchableOpacity onPress={onClose || ( () => {
                     } )}>
-                        <ThemedText style={[ styles.textStyle, styles.buttonClose ]}>Annuleren</ThemedText>
+                        <ThemedText style={[ styles.textStyle, styles.buttonClose ]}>{t( "modal.default.cancel" )}</ThemedText>
                     </TouchableOpacity>
 
                     <TouchableOpacity style={styles.buttonSave} onPress={handleSave}>
-                        <ThemedText style={styles.textStyle}>Opslaan</ThemedText>
+                        <ThemedText style={styles.textStyle}>{t( "modal.default.save" )}</ThemedText>
                     </TouchableOpacity>
                 </ThemedView>
             </ThemedView>

lib/localization/i18n.tsx

@@ -0,0 +1,54 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { en, nl } from "@/assets/languages";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const STORE_LANGUAGE_KEY = "settings.lang";
+
+const languageDetectorPlugin = {
+    type: "languageDetector",
+    async: true,
+    init: () => { },
+    detect: async function (callback: (lang: string) => void) {
+        try {
+            // get stored language from Async storage
+            // put your own language detection logic here
+            await AsyncStorage.getItem(STORE_LANGUAGE_KEY).then((language) => {
+                if (language) {
+                    //if language was stored before, use this language in the app
+                    return callback(language);
+                } else {
+                    //if language was not stored yet, use english
+                    return callback("nl");
+                }
+            });
+        } catch (error) {
+            console.log("Error reading language", error);
+        }
+    },
+    cacheUserLanguage: async function (language: string) {
+        try {
+            //save a user's language choice in Async storage
+            await AsyncStorage.setItem(STORE_LANGUAGE_KEY, language);
+        } catch (error) { }
+    },
+};
+const resources = {
+    en: {
+        translation: en,
+    },
+    nl: {
+        translation: nl,
+    },
+};
+
+// @ts-ignore
+i18n.use(initReactI18next).use(languageDetectorPlugin).init({
+    resources,
+    compatibilityJSON: 'v3',
+    fallbackLng: "nl",
+    interpolation: {
+        escapeValue: false,
+    },
+});
+export default i18n;

lib/store/dataStore.tsx

@@ -8,6 +8,7 @@ const dataStore = createSlice( {
             token: '',
             name: '',
             device: '',
+            language: 'nl',
             address: {
                 id: 0,
                 zipcode: '',