@umituz/react-native-localization 1.2.1 → 1.3.0

package/lib/index.d.ts

@@ -4,6 +4,8 @@
  */
 export { useLocalization, useLocalizationStore } from './infrastructure/storage/LocalizationStore';
 export { LocalizationProvider } from './infrastructure/components/LocalizationProvider';
+export { LanguageSwitcher } from './infrastructure/components/LanguageSwitcher';
+export { useLanguageNavigation } from './infrastructure/components/useLanguageNavigation';
 export { default as i18n } from './infrastructure/config/i18n';
 export { SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE, getLanguageByCode, isLanguageSupported, getDefaultLanguage, getDeviceLocale, } from './infrastructure/config/languages';
 export type { Language, ILocalizationRepository } from './domain/repositories/ILocalizationRepository';

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAGnG,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAC;AAGxF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,eAAe,GAChB,MAAM,mCAAmC,CAAC;AAG3C,YAAY,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,+CAA+C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAGnG,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAC;AACxF,OAAO,EAAE,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAChF,OAAO,EAAE,qBAAqB,EAAE,MAAM,mDAAmD,CAAC;AAG1F,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,eAAe,GAChB,MAAM,mCAAmC,CAAC;AAG3C,YAAY,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,+CAA+C,CAAC"}

package/lib/index.js

@@ -6,6 +6,8 @@
 export { useLocalization, useLocalizationStore } from './infrastructure/storage/LocalizationStore';
 // Components
 export { LocalizationProvider } from './infrastructure/components/LocalizationProvider';
+export { LanguageSwitcher } from './infrastructure/components/LanguageSwitcher';
+export { useLanguageNavigation } from './infrastructure/components/useLanguageNavigation';
 // Configuration
 export { default as i18n } from './infrastructure/config/i18n';
 export { SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE, getLanguageByCode, isLanguageSupported, getDefaultLanguage, getDeviceLocale, } from './infrastructure/config/languages';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,QAAQ;AACR,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAEnG,aAAa;AACb,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAC;AAExF,gBAAgB;AAChB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,eAAe,GAChB,MAAM,mCAAmC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,QAAQ;AACR,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAEnG,aAAa;AACb,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAC;AACxF,OAAO,EAAE,gBAAgB,EAAE,MAAM,8CAA8C,CAAC;AAChF,OAAO,EAAE,qBAAqB,EAAE,MAAM,mDAAmD,CAAC;AAE1F,gBAAgB;AAChB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,EAClB,eAAe,GAChB,MAAM,mCAAmC,CAAC"}

package/lib/infrastructure/components/LanguageSwitcher.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface LanguageSwitcherProps {
+    showName?: boolean;
+    showFlag?: boolean;
+    color?: string;
+    navigationScreen?: string;
+    style?: any;
+    textStyle?: any;
+}
+export declare const LanguageSwitcher: React.FC<LanguageSwitcherProps>;
+export default LanguageSwitcher;
+//# sourceMappingURL=LanguageSwitcher.d.ts.map

package/lib/infrastructure/components/LanguageSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSwitcher.d.ts","sourceRoot":"","sources":["../../../src/infrastructure/components/LanguageSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,SAAS,CAAC,EAAE,GAAG,CAAC;CACjB;AAQD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAwC5D,CAAC;AAqBF,eAAe,gBAAgB,CAAC"}

