@umituz/react-native-localization 3.2.5 → 3.3.0

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@umituz/react-native-localization",
-  "version": "3.2.5",
+  "version": "3.3.0",
   "description": "Generic localization system for React Native apps with i18n support",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
     "typecheck": "tsc --noEmit --skipLibCheck",
-    "lint": "tsc --noEmit",
+    "lint": "tsc --noEmit --skipLibCheck",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",

package/src/infrastructure/hooks/useTranslation.ts

@@ -1,17 +1,15 @@
 /**
  * Translation Hook
  *
- * Provides translation function with proper fallbacks and performance optimization
- * - React i18next integration
- * - Memoized translation function
- * - Type-safe translation function
+ * Provides translation function with proper language change reactivity
+ * - React i18next integration for automatic language change detection
  * - Auto-namespace detection from dot notation
- * - Performance optimizations
+ * - Type-safe translation function
  */
 
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import i18n from '../config/i18n';
-import { translationCache } from '../config/TranslationCache';
 
 export interface TranslationOptions {
   count?: number;
@@ -20,90 +18,54 @@ export interface TranslationOptions {
   [key: string]: any;
 }
 
-
 /**
  * Hook for translation functionality
+ * Uses react-i18next for automatic language change reactivity
+ *
  * Supports both formats:
  * - t('namespace:key.subkey') - explicit namespace
  * - t('namespace.key.subkey') - auto-detected namespace (first segment before dot)
  */
 export const useTranslationFunction = () => {
-  const isInitialized = useMemo(() => i18n.isInitialized, []);
+  const { t: i18nextT, ready } = useTranslation(undefined, { i18n });
 
   const translate = useCallback((key: string, options: TranslationOptions = {}): string => {
-    if (!isInitialized || typeof i18n.t !== 'function') {
+    if (!ready || !i18n.isInitialized) {
       if (__DEV__) {
-        console.warn(`[Localization] i18n not initialized, returning key: ${key}`);
+        console.warn(`[Localization] i18n not ready, returning key: ${key}`);
       }
       return options.defaultValue || key;
     }
 
-    // Create cache key
-    const cacheKey = `${key}:${JSON.stringify(options)}`;
-
-    // Check cache first
-    const cached = translationCache.get(cacheKey);
-    if (cached) {
-      return cached;
-    }
-
-    let result: string;
-
     // If key already has namespace separator (:), use as-is
     if (key.includes(':')) {
-      const tempResult = i18n.t(key, options);
-      result = typeof tempResult === 'string' ? tempResult : 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 result = i18nextT(key, options);
+      return typeof result === 'string' ? result : key;
+    }
 
-        // Check if this namespace exists in i18n resources
-        const hasNamespace = i18n.hasResourceBundle(i18n.language, potentialNamespace);
+    // 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 = i18n.t(namespacedKey, options);
+      if (hasNamespace) {
+        const namespacedKey = `${potentialNamespace}:${restOfKey}`;
+        const namespacedResult = i18nextT(namespacedKey, options);
 
-          // If translation found (not same as key), use it
-          if (namespacedResult !== namespacedKey && namespacedResult !== restOfKey) {
-            result = typeof namespacedResult === 'string' ? namespacedResult : key;
-          } else {
-            // Fallback to original key
-            const fallbackResult = i18n.t(key, options);
-            result = typeof fallbackResult === 'string' ? fallbackResult : key;
-          }
-        } else {
-          // Fallback to original key
-          const tempResult = i18n.t(key, options);
-          result = typeof tempResult === 'string' ? tempResult : key;
+        if (namespacedResult !== namespacedKey && namespacedResult !== restOfKey) {
+          return typeof namespacedResult === 'string' ? namespacedResult : key;
         }
-      } else {
-        // No dot, use as-is
-        const noDotResult = i18n.t(key, options);
-        result = typeof noDotResult === 'string' ? noDotResult : key;
       }
     }
 
-    // Convert to string and cache
-    const finalResult: string = typeof result === 'string' ? result : key;
-    translationCache.set(cacheKey, finalResult);
-
-    return finalResult;
-  }, [isInitialized]);
-
-  // Clear cache when language changes
-  const clearCache = useCallback(() => {
-    translationCache.clear();
-    if (__DEV__) {
-      console.log('[Localization] Translation cache cleared');
-    }
-  }, []);
+    // Fallback to original key
+    const result = i18nextT(key, options);
+    return typeof result === 'string' ? result : key;
+  }, [i18nextT, ready]);
 
   return {
     t: translate,
-    clearCache,
   };
 };

