@umituz/react-native-localization 3.5.8 → 3.5.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-localization",
-  "version": "3.5.8",
+  "version": "3.5.10",
   "description": "Generic localization system for React Native apps with i18n support",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -42,7 +42,6 @@
   "peerDependencies": {
     "@expo/vector-icons": ">=14.0.0",
     "@react-navigation/native": ">=6.0.0",
-    "@umituz/react-native-design-system-theme": "*",
     "@umituz/react-native-filesystem": "latest",
     "@umituz/react-native-storage": "latest",
     "expo-localization": ">=15.0.0",
@@ -67,7 +66,6 @@
     "@testing-library/react-native": "^13.3.3",
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",
-    "@umituz/react-native-design-system-theme": "^1.8.0",
     "@umituz/react-native-filesystem": "^1.4.0",
     "@umituz/react-native-storage": "^2.4.0",
     "expo-localization": "~15.0.0",
@@ -93,4 +91,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

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/components/LanguageItem.tsx

@@ -16,7 +16,7 @@ import {
   type TextStyle,
 } from 'react-native';
 // @ts-ignore - Optional peer dependency
-import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 import type { Language } from '../../infrastructure/storage/types/LocalizationState';
 
 interface LanguageItemProps {

package/src/presentation/components/LanguageSection.tsx

@@ -5,7 +5,7 @@ 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 { useAppDesignTokens } from '@umituz/react-native-design-system';
 import { useLocalization } from '../../infrastructure/hooks/useLocalization';
 import { getLanguageByCode } from '../../infrastructure/config/languages';
 
@@ -20,11 +20,13 @@ export interface LanguageSectionConfig {
 export interface LanguageSectionProps {
     config?: LanguageSectionConfig;
     containerStyle?: ViewStyle;
+    sectionTitle?: string;
 }
 
 export const LanguageSection: React.FC<LanguageSectionProps> = ({
     config,
     containerStyle,
+    sectionTitle,
 }) => {
     const navigation = useNavigation();
     const tokens = useAppDesignTokens();
@@ -33,6 +35,7 @@ export const LanguageSection: React.FC<LanguageSectionProps> = ({
 
     const route = config?.route || 'LanguageSelection';
     const title = config?.title || t('settings.languageSelection.title') || 'Language';
+    const displaySectionTitle = sectionTitle || title;
     const description = config?.description || '';
 
     const currentLang = getLanguageByCode(currentLanguage);
@@ -47,7 +50,7 @@ export const LanguageSection: React.FC<LanguageSectionProps> = ({
 
     return (
         <View style={[styles.sectionContainer, { backgroundColor: colors.surface }, containerStyle]}>
-            <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>{title}</Text>
+            <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>{displaySectionTitle}</Text>
 
             <Pressable
                 style={({ pressed }) => [

package/src/presentation/components/SearchInput.tsx

@@ -17,7 +17,7 @@ import {
   type TextStyle,
 } from 'react-native';
 // @ts-ignore - Optional peer dependency
-import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 
 interface SearchInputProps {
   value: string;

package/src/presentation/screens/LanguageSelectionScreen.tsx

@@ -14,7 +14,7 @@ import {
 } from 'react-native';
 // @ts-ignore - Optional peer dependency
 import { useNavigation } from '@react-navigation/native';
-import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 import { useLocalization, searchLanguages, Language } from '../../index';
 import { LanguageItem } from '../components/LanguageItem';
 import { SearchInput } from '../components/SearchInput';