package/lib/infrastructure/components/LanguageSwitcher.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+// @ts-ignore - Optional peer dependency
+import { useNavigation } from '@react-navigation/native';
+import { useLocalization } from '../storage/LocalizationStore';
+import { getLanguageByCode, getDefaultLanguage } from '../config/languages';
+const languageSwitcherConfig = {
+    defaultIconSize: 20,
+    defaultNavigationScreen: 'LanguageSelection',
+    hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
+};
+export const LanguageSwitcher = ({ showName = false, showFlag = true, color, navigationScreen = languageSwitcherConfig.defaultNavigationScreen, style, textStyle, }) => {
+    const navigation = useNavigation();
+    const { currentLanguage } = useLocalization();
+    const currentLang = getLanguageByCode(currentLanguage) || getDefaultLanguage();
+    const navigateToLanguageSelection = () => {
+        if (navigation && navigationScreen) {
+            navigation.navigate(navigationScreen);
+        }
+    };
+    const iconColor = color || '#000000';
+    return (<TouchableOpacity style={[styles.container, style]} onPress={navigateToLanguageSelection} activeOpacity={0.7} hitSlop={languageSwitcherConfig.hitSlop}>
+      {showFlag && (<Text style={[styles.flag, textStyle]}>{currentLang.flag}</Text>)}
+      {showName && (<Text style={[styles.languageName, { color: iconColor }, textStyle]}>
+          {currentLang.nativeName}
+        </Text>)}
+      {!showName && !showFlag && (<Text style={[styles.icon, { color: iconColor }]}>🌐</Text>)}
+    </TouchableOpacity>);
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        paddingHorizontal: 4,
+    },
+    flag: {
+        fontSize: 20,
+    },
+    languageName: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    icon: {
+        fontSize: 20,
+    },
+});
+export default LanguageSwitcher;
+//# sourceMappingURL=LanguageSwitcher.js.map

package/lib/infrastructure/components/LanguageSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSwitcher.js","sourceRoot":"","sources":["../../../src/infrastructure/components/LanguageSwitcher.tsx"],"names":[],"mappings":"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"}

package/lib/infrastructure/components/useLanguageNavigation.d.ts

@@ -0,0 +1,6 @@
+import { Language } from '../../domain/repositories/ILocalizationRepository';
+export declare const useLanguageNavigation: (navigationScreen: string) => {
+    currentLang: Language;
+    navigateToLanguageSelection: () => void;
+};
+//# sourceMappingURL=useLanguageNavigation.d.ts.map

package/lib/infrastructure/components/useLanguageNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLanguageNavigation.d.ts","sourceRoot":"","sources":["../../../src/infrastructure/components/useLanguageNavigation.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,mDAAmD,CAAC;AAE7E,eAAO,MAAM,qBAAqB,GAAI,kBAAkB,MAAM;;;CAY7D,CAAC"}

package/lib/infrastructure/components/useLanguageNavigation.js

@@ -0,0 +1,16 @@
+// @ts-ignore - Optional peer dependency
+import { useNavigation } from '@react-navigation/native';
+import { useLocalization } from '../storage/LocalizationStore';
+import { getLanguageByCode, getDefaultLanguage } from '../config/languages';
+export const useLanguageNavigation = (navigationScreen) => {
+    const navigation = useNavigation();
+    const { currentLanguage } = useLocalization();
+    const currentLang = getLanguageByCode(currentLanguage) || getDefaultLanguage();
+    const navigateToLanguageSelection = () => {
+        if (navigation && navigationScreen) {
+            navigation.navigate(navigationScreen);
+        }
+    };
+    return { currentLang, navigateToLanguageSelection };
+};
+//# sourceMappingURL=useLanguageNavigation.js.map

package/lib/infrastructure/components/useLanguageNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLanguageNavigation.js","sourceRoot":"","sources":["../../../src/infrastructure/components/useLanguageNavigation.ts"],"names":[],"mappings":"AAAA,wCAAwC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAG5E,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,gBAAwB,EAAE,EAAE;IAChE,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,EAAE,eAAe,EAAE,GAAG,eAAe,EAAE,CAAC;IAC9C,MAAM,WAAW,GAAG,iBAAiB,CAAC,eAAe,CAAC,IAAI,kBAAkB,EAAE,CAAC;IAE/E,MAAM,2BAA2B,GAAG,GAAG,EAAE;QACvC,IAAI,UAAU,IAAI,gBAAgB,EAAE,CAAC;YACnC,UAAU,CAAC,QAAQ,CAAC,gBAAyB,CAAC,CAAC;QACjD,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,EAAE,WAAW,EAAE,2BAA2B,EAAE,CAAC;AACtD,CAAC,CAAC"}

package/lib/infrastructure/config/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/infrastructure/config/i18n.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,IAAI,MAAM,SAAS,CAAC;AAmD3B,eAAe,IAAI,CAAC"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/infrastructure/config/i18n.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,IAAI,MAAM,SAAS,CAAC;AA6F3B,eAAe,IAAI,CAAC"}

