@umituz/react-native-localization 3.5.9 → 3.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-localization",
-  "version": "3.5.9",
+  "version": "3.5.11",
   "description": "Generic localization system for React Native apps with i18n support",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -42,6 +42,7 @@
   "peerDependencies": {
     "@expo/vector-icons": ">=14.0.0",
     "@react-navigation/native": ">=6.0.0",
+    "@umituz/react-native-design-system": ">=2.0.0",
     "@umituz/react-native-filesystem": "latest",
     "@umituz/react-native-storage": "latest",
     "expo-localization": ">=15.0.0",
@@ -59,14 +60,17 @@
     "@babel/preset-typescript": "^7.28.5",
     "@expo/vector-icons": "^15.0.3",
     "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-native-community/datetimepicker": "^8.5.1",
+    "@react-navigation/native": "^6.1.17",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@react-navigation/native": "^6.1.17",
     "@testing-library/react-native": "^13.3.3",
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",
+    "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-filesystem": "^1.4.0",
+    "@umituz/react-native-icons": "^1.1.2",
     "@umituz/react-native-storage": "^2.4.0",
     "expo-localization": "~15.0.0",
     "i18next": "^23.0.0",
@@ -77,6 +81,7 @@
     "react-i18next": "^14.0.0",
     "react-native": ">=0.74.0",
     "react-native-gesture-handler": "^2.29.1",
+    "react-native-safe-area-context": "^5.6.2",
     "react-test-renderer": "^19.2.0",
     "ts-jest": "^29.4.6",
     "ts-node": "^10.9.2",

package/src/index.ts

@@ -7,6 +7,9 @@
 export { useLocalization } from './infrastructure/hooks/useLocalization';
 export { useLocalizationStore } from './infrastructure/storage/LocalizationStore';
 export { useTranslationFunction } from './infrastructure/hooks/useTranslation';
+export { useLanguageSelection } from './infrastructure/hooks/useLanguageSelection';
+export { useLanguageSwitcher } from './infrastructure/components/useLanguageSwitcher';
+export { useLocalizationProvider } from './infrastructure/components/useLocalizationProvider';
 
 // Components
 export { LocalizationProvider } from './infrastructure/components/LocalizationProvider';

package/src/infrastructure/components/LanguageSwitcher.tsx

@@ -1,8 +1,11 @@
-import React, { useCallback, useMemo } from 'react';
+/**
+ * Language Switcher Component
+ * Displays current language and allows switching
+ */
+
+import React, { useMemo } from 'react';
 import { TouchableOpacity, Text, StyleSheet } from 'react-native';
-import { useLocalization } from '../hooks/useLocalization';
-import { languageRegistry } from '../config/languagesData';
-import type { Language } from '../storage/types/LocalizationState';
+import { useLanguageSwitcher } from './useLanguageSwitcher';
 
 export interface LanguageSwitcherProps {
   showName?: boolean;
@@ -36,23 +39,7 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
   disabled = false,
   accessibilityLabel,
 }) => {
-  const { currentLanguage } = useLocalization();
-
-  const currentLang = useMemo((): Language => {
-    return languageRegistry.getLanguageByCode(currentLanguage) || languageRegistry.getDefaultLanguage();
-  }, [currentLanguage]);
-
-  const handlePress = useCallback(() => {
-    if (disabled) {
-      return;
-    }
-    
-    if (__DEV__) {
-      console.log('[LanguageSwitcher] Pressed, current language:', currentLanguage);
-    }
-    
-    onPress?.();
-  }, [disabled, onPress, currentLanguage]);
+  const { currentLang, handlePress } = useLanguageSwitcher({ onPress, disabled });
 
   const iconColor = useMemo(() => color || DEFAULT_CONFIG.defaultColor, [color]);
 
@@ -63,7 +50,7 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
     accessible: true,
   }), [accessibilityLabel, currentLang.nativeName, disabled]);
 
-  const content = useMemo(() => {
+  const renderContent = () => {
     if (showFlag && showName) {
       return (
         <>
@@ -76,9 +63,7 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
     }
 
     if (showFlag) {
-      return (
-        <Text style={[styles.flag, iconStyle]}>{currentLang.flag}</Text>
-      );
+      return <Text style={[styles.flag, iconStyle]}>{currentLang.flag}</Text>;
     }
 
     if (showName) {
@@ -89,10 +74,8 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
       );
     }
 
-    return (
-      <Text style={[styles.icon, { color: iconColor }, iconStyle]}>🌐</Text>
-    );
-  }, [showFlag, showName, currentLang, iconColor, textStyle, iconStyle]);
+    return <Text style={[styles.icon, { color: iconColor }, iconStyle]}>🌐</Text>;
+  };
 
   return (
     <TouchableOpacity
@@ -104,7 +87,7 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
       disabled={disabled}
       {...accessibilityProps}
     >
-      {content}
+      {renderContent()}
     </TouchableOpacity>
   );
 };
