fix for app crashing in dev environment while changing the language.

Issue details obytes#420

src/lib/i18n/utils.tsx

@@ -2,7 +2,7 @@ import type TranslateOptions from 'i18next';
 import i18n from 'i18next';
 import memoize from 'lodash.memoize';
 import { useCallback } from 'react';
-import { I18nManager, NativeModules, Platform } from 'react-native';
+import { I18nManager, Platform } from 'react-native';
 import { useMMKVString } from 'react-native-mmkv';
 import RNRestart from 'react-native-restart';
 
@@ -15,40 +15,70 @@ export type TxKeyPath = RecursiveKeyOf<DefaultLocale>;
 
 export const LOCAL = 'local';
 
-export const getLanguage = () => storage.getString(LOCAL); // 'Marc' getItem<Language | undefined>(LOCAL);
+export const getLanguage = (): Language | undefined => {
+  return storage.getString(LOCAL) as Language | undefined;
+};
 
 export const translate = memoize(
   (key: TxKeyPath, options = undefined) =>
     i18n.t(key, options) as unknown as string,
   (key: TxKeyPath, options: typeof TranslateOptions) =>
     options ? key + JSON.stringify(options) : key
-);
-
-export const changeLanguage = (lang: Language) => {
-  i18n.changeLanguage(lang);
-  if (lang === 'ar') {
-    I18nManager.forceRTL(true);
-  } else {
-    I18nManager.forceRTL(false);
-  }
-  if (Platform.OS === 'ios' || Platform.OS === 'android') {
-    if (__DEV__) NativeModules.DevSettings.reload();
-    else RNRestart.restart();
-  } else if (Platform.OS === 'web') {
-    window.location.reload();
+) as unknown as {
+  (key: TxKeyPath, options?: typeof TranslateOptions): string;
+  cache: {
+    clear(): void;
+  };
+};
+
+export const changeLanguage = async (lang: Language) => {
+  try {
+    await i18n.changeLanguage(lang);
+
+    if (lang === 'ar') {
+      I18nManager.forceRTL(true);
+    } else {
+      I18nManager.forceRTL(false);
+    }
+
+    translate.cache.clear();
+
+    if (Platform.OS === 'ios' || Platform.OS === 'android') {
+      RNRestart.restart();
+    } else if (Platform.OS === 'web') {
+      setTimeout(() => {
+        window.location.reload();
+      }, 100);
+    }
+  } catch (error) {
+    console.error('Error changing language:', error);
   }
 };
 
 export const useSelectedLanguage = () => {
   const [language, setLang] = useMMKVString(LOCAL);
 
   const setLanguage = useCallback(
-    (lang: Language) => {
-      setLang(lang);
-      if (lang !== undefined) changeLanguage(lang as Language);
+    async (lang: Language) => {
+      try {
+        setLang(lang);
+        if (lang) {
+          await changeLanguage(lang);
+        }
+      } catch (error) {
+        console.error('Error setting language:', error);
+      }
     },
     [setLang]
   );
 
   return { language: language as Language, setLanguage };
 };
+
+i18n.on('languageChanged', () => {
+  console.log('Language changed successfully');
+});
+
+i18n.on('missingKey', (lng, ns, key) => {
+  console.error(`Missing translation key: ${key} in language: ${lng}`);
+});