package/src/infrastructure/storage/LanguageSwitcher.ts

@@ -22,7 +22,7 @@ export class LanguageSwitcher {
   }> {
     const language = languageRegistry.getLanguageByCode(languageCode);
 
-    if (!language) {
+    if (!language && __DEV__) {
       console.warn(`[LanguageSwitcher] Language ${languageCode} not found in registry, proceeding anyway.`);
     }
 

package/src/infrastructure/storage/LocalizationStore.ts

@@ -4,11 +4,10 @@
  */
 
 import { create } from 'zustand';
-import type { LocalizationState, LocalizationActions, LocalizationGetters, Language } from './types/LocalizationState';
+import type { LocalizationState, LocalizationActions, LocalizationGetters } from './types/LocalizationState';
 import { LanguageInitializer } from './LanguageInitializer';
 import { LanguageSwitcher } from './LanguageSwitcher';
 import { languageRegistry } from '../config/languagesData';
-import { translationCache } from '../config/TranslationCache';
 
 interface LocalizationStore extends LocalizationState, LocalizationActions, LocalizationGetters {
   // Additional properties can be added here if needed
@@ -68,9 +67,6 @@ export const createLocalizationStore = () => {
         try {
           const result = await LanguageSwitcher.switchLanguage(languageCode);
 
-          // Clear translation cache to ensure new keys are fetched
-          translationCache.clear();
-
           set({
             currentLanguage: result.languageCode,
             isRTL: result.isRTL,

package/src/presentation/components/LanguageItem.tsx

@@ -1,16 +1,22 @@
 /**
  * Language Item Component
- * 
+ *
  * Renders a single language item in the language selection list
+ * Theme-aware component that adapts to light/dark mode
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   View,
   TouchableOpacity,
   Text,
   StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
 } from 'react-native';
+// @ts-ignore - Optional peer dependency
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
 import type { Language } from '../../infrastructure/storage/types/LocalizationState';
 
 interface LanguageItemProps {
@@ -18,11 +24,11 @@ interface LanguageItemProps {
   isSelected: boolean;
   onSelect: (code: string) => void;
   customStyles?: {
-    languageItem?: any;
-    languageContent?: any;
-    languageText?: any;
-    flag?: any;
-    nativeName?: any;
+    languageItem?: StyleProp<ViewStyle>;
+    languageContent?: StyleProp<ViewStyle>;
+    languageText?: StyleProp<ViewStyle>;
+    flag?: StyleProp<TextStyle>;
+    nativeName?: StyleProp<TextStyle>;
   };
 }
 
@@ -32,13 +38,36 @@ export const LanguageItem: React.FC<LanguageItemProps> = ({
   onSelect,
   customStyles,
 }) => {
+  const tokens = useAppDesignTokens();
+
+  const themedStyles = useMemo(() => ({
+    languageItem: {
+      backgroundColor: tokens.colors.backgroundSecondary,
+      borderColor: tokens.colors.border,
+    } as ViewStyle,
+    selectedLanguageItem: {
+      borderColor: tokens.colors.primary,
+      backgroundColor: tokens.colors.primaryLight,
+    } as ViewStyle,
+    nativeName: {
+      color: tokens.colors.textPrimary,
+    } as TextStyle,
+    languageName: {
+      color: tokens.colors.textSecondary,
+    } as TextStyle,
+    checkIcon: {
+      color: tokens.colors.primary,
+    } as TextStyle,
+  }), [tokens]);
+
   return (
     <TouchableOpacity
       testID="language-item-test"
       style={[
         styles.languageItem,
+        themedStyles.languageItem,
         customStyles?.languageItem,
-        isSelected && styles.selectedLanguageItem,
+        isSelected ? [styles.selectedLanguageItem, themedStyles.selectedLanguageItem] : undefined,
       ]}
       onPress={() => onSelect(item.code)}
       activeOpacity={0.7}
@@ -48,16 +77,16 @@ export const LanguageItem: React.FC<LanguageItemProps> = ({
           {item.flag || '🌐'}
         </Text>
         <View style={[styles.languageText, customStyles?.languageText]}>
-          <Text style={[styles.nativeName, customStyles?.nativeName]}>
+          <Text style={[styles.nativeName, themedStyles.nativeName, customStyles?.nativeName]}>
             {item.nativeName}
           </Text>
-          <Text style={[styles.languageName, customStyles?.nativeName]}>
+          <Text style={[styles.languageName, themedStyles.languageName, customStyles?.nativeName]}>
             {item.name}
           </Text>
         </View>
       </View>
       {isSelected && (
-        <Text style={[styles.checkIcon, customStyles?.flag]}>✓</Text>
+        <Text style={[styles.checkIcon, themedStyles.checkIcon, customStyles?.flag]}>✓</Text>
       )}
     </TouchableOpacity>
   );
@@ -71,13 +100,10 @@ const styles = StyleSheet.create({
     padding: 16,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: '#e0e0e0',
     marginBottom: 8,
-    backgroundColor: '#fff',
   },
   selectedLanguageItem: {
-    borderColor: '#007AFF',
-    backgroundColor: '#f0f8ff',
+    borderWidth: 2,
   },
   languageContent: {
     flexDirection: 'row',
@@ -94,16 +120,13 @@ const styles = StyleSheet.create({
   nativeName: {
     fontSize: 16,
     fontWeight: '600',
-    color: '#333',
     marginBottom: 2,
   },
   languageName: {
     fontSize: 14,
-    color: '#666',
   },
   checkIcon: {
     fontSize: 18,
-    color: '#007AFF',
     fontWeight: 'bold',
   },
 });

package/src/presentation/components/LanguageSection.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
-import { View, Text, Pressable, StyleSheet, ViewStyle } from 'react-native';
+import { View, Text, Pressable, StyleSheet, type ViewStyle } from 'react-native';
+// @ts-ignore - Optional peer dependency
 import { Feather } from '@expo/vector-icons';
+// @ts-ignore - Optional peer dependency
 import { useNavigation } from '@react-navigation/native';
+// @ts-ignore - Optional peer dependency
 import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
 import { useLocalization } from '../../infrastructure/hooks/useLocalization';
 import { getLanguageByCode } from '../../infrastructure/config/languages';

package/src/presentation/components/SearchInput.tsx

@@ -1,27 +1,33 @@
 /**
  * Search Input Component
- * 
+ *
  * Renders search input for language filtering
+ * Theme-aware component that adapts to light/dark mode
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   View,
   TextInput,
   TouchableOpacity,
   Text,
   StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
 } from 'react-native';
+// @ts-ignore - Optional peer dependency
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
 
 interface SearchInputProps {
   value: string;
   onChange: (value: string) => void;
   placeholder: string;
   customStyles?: {
-    searchContainer?: any;
-    searchInput?: any;
-    searchIcon?: any;
-    clearButton?: any;
+    searchContainer?: StyleProp<ViewStyle>;
+    searchInput?: StyleProp<TextStyle>;
+    searchIcon?: StyleProp<TextStyle>;
+    clearButton?: StyleProp<ViewStyle>;
   };
 }
 
@@ -31,13 +37,28 @@ export const SearchInput: React.FC<SearchInputProps> = ({
   placeholder,
   customStyles,
 }) => {
+  const tokens = useAppDesignTokens();
+
+  const themedStyles = useMemo(() => ({
+    searchContainer: {
+      backgroundColor: tokens.colors.backgroundSecondary,
+      borderColor: tokens.colors.border,
+    } as ViewStyle,
+    searchInput: {
+      color: tokens.colors.textPrimary,
+    } as TextStyle,
+    clearIcon: {
+      color: tokens.colors.textSecondary,
+    } as TextStyle,
+  }), [tokens]);
+
   return (
-    <View style={[styles.searchContainer, customStyles?.searchContainer]}>
+    <View style={[styles.searchContainer, themedStyles.searchContainer, customStyles?.searchContainer]}>
       <Text style={[styles.searchIcon, customStyles?.searchIcon]}>🔍</Text>
       <TextInput
-        style={[styles.searchInput, customStyles?.searchInput]}
+        style={[styles.searchInput, themedStyles.searchInput, customStyles?.searchInput]}
         placeholder={placeholder}
-        placeholderTextColor="#666"
+        placeholderTextColor={tokens.colors.textTertiary}
         value={value}
         onChangeText={onChange}
         autoCapitalize="none"
@@ -49,7 +70,7 @@ export const SearchInput: React.FC<SearchInputProps> = ({
           style={[styles.clearButton, customStyles?.clearButton]}
           hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
         >
-          <Text style={[styles.clearIcon, customStyles?.searchIcon]}>✕</Text>
+          <Text style={[styles.clearIcon, themedStyles.clearIcon, customStyles?.searchIcon]}>✕</Text>
         </TouchableOpacity>
       )}
     </View>
@@ -64,10 +85,8 @@ const styles = StyleSheet.create({
     marginBottom: 24,
     paddingHorizontal: 16,
     paddingVertical: 12,
-    backgroundColor: '#f5f5f5',
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: '#e0e0e0',
   },
   searchIcon: {
     marginRight: 12,
@@ -78,13 +97,11 @@ const styles = StyleSheet.create({
     fontSize: 16,
     padding: 0,
     fontWeight: '500',
-    color: '#333',
   },
   clearButton: {
     padding: 4,
   },
   clearIcon: {
     fontSize: 14,
-    color: '#666',
   },
 });

package/src/infrastructure/config/TranslationCache.ts

@@ -1,31 +0,0 @@
-/**
- * Translation Cache
- * 
- * Performance optimization for translation caching
- */
-
-export class TranslationCache {
-  private cache = new Map<string, string>();
-  private maxSize = 1000;
-
-  get(key: string): string | undefined {
-    return this.cache.get(key);
-  }
-
-  set(key: string, value: string): void {
-    if (this.cache.size >= this.maxSize) {
-      // Remove oldest entry
-      const firstKey = this.cache.keys().next().value;
-      if (firstKey !== undefined) {
-        this.cache.delete(firstKey);
-      }
-    }
-    this.cache.set(key, value);
-  }
-
-  clear(): void {
-    this.cache.clear();
-  }
-}
-
-export const translationCache = new TranslationCache();

package/src/infrastructure/config/__tests__/TranslationCache.test.ts

@@ -1,44 +0,0 @@
-/**
- * Translation Cache Tests
- */
-
-import { TranslationCache } from '../TranslationCache';
-
-describe('TranslationCache', () => {
-  let cache: TranslationCache;
-
-  beforeEach(() => {
-    cache = new TranslationCache();
-  });
-
-  it('should store and retrieve values', () => {
-    cache.set('key1', 'value1');
-    expect(cache.get('key1')).toBe('value1');
-  });
-
-  it('should return undefined for non-existent keys', () => {
-    expect(cache.get('nonexistent')).toBeUndefined();
-  });
-
-  it('should clear all values', () => {
-    cache.set('key1', 'value1');
-    cache.set('key2', 'value2');
-    cache.clear();
-    expect(cache.get('key1')).toBeUndefined();
-    expect(cache.get('key2')).toBeUndefined();
-  });
-
-  it('should limit cache size to maxSize', () => {
-    // Create a small cache for testing
-    const smallCache = new TranslationCache();
-    (smallCache as any).maxSize = 2;
-
-    smallCache.set('key1', 'value1');
-    smallCache.set('key2', 'value2');
-    smallCache.set('key3', 'value3'); // Should remove key1
-
-    expect(smallCache.get('key1')).toBeUndefined();
-    expect(smallCache.get('key2')).toBe('value2');
-    expect(smallCache.get('key3')).toBe('value3');
-  });
-});