@@ -136,4 +119,3 @@ const styles = StyleSheet.create({
 });
 
 export default LanguageSwitcher;
-

package/src/infrastructure/components/LocalizationProvider.tsx

@@ -1,15 +1,13 @@
 /**
  * LocalizationProvider Component
  * Initializes localization system with app translations
- * Includes memory leak prevention and performance optimizations
  */
 
-import React, { useEffect, useRef, ReactNode, useCallback } from 'react';
-import { useLocalizationStore } from '../storage/LocalizationStore';
-import { I18nInitializer } from '../config/I18nInitializer';
+import React from 'react';
+import { useLocalizationProvider } from './useLocalizationProvider';
 
 export interface LocalizationProviderProps {
-  children: ReactNode;
+  children: React.ReactNode;
   translations: Record<string, any>;
   defaultLanguage?: string;
   onLanguageChange?: (languageCode: string) => void;
@@ -17,97 +15,27 @@ export interface LocalizationProviderProps {
   enableCache?: boolean;
 }
 
+// Context for language change handling
+const LocalizationContext = React.createContext<{
+  handleLanguageChange: (languageCode: string) => Promise<void>;
+  isInitialized: boolean;
+  currentLanguage: string;
+} | null>(null);
+
 export const LocalizationProvider: React.FC<LocalizationProviderProps> = ({
   children,
   translations,
   defaultLanguage = 'en-US',
   onLanguageChange,
   onError,
-  enableCache = true,
 }) => {
-  const store = useLocalizationStore();
-  const initialize = store.initialize;
-  const setLanguage = store.setLanguage;
-  const isInitialized = store.isInitialized;
-  const currentLanguage = store.currentLanguage;
-  
-  const isInitializingRef = useRef(false);
-  const previousLanguageRef = useRef(currentLanguage);
-
-  // Memoize translations to prevent unnecessary re-renders
-  const memoizedTranslations = useRef(translations);
-  
-  // Update memoized translations when they change
-  useEffect(() => {
-    memoizedTranslations.current = translations;
-  }, [translations]);
-
-  // Initialize localization system
-  useEffect(() => {
-    if (isInitializingRef.current || isInitialized) {
-      return;
-    }
-
-    isInitializingRef.current = true;
-
-    const initializeLocalization = async () => {
-      try {
-        if (__DEV__) {
-          console.log('[LocalizationProvider] Initializing with language:', defaultLanguage);
-        }
-
-        await I18nInitializer.initialize(memoizedTranslations.current, defaultLanguage);
-        await initialize();
+  const { isInitialized, currentLanguage, handleLanguageChange } = useLocalizationProvider({
+    translations,
+    defaultLanguage,
+    onLanguageChange,
+    onError,
+  });
 
-        if (__DEV__) {
-          console.log('[LocalizationProvider] Initialization complete');
-        }
-      } catch (error) {
-        if (__DEV__) {
-          console.error('[LocalizationProvider] Initialization failed:', error);
-        }
-        onError?.(error instanceof Error ? error : new Error('Initialization failed'));
-      } finally {
-        isInitializingRef.current = false;
-      }
-    };
-
-    initializeLocalization();
-
-    // Cleanup function
-    return () => {
-      if (__DEV__) {
-        console.log('[LocalizationProvider] Cleanup');
-      }
-    };
-  }, [defaultLanguage, initialize, onError, isInitialized]);
-
-  // Handle language changes
-  useEffect(() => {
-    if (previousLanguageRef.current !== currentLanguage && currentLanguage !== previousLanguageRef.current) {
-      previousLanguageRef.current = currentLanguage;
-      onLanguageChange?.(currentLanguage);
-      
-      if (__DEV__) {
-        console.log('[LocalizationProvider] Language changed to:', currentLanguage);
-      }
-    }
-  }, [currentLanguage, onLanguageChange]);
-
-  // Handle language change with error handling
-  const handleLanguageChange = useCallback(async (languageCode: string) => {
-    try {
-      await setLanguage(languageCode);
-    } catch (error) {
-      if (__DEV__) {
-        console.error('[LocalizationProvider] Language change failed:', error);
-      }
-      onError?.(error instanceof Error ? error : new Error('Language change failed'));
-      throw error;
-    }
-  }, [setLanguage, onError]);
-
-  // Context value with memoized functions
   const contextValue = React.useMemo(() => ({
     handleLanguageChange,
     isInitialized,
@@ -121,13 +49,6 @@ export const LocalizationProvider: React.FC<LocalizationProviderProps> = ({
   );
 };
 
-// Context for language change handling
-const LocalizationContext = React.createContext<{
-  handleLanguageChange: (languageCode: string) => Promise<void>;
-  isInitialized: boolean;
-  currentLanguage: string;
-} | null>(null);
-
 export const useLocalizationContext = () => {
   const context = React.useContext(LocalizationContext);
   if (!context) {

package/src/infrastructure/components/useLanguageSwitcher.ts

@@ -0,0 +1,39 @@
+/**
+ * Language Switcher Hook
+ * Manages the logic for the LanguageSwitcher component
+ */
+
+import { useMemo, useCallback } from 'react';
+import { useLocalization } from '../hooks/useLocalization';
+import { languageRegistry } from '../config/languagesData';
+import type { Language } from '../storage/types/LocalizationState';
+
+export interface UseLanguageSwitcherProps {
+    onPress?: () => void;
+    disabled?: boolean;
+}
+
+export const useLanguageSwitcher = ({ onPress, disabled }: UseLanguageSwitcherProps) => {
+    const { currentLanguage } = useLocalization();
+
+    const currentLang = useMemo((): Language => {
+        return languageRegistry.getLanguageByCode(currentLanguage) || languageRegistry.getDefaultLanguage();
+    }, [currentLanguage]);
+
+    const handlePress = useCallback(() => {
+        if (disabled) {
+            return;
+        }
+
+        if (__DEV__) {
+            console.log('[LanguageSwitcher] Pressed, current language:', currentLanguage);
+        }
+
+        onPress?.();
+    }, [disabled, onPress, currentLanguage]);
+
+    return {
+        currentLang,
+        handlePress,
+    };
+};

package/src/infrastructure/components/useLocalizationProvider.ts

@@ -0,0 +1,101 @@
+/**
+ * Localization Provider Hook
+ * Manages localization initialization and language changes
+ */
+
+import { useEffect, useRef, useCallback } from 'react';
+import { useLocalizationStore } from '../storage/LocalizationStore';
+import { I18nInitializer } from '../config/I18nInitializer';
+
+export interface UseLocalizationProviderProps {
+    translations: Record<string, any>;
+    defaultLanguage: string;
+    onLanguageChange?: (languageCode: string) => void;
+    onError?: (error: Error) => void;
+}
+
+export const useLocalizationProvider = ({
+    translations,
+    defaultLanguage,
+    onLanguageChange,
+    onError,
+}: UseLocalizationProviderProps) => {
+    const store = useLocalizationStore();
+    const { initialize, setLanguage, isInitialized, currentLanguage } = store;
+
+    const isInitializingRef = useRef(false);
+    const previousLanguageRef = useRef(currentLanguage);
+
+    // Memoize translations
+    const memoizedTranslations = useRef(translations);
+
+    useEffect(() => {
+        memoizedTranslations.current = translations;
+    }, [translations]);
+
+    // Initialization
+    useEffect(() => {
+        if (isInitializingRef.current || isInitialized) {
+            return;
+        }
+
+        isInitializingRef.current = true;
+
+        const initializeLocalization = async () => {
+            try {
+                if (__DEV__) {
+                    console.log('[LocalizationProvider] Initializing with language:', defaultLanguage);
+                }
+
+                await I18nInitializer.initialize(memoizedTranslations.current, defaultLanguage);
+                await initialize();
+
+                if (__DEV__) {
+                    console.log('[LocalizationProvider] Initialization complete');
+                }
+            } catch (error) {
+                const initializationError = error instanceof Error ? error : new Error('Initialization failed');
+                if (__DEV__) {
+                    console.error('[LocalizationProvider] Initialization failed:', initializationError);
+                }
+                onError?.(initializationError);
+            } finally {
+                isInitializingRef.current = false;
+            }
+        };
+
+        initializeLocalization();
+    }, [defaultLanguage, initialize, onError, isInitialized]);
+
+    // Language Change Listener
+    useEffect(() => {
+        if (previousLanguageRef.current !== currentLanguage) {
+            previousLanguageRef.current = currentLanguage;
+            onLanguageChange?.(currentLanguage);
+
+            if (__DEV__) {
+                console.log('[LocalizationProvider] Language changed to:', currentLanguage);
+            }
+        }
+    }, [currentLanguage, onLanguageChange]);
+
+    // Manual Language Change
+    const handleLanguageChange = useCallback(async (languageCode: string) => {
+        try {
+            await setLanguage(languageCode);
+        } catch (error) {
+            const changeError = error instanceof Error ? error : new Error('Language change failed');
+            if (__DEV__) {
+                console.error('[LocalizationProvider] Language change failed:', changeError);
+            }
+            onError?.(changeError);
+            throw changeError;
+        }
+    }, [setLanguage, onError]);
+
+    return {
+        isInitialized,
+        currentLanguage,
+        handleLanguageChange,
+    };
+};

package/src/infrastructure/config/DeviceLocale.ts

@@ -0,0 +1,46 @@
+/**
+ * Device Locale Detection
+ * Detects and maps device locale to supported language
+ */
+
+import * as Localization from 'expo-localization';
+import { LOCALE_MAPPING } from './LocaleMapping';
+import { languageRegistry } from './languagesData';
+
+export const DEFAULT_LANGUAGE = 'en-US';
+
+/**
+ * Get device locale and map it to supported language
+ * Called ONLY on first launch (when no saved language preference exists)
+ */
+export const getDeviceLocale = (): string => {
+    try {
+        const deviceLocale = Localization.getLocales()[0]?.languageTag;
+
+        if (!deviceLocale) {
+            return DEFAULT_LANGUAGE;
+        }
+
+        // Check exact match
+        if (LOCALE_MAPPING[deviceLocale]) {
+            return LOCALE_MAPPING[deviceLocale];
+        }
+
+        // Extract language code
+        const languageCode = deviceLocale.split('-')[0];
+
+        // Check language code
+        if (LOCALE_MAPPING[languageCode]) {
+            return LOCALE_MAPPING[languageCode];
+        }
+
+        // Check if directly supported
+        if (languageRegistry.isLanguageSupported(deviceLocale)) {
+            return deviceLocale;
+        }
+
+        return DEFAULT_LANGUAGE;
+    } catch {
+        return DEFAULT_LANGUAGE;
+    }
+};

package/src/infrastructure/config/LanguageQuery.ts

@@ -0,0 +1,30 @@
+/**
+ * Language Query Functions
+ * Provides functions to query and search languages
+ */
+
+import { languageRegistry } from './languagesData';
+import type { Language } from '../storage/types/LocalizationState';
+
+export const getSupportedLanguages = () => languageRegistry.getLanguages();
+
+export const getLanguageByCode = (code: string): Language | undefined => {
+    return languageRegistry.getLanguageByCode(code);
+};
+
+export const isLanguageSupported = (code: string): boolean => {
+    return languageRegistry.isLanguageSupported(code);
+};
+
+export const getDefaultLanguage = (): Language => {
+    return languageRegistry.getLanguages()[0];
+};
+
+export const searchLanguages = (query: string): Language[] => {
+    const lowerQuery = query.toLowerCase();
+    return languageRegistry.getLanguages().filter(
+        (lang) =>
+            lang.name.toLowerCase().includes(lowerQuery) ||
+            lang.nativeName.toLowerCase().includes(lowerQuery)
+    );
+};

package/src/infrastructure/config/LocaleMapping.ts

@@ -0,0 +1,78 @@
+/**
+ * Locale Mapping Configuration
+ * Maps device locales to supported app locales
+ */
+
+export const LOCALE_MAPPING: Record<string, string> = {
+    // English variants map to en-US
+    'en': 'en-US',
+    'en-US': 'en-US',
+    'en-GB': 'en-US',
+    'en-AU': 'en-US',
+    'en-CA': 'en-US',
+    'en-NZ': 'en-US',
+    'en-IE': 'en-US',
+    'en-ZA': 'en-US',
+    'en-SG': 'en-US',
+    'en-IN': 'en-US',
+
+    // Portuguese mappings
+    'pt': 'pt-PT',
+    'pt-BR': 'pt-BR',
+    'pt-PT': 'pt-PT',
+
+    // Spanish variants
+    'es': 'es-ES',
+    'es-ES': 'es-ES',
+    'es-MX': 'es-ES',
+    'es-AR': 'es-ES',
+    'es-US': 'es-ES',
+
+    // French variants
+    'fr': 'fr-FR',
+    'fr-FR': 'fr-FR',
+    'fr-CA': 'fr-FR',
+    'fr-BE': 'fr-FR',
+    'fr-CH': 'fr-FR',
+
+    // Norwegian
+    'no': 'no-NO',
+    'nb': 'no-NO',
+    'nn': 'no-NO',
+
+    // Chinese variants
+    'zh': 'zh-CN',
+    'zh-CN': 'zh-CN',
+    'zh-Hans': 'zh-CN',
+    'zh-Hans-CN': 'zh-CN',
+    'zh-Hant': 'zh-TW',
+    'zh-TW': 'zh-TW',
+    'zh-HK': 'zh-TW',
+
+    // Others
+    'ar': 'ar-SA',
+    'bg': 'bg-BG',
+    'cs': 'cs-CZ',
+    'da': 'da-DK',
+    'de': 'de-DE',
+    'el': 'el-GR',
+    'fi': 'fi-FI',
+    'hi': 'hi-IN',
+    'hr': 'hr-HR',
+    'hu': 'hu-HU',
+    'id': 'id-ID',
+    'it': 'it-IT',
+    'ja': 'ja-JP',
+    'ko': 'ko-KR',
+    'ms': 'ms-MY',
+    'nl': 'nl-NL',
+    'pl': 'pl-PL',
+    'ro': 'ro-RO',
+    'ru': 'ru-RU',
+    'sk': 'sk-SK',
+    'sv': 'sv-SE',
+    'th': 'th-TH',
+    'tr': 'tr-TR',
+    'uk': 'uk-UA',
+    'vi': 'vi-VN',
+};

package/src/infrastructure/config/languages.ts

@@ -1,177 +1,28 @@
 /**
- * Supported Languages Configuration
- * Complete list of 29 languages supported by the app
- *
- * SINGLE SOURCE OF TRUTH: Imports from constants/languages.ts
- * - All language definitions come from one central location
- * - Ensures consistency across app.json, i18n config, and UI
- * - Automatic synchronization between all language configurations
- *
- * DEVICE LOCALE DETECTION:
- * - First launch: Automatically detects device locale
- * - Fallback: English (en-US) if device locale not supported
- * - User choice: Persists after manual language selection
+ * Languages Configuration - Main Export
+ * Central export point for all language-related functionality
  */
 
-import * as Localization from 'expo-localization';
 import { languageRegistry } from './languagesData';
 import type { Language } from '../storage/types/LocalizationState';
 
-// SUPPORTED_LANGUAGES and LANGUAGES are now dynamic getters to ensure they always reflect the registry
+// Re-export from DeviceLocale
+export { DEFAULT_LANGUAGE, getDeviceLocale } from './DeviceLocale';
+
+// Re-export from LanguageQuery
+export {
+  getSupportedLanguages,
+  getLanguageByCode,
+  isLanguageSupported,
+  getDefaultLanguage,
+  searchLanguages,
+} from './LanguageQuery';
+
+// Re-export from LocaleMapping
+export { LOCALE_MAPPING } from './LocaleMapping';
+
+// Backward compatibility
 export const getSUPPORTED_LANGUAGES = () => languageRegistry.getLanguages();
 export const getLANGUAGES = () => languageRegistry.getLanguages();
-
-// For backward compatibility while keeping it dynamic
 export const SUPPORTED_LANGUAGES: Language[] = languageRegistry.getLanguages();
 export const LANGUAGES = SUPPORTED_LANGUAGES;
-
-export const DEFAULT_LANGUAGE = 'en-US';
-
-/**
- * Locale mapping for device locales to supported app locales
- * Maps short codes and regional variants to en-US
- */
-const LOCALE_MAPPING: Record<string, string> = {
-  // English variants map to en-US
-  'en': 'en-US',
-  'en-US': 'en-US',
-  'en-GB': 'en-US',
-  'en-AU': 'en-US',
-  'en-CA': 'en-US',
-  'en-NZ': 'en-US',
-  'en-IE': 'en-US',
-  'en-ZA': 'en-US',
-  'en-SG': 'en-US',
-  'en-IN': 'en-US',
-
-  // Portuguese mappings
-  'pt': 'pt-PT',
-  'pt-BR': 'pt-BR',
-  'pt-PT': 'pt-PT',
-
-  // Spanish variants
-  'es': 'es-ES',
-  'es-ES': 'es-ES',
-  'es-MX': 'es-ES',
-  'es-AR': 'es-ES',
-  'es-US': 'es-ES',
-
-  // French variants
-  'fr': 'fr-FR',
-  'fr-FR': 'fr-FR',
-  'fr-CA': 'fr-FR',
-  'fr-BE': 'fr-FR',
-  'fr-CH': 'fr-FR',
-
-  // Norwegian
-  'no': 'no-NO',
-  'nb': 'no-NO',
-  'nn': 'no-NO',
-
-  // Chinese variants
-  'zh': 'zh-CN',
-  'zh-CN': 'zh-CN',
-  'zh-Hans': 'zh-CN',
-  'zh-Hans-CN': 'zh-CN',
-  'zh-Hant': 'zh-TW',
-  'zh-TW': 'zh-TW',
-  'zh-HK': 'zh-TW',
-
-  // Others
-  'ar': 'ar-SA',
-  'bg': 'bg-BG',
-  'cs': 'cs-CZ',
-  'da': 'da-DK',
-  'de': 'de-DE',
-  'el': 'el-GR',
-  'fi': 'fi-FI',
-  'hi': 'hi-IN',
-  'hr': 'hr-HR',
-  'hu': 'hu-HU',
-  'id': 'id-ID',
-  'it': 'it-IT',
-  'ja': 'ja-JP',
-  'ko': 'ko-KR',
-  'ms': 'ms-MY',
-  'nl': 'nl-NL',
-  'pl': 'pl-PL',
-  'ro': 'ro-RO',
-  'ru': 'ru-RU',
-  'sk': 'sk-SK',
-  'sv': 'sv-SE',
-  'th': 'th-TH',
-  'tr': 'tr-TR',
-  'uk': 'uk-UA',
-  'vi': 'vi-VN',
-};
-
-export const getLanguageByCode = (code: string): Language | undefined => {
-  return languageRegistry.getLanguageByCode(code);
-};
-
-export const isLanguageSupported = (code: string): boolean => {
-  return languageRegistry.isLanguageSupported(code);
-};
-
-export const getDefaultLanguage = (): Language => {
-  return SUPPORTED_LANGUAGES[0]; // en-US
-};
-
-/**
- * Get device locale and map it to supported language
- * Called ONLY on first launch (when no saved language preference exists)
- *
- * @returns Supported language code or DEFAULT_LANGUAGE
- *
- * Examples:
- * - Device: "en" → Returns: "en-US"
- * - Device: "en-GB" → Returns: "en-US"
- * - Device: "tr" → Returns: "tr-TR" (if supported)
- * - Device: "de" → Returns: "en-US" (not supported, fallback)
- */
-export const getDeviceLocale = (): string => {
-  try {
-    // Get device locale (e.g., "en-US", "tr-TR", or just "en")
-    const deviceLocale = Localization.locale;
-
-    if (!deviceLocale) {
-      return DEFAULT_LANGUAGE;
-    }
-
-    // Check if exact match exists in LOCALE_MAPPING
-    if (LOCALE_MAPPING[deviceLocale]) {
-      return LOCALE_MAPPING[deviceLocale];
-    }
-
-    // Extract language code (e.g., "en" from "en-US")
-    const languageCode = deviceLocale.split('-')[0];
-
-    // Check if language code exists in LOCALE_MAPPING
-    if (LOCALE_MAPPING[languageCode]) {
-      return LOCALE_MAPPING[languageCode];
-    }
-
-    // Check if device locale is directly supported
-    if (isLanguageSupported(deviceLocale)) {
-      return deviceLocale;
-    }
-
-    // Fallback to default language
-    return DEFAULT_LANGUAGE;
-  } catch (error) {
-    // If any error occurs, fallback to default
-    return DEFAULT_LANGUAGE;
-  }
-};
-
-/**
- * Search languages by name or native name
- */
-export const searchLanguages = (query: string): Language[] => {
-  const lowerQuery = query.toLowerCase();
-  return SUPPORTED_LANGUAGES.filter(
-    (lang) =>
-      lang.name.toLowerCase().includes(lowerQuery) ||
-      lang.nativeName.toLowerCase().includes(lowerQuery)
-  );
-};

package/src/infrastructure/hooks/useLanguageSelection.ts

@@ -0,0 +1,32 @@
+/**
+ * Language Selection Hook
+ * Manages language selection state and filtering
+ */
+
+import { useState, useMemo } from 'react';
+import { useLocalization } from './useLocalization';
+import { searchLanguages } from '../config/LanguageQuery';
+
+export const useLanguageSelection = () => {
+    const { currentLanguage, setLanguage } = useLocalization();
+    const [searchQuery, setSearchQuery] = useState('');
+    const [selectedCode, setSelectedCode] = useState(currentLanguage);
+
+    const filteredLanguages = useMemo(() => {
+        return searchLanguages(searchQuery);
+    }, [searchQuery]);
+
+    const handleLanguageSelect = async (code: string, onComplete?: () => void) => {
+        setSelectedCode(code);
+        await setLanguage(code);
+        onComplete?.();
+    };
+
+    return {
+        searchQuery,
+        setSearchQuery,
+        selectedCode,
+        filteredLanguages,
+        handleLanguageSelect,
+    };
+};

package/src/infrastructure/hooks/useTranslation.ts

@@ -35,35 +35,71 @@ export const useTranslationFunction = () => {
       : defaultValueOrOptions || {};
 
     if (!ready || !i18n.isInitialized) {
+      if (__DEV__) {
+        console.log(`[i18n] ⏳ Not ready - Key: "${key}" → Fallback: "${options.defaultValue || key}"`);
+      }
       return options.defaultValue || key;
     }
 
+    let finalResult: string;
+    let translationFound = false;
+    let usedKey = key;
+
     // If key already has namespace separator (:), use as-is
     if (key.includes(':')) {
       const result = i18nextT(key, options);
-      return typeof result === 'string' ? result : key;
-    }
-
-    // Auto-detect namespace from first dot segment
-    const firstDotIndex = key.indexOf('.');
-    if (firstDotIndex > 0) {
-      const potentialNamespace = key.substring(0, firstDotIndex);
-      const restOfKey = key.substring(firstDotIndex + 1);
-      const hasNamespace = i18n.hasResourceBundle(i18n.language, potentialNamespace);
+      finalResult = typeof result === 'string' ? result : key;
+      translationFound = finalResult !== key && finalResult !== options.defaultValue;
+      usedKey = key;
+    } else {
+      // Auto-detect namespace from first dot segment
+      const firstDotIndex = key.indexOf('.');
+      if (firstDotIndex > 0) {
+        const potentialNamespace = key.substring(0, firstDotIndex);
+        const restOfKey = key.substring(firstDotIndex + 1);
+        const hasNamespace = i18n.hasResourceBundle(i18n.language, potentialNamespace);
 
-      if (hasNamespace) {
-        const namespacedKey = `${potentialNamespace}:${restOfKey}`;
-        const namespacedResult = i18nextT(namespacedKey, options);
+        if (hasNamespace) {
+          const namespacedKey = `${potentialNamespace}:${restOfKey}`;
+          const namespacedResult = i18nextT(namespacedKey, options);
 
-        if (namespacedResult !== namespacedKey && namespacedResult !== restOfKey) {
-          return typeof namespacedResult === 'string' ? namespacedResult : key;
+          if (namespacedResult !== namespacedKey && namespacedResult !== restOfKey) {
+            finalResult = typeof namespacedResult === 'string' ? namespacedResult : key;
+            translationFound = true;
+            usedKey = namespacedKey;
+          } else {
+            // Fallback to original key
+            const result = i18nextT(key, options);
+            finalResult = typeof result === 'string' ? result : key;
+            translationFound = finalResult !== key && finalResult !== options.defaultValue;
+            usedKey = key;
+          }
+        } else {
+          // Fallback to original key
+          const result = i18nextT(key, options);
+          finalResult = typeof result === 'string' ? result : key;
+          translationFound = finalResult !== key && finalResult !== options.defaultValue;
+          usedKey = key;
         }
+      } else {
+        // Fallback to original key
+        const result = i18nextT(key, options);
+        finalResult = typeof result === 'string' ? result : key;
+        translationFound = finalResult !== key && finalResult !== options.defaultValue;
+        usedKey = key;
+      }
+    }
+
+    // Development mode logging
+    if (__DEV__) {
+      if (translationFound) {
+        console.log(`[i18n] ✅ Found - Key: "${usedKey}" → "${finalResult}"`);
+      } else {
+        console.warn(`[i18n] ⚠️  Missing - Key: "${usedKey}" → Fallback: "${finalResult}"`);
       }
     }
 
-    // Fallback to original key
-    const result = i18nextT(key, options);
-    return typeof result === 'string' ? result : key;
+    return finalResult;
   }, [i18nextT, ready]);
 
   return {

package/src/presentation/screens/LanguageSelectionScreen.tsx

@@ -1,40 +1,22 @@
 /**
  * Language Selection Screen
- *
- * Language picker with search functionality
- *
- * Generic language selector that can be customized by consuming applications
+ * Generic language selector with search functionality
  */
 
-import React, { useState, useMemo } from 'react';
-import {
-  View,
-  StyleSheet,
-  FlatList,
-} from 'react-native';
+import React from 'react';
+import { View, StyleSheet, FlatList } from 'react-native';
 // @ts-ignore - Optional peer dependency
 import { useNavigation } from '@react-navigation/native';
 import { useAppDesignTokens } from '@umituz/react-native-design-system';
-import { useLocalization, searchLanguages, Language } from '../../index';
+import { useLanguageSelection } from '../../infrastructure/hooks/useLanguageSelection';
 import { LanguageItem } from '../components/LanguageItem';
 import { SearchInput } from '../components/SearchInput';
+import type { Language } from '../../infrastructure/storage/types/LocalizationState';
 
 interface LanguageSelectionScreenProps {
-  /**
-   * Custom component for rendering language items
-   */
   renderLanguageItem?: (item: Language, isSelected: boolean, onSelect: (code: string) => void) => React.ReactNode;
-  /**
-   * Custom component for search input
-   */
   renderSearchInput?: (value: string, onChange: (value: string) => void, placeholder: string) => React.ReactNode;
-  /**
-   * Custom component for container
-   */
   containerComponent?: React.ComponentType<{ children: React.ReactNode }>;
-  /**
-   * Custom styles
-   */
   styles?: {
     container?: any;
     searchContainer?: any;
@@ -48,20 +30,10 @@ interface LanguageSelectionScreenProps {
     clearButton?: any;
     listContent?: any;
   };
-  /**
-   * Search placeholder text
-   */
   searchPlaceholder: string;
-  /**
-   * Test ID for testing
-   */
   testID?: string;
 }
 
-/**
- * Language Selection Screen Component
- * Generic language selector that can be customized by consuming applications
- */
 export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = ({
   renderLanguageItem,
   renderSearchInput,
@@ -72,39 +44,36 @@ export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = (
 }) => {
   const navigation = useNavigation();
   const tokens = useAppDesignTokens();
-  const { t, currentLanguage, setLanguage } = useLocalization();
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedCode, setSelectedCode] = useState(currentLanguage);
-
-  const filteredLanguages = useMemo(() => {
-    return searchLanguages(searchQuery);
-  }, [searchQuery]);
+  const {
+    searchQuery,
+    setSearchQuery,
+    selectedCode,
+    filteredLanguages,
+    handleLanguageSelect,
+  } = useLanguageSelection();
 
-  const handleLanguageSelect = async (code: string) => {
-    setSelectedCode(code);
-    await setLanguage(code);
-    navigation.goBack();
+  const onSelect = (code: string) => {
+    handleLanguageSelect(code, () => navigation.goBack());
   };
 
   const renderItem = ({ item }: { item: Language }) => {
     const isSelected = selectedCode === item.code;
 
     if (renderLanguageItem) {
-      const customItem = renderLanguageItem(item, isSelected, handleLanguageSelect);
-      return <>{customItem}</>;
+      return <>{renderLanguageItem(item, isSelected, onSelect)}</>;
     }
 
     return (
       <LanguageItem
         item={item}
         isSelected={isSelected}
-        onSelect={handleLanguageSelect}
+        onSelect={onSelect}
         customStyles={customStyles}
       />
     );
   };
 
-  const renderSearchInputComponent = () => {
+  const renderSearchComponent = () => {
     if (renderSearchInput) {
       return renderSearchInput(searchQuery, setSearchQuery, searchPlaceholder);
     }
@@ -121,7 +90,7 @@ export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = (
 
   const content = (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }, customStyles?.container]} testID={testID}>
-      {renderSearchInputComponent()}
+      {renderSearchComponent()}
       <FlatList
         data={filteredLanguages}
         renderItem={renderItem}