package/lib/infrastructure/config/i18n.js

@@ -32,18 +32,61 @@ const resources = {
 };
 /**
  * Initialize i18next
+ * Deferred initialization to avoid React Native renderer conflicts
  */
-i18n.use(initReactI18next).init({
-    resources,
-    lng: DEFAULT_LANGUAGE,
-    fallbackLng: DEFAULT_LANGUAGE,
-    interpolation: {
-        escapeValue: false, // React already escapes values
-    },
-    react: {
-        useSuspense: false, // Disable suspense for React Native
-    },
-    compatibilityJSON: 'v4', // Use i18next v4 JSON format
-});
+let isInitialized = false;
+const initializeI18n = () => {
+    if (isInitialized)
+        return;
+    try {
+        /* eslint-disable-next-line no-console */
+        if (__DEV__)
+            console.log('[i18n] Initializing i18next...');
+        // Check if initReactI18next is available
+        if (!initReactI18next) {
+            throw new Error('initReactI18next is undefined');
+        }
+        /* eslint-disable-next-line no-console */
+        if (__DEV__)
+            console.log('[i18n] initReactI18next found, initializing...');
+        i18n.use(initReactI18next).init({
+            resources,
+            lng: DEFAULT_LANGUAGE,
+            fallbackLng: DEFAULT_LANGUAGE,
+            interpolation: {
+                escapeValue: false, // React already escapes values
+            },
+            react: {
+                useSuspense: false, // Disable suspense for React Native
+            },
+            compatibilityJSON: 'v4', // Use i18next v4 JSON format
+        });
+        isInitialized = true;
+        /* eslint-disable-next-line no-console */
+        if (__DEV__)
+            console.log('[i18n] i18next initialized successfully');
+    }
+    catch (error) {
+        /* eslint-disable-next-line no-console */
+        if (__DEV__)
+            console.error('[i18n] Initialization error:', error);
+        // Don't throw - allow app to continue without i18n
+        /* eslint-disable-next-line no-console */
+        if (__DEV__)
+            console.warn('[i18n] Continuing without i18n initialization');
+    }
+};
+// Defer initialization until React is ready
+// React Native doesn't have window, so we check for global
+if (typeof global !== 'undefined') {
+    // Use setTimeout to defer initialization
+    setTimeout(() => {
+        initializeI18n();
+    }, 0);
+}
+else {
+    // Fallback: initialize immediately
+    initializeI18n();
+}
 export default i18n;
 //# sourceMappingURL=i18n.js.map

package/lib/infrastructure/config/i18n.js.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../../../src/infrastructure/config/i18n.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAuB,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpE;;;;;;;;;;GAUG;AAEH,yDAAyD;AACzD,OAAO,gBAAgB,MAAM,kBAAkB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,SAAS,GAAG;IAChB,OAAO,EAAE;QACP,WAAW,EAAE;YACX,GAAG,gBAAgB;SACpB;KACF;CACF,CAAC;AAEF;;GAEG;AACH,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC;IAC9B,SAAS;IACT,GAAG,EAAE,gBAAgB;IACrB,WAAW,EAAE,gBAAgB;IAE7B,aAAa,EAAE;QACb,WAAW,EAAE,KAAK,EAAE,+BAA+B;KACpD;IAED,KAAK,EAAE;QACL,WAAW,EAAE,KAAK,EAAE,oCAAoC;KACzD;IAED,iBAAiB,EAAE,IAAI,EAAE,6BAA6B;CACvD,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../../../src/infrastructure/config/i18n.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAuB,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpE;;;;;;;;;;GAUG;AAEH,yDAAyD;AACzD,OAAO,gBAAgB,MAAM,kBAAkB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,SAAS,GAAG;IAChB,OAAO,EAAE;QACP,WAAW,EAAE;YACX,GAAG,gBAAgB;SACpB;KACF;CACF,CAAC;AAEF;;;GAGG;AACH,IAAI,aAAa,GAAG,KAAK,CAAC;AAE1B,MAAM,cAAc,GAAG,GAAG,EAAE;IAC1B,IAAI,aAAa;QAAE,OAAO;IAE1B,IAAI,CAAC;QACH,yCAAyC;QACzC,IAAI,OAAO;YAAE,OAAO,CAAC,GAAG,CAAC,gCAAgC,CAAC,CAAC;QAE3D,yCAAyC;QACzC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACtB,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;QACnD,CAAC;QAED,yCAAyC;QACzC,IAAI,OAAO;YAAE,OAAO,CAAC,GAAG,CAAC,gDAAgD,CAAC,CAAC;QAE3E,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC;YAC9B,SAAS;YACT,GAAG,EAAE,gBAAgB;YACrB,WAAW,EAAE,gBAAgB;YAE7B,aAAa,EAAE;gBACb,WAAW,EAAE,KAAK,EAAE,+BAA+B;aACpD;YAED,KAAK,EAAE;gBACL,WAAW,EAAE,KAAK,EAAE,oCAAoC;aACzD;YAED,iBAAiB,EAAE,IAAI,EAAE,6BAA6B;SACvD,CAAC,CAAC;QAEH,aAAa,GAAG,IAAI,CAAC;QACrB,yCAAyC;QACzC,IAAI,OAAO;YAAE,OAAO,CAAC,GAAG,CAAC,yCAAyC,CAAC,CAAC;IACtE,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,yCAAyC;QACzC,IAAI,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAC;QAClE,mDAAmD;QACnD,yCAAyC;QACzC,IAAI,OAAO;YAAE,OAAO,CAAC,IAAI,CAAC,+CAA+C,CAAC,CAAC;IAC7E,CAAC;AACH,CAAC,CAAC;AAEF,4CAA4C;AAC5C,2DAA2D;AAC3D,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,yCAAyC;IACzC,UAAU,CAAC,GAAG,EAAE;QACd,cAAc,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,CAAC,CAAC;AACR,CAAC;KAAM,CAAC;IACN,mCAAmC;IACnC,cAAc,EAAE,CAAC;AACnB,CAAC;AAED,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-localization",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Universal localization system for React Native apps with i18n support",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -46,7 +46,13 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "react-native": ">=0.74.0"
+    "react-native": ">=0.74.0",
+    "@react-navigation/native": "^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@react-navigation/native": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "typescript": "^5.3.3",

package/src/index.ts

@@ -8,6 +8,8 @@ export { useLocalization, useLocalizationStore } from './infrastructure/storage/
 
 // Components
 export { LocalizationProvider } from './infrastructure/components/LocalizationProvider';
+export { LanguageSwitcher } from './infrastructure/components/LanguageSwitcher';
+export { useLanguageNavigation } from './infrastructure/components/useLanguageNavigation';
 
 // Configuration
 export { default as i18n } from './infrastructure/config/i18n';

package/src/infrastructure/components/LanguageSwitcher.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { TouchableOpacity, Text, View, StyleSheet } from 'react-native';
+// @ts-ignore - Optional peer dependency
+import { useNavigation } from '@react-navigation/native';
+import { useLocalization } from '../storage/LocalizationStore';
+import { getLanguageByCode, getDefaultLanguage } from '../config/languages';
+import { Language } from '../../domain/repositories/ILocalizationRepository';
+
+interface LanguageSwitcherProps {
+  showName?: boolean;
+  showFlag?: boolean;
+  color?: string;
+  navigationScreen?: string;
+  style?: any;
+  textStyle?: any;
+}
+
+const languageSwitcherConfig = {
+  defaultIconSize: 20,
+  defaultNavigationScreen: 'LanguageSelection',
+  hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
+};
+
+export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
+  showName = false,
+  showFlag = true,
+  color,
+  navigationScreen = languageSwitcherConfig.defaultNavigationScreen,
+  style,
+  textStyle,
+}) => {
+  const navigation = useNavigation();
+  const { currentLanguage } = useLocalization();
+  const currentLang = getLanguageByCode(currentLanguage) || getDefaultLanguage();
+
+  const navigateToLanguageSelection = () => {
+    if (navigation && navigationScreen) {
+      navigation.navigate(navigationScreen as never);
+    }
+  };
+
+  const iconColor = color || '#000000';
+
+  return (
+    <TouchableOpacity
+      style={[styles.container, style]}
+      onPress={navigateToLanguageSelection}
+      activeOpacity={0.7}
+      hitSlop={languageSwitcherConfig.hitSlop}
+    >
+      {showFlag && (
+        <Text style={[styles.flag, textStyle]}>{currentLang.flag}</Text>
+      )}
+      {showName && (
+        <Text style={[styles.languageName, { color: iconColor }, textStyle]}>
+          {currentLang.nativeName}
+        </Text>
+      )}
+      {!showName && !showFlag && (
+        <Text style={[styles.icon, { color: iconColor }]}>🌐</Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingHorizontal: 4,
+  },
+  flag: {
+    fontSize: 20,
+  },
+  languageName: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  icon: {
+    fontSize: 20,
+  },
+});
+
+export default LanguageSwitcher;
+

package/src/infrastructure/components/useLanguageNavigation.ts

@@ -0,0 +1,20 @@
+// @ts-ignore - Optional peer dependency
+import { useNavigation } from '@react-navigation/native';
+import { useLocalization } from '../storage/LocalizationStore';
+import { getLanguageByCode, getDefaultLanguage } from '../config/languages';
+import { Language } from '../../domain/repositories/ILocalizationRepository';
+
+export const useLanguageNavigation = (navigationScreen: string) => {
+  const navigation = useNavigation();
+  const { currentLanguage } = useLocalization();
+  const currentLang = getLanguageByCode(currentLanguage) || getDefaultLanguage();
+
+  const navigateToLanguageSelection = () => {
+    if (navigation && navigationScreen) {
+      navigation.navigate(navigationScreen as never);
+    }
+  };
+
+  return { currentLang, navigateToLanguageSelection };
+};
+

package/src/infrastructure/config/i18n.ts

@@ -37,21 +37,63 @@ const resources = {
 
 /**
  * Initialize i18next
+ * Deferred initialization to avoid React Native renderer conflicts
  */
-i18n.use(initReactI18next).init({
-  resources,
-  lng: DEFAULT_LANGUAGE,
-  fallbackLng: DEFAULT_LANGUAGE,
+let isInitialized = false;
 
-  interpolation: {
-    escapeValue: false, // React already escapes values
-  },
+const initializeI18n = () => {
+  if (isInitialized) return;
 
-  react: {
-    useSuspense: false, // Disable suspense for React Native
-  },
+  try {
+    /* eslint-disable-next-line no-console */
+    if (__DEV__) console.log('[i18n] Initializing i18next...');
+    
+    // Check if initReactI18next is available
+    if (!initReactI18next) {
+      throw new Error('initReactI18next is undefined');
+    }
+    
+    /* eslint-disable-next-line no-console */
+    if (__DEV__) console.log('[i18n] initReactI18next found, initializing...');
+    
+    i18n.use(initReactI18next).init({
+      resources,
+      lng: DEFAULT_LANGUAGE,
+      fallbackLng: DEFAULT_LANGUAGE,
+
+      interpolation: {
+        escapeValue: false, // React already escapes values
+      },
+
+      react: {
+        useSuspense: false, // Disable suspense for React Native
+      },
+
+      compatibilityJSON: 'v4', // Use i18next v4 JSON format
+    });
+    
+    isInitialized = true;
+    /* eslint-disable-next-line no-console */
+    if (__DEV__) console.log('[i18n] i18next initialized successfully');
+  } catch (error) {
+    /* eslint-disable-next-line no-console */
+    if (__DEV__) console.error('[i18n] Initialization error:', error);
+    // Don't throw - allow app to continue without i18n
+    /* eslint-disable-next-line no-console */
+    if (__DEV__) console.warn('[i18n] Continuing without i18n initialization');
+  }
+};
 
-  compatibilityJSON: 'v4', // Use i18next v4 JSON format
-});
+// Defer initialization until React is ready
+// React Native doesn't have window, so we check for global
+if (typeof global !== 'undefined') {
+  // Use setTimeout to defer initialization
+  setTimeout(() => {
+    initializeI18n();
+  }, 0);
+} else {
+  // Fallback: initialize immediately
+  initializeI18n();
+}
 
 export default i18n;