@umituz/react-native-localization 2.5.0 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-localization",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "description": "English-only localization system for React Native apps with i18n support",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/infrastructure/components/LocalizationProvider.tsx

@@ -1,21 +1,29 @@
 /**
  * LocalizationProvider Component
- * Initializes localization system on mount
+ * Initializes localization system with app translations
  */
 
 import React, { useEffect, ReactNode } from 'react';
 import { useLocalizationStore } from '../storage/LocalizationStore';
+import { I18nInitializer } from '../config/I18nInitializer';
 
 interface LocalizationProviderProps {
   children: ReactNode;
+  translations: Record<string, any>;
+  defaultLanguage?: string;
 }
 
-export const LocalizationProvider: React.FC<LocalizationProviderProps> = ({ children }) => {
+export const LocalizationProvider: React.FC<LocalizationProviderProps> = ({
+  children,
+  translations,
+  defaultLanguage = 'en-US',
+}) => {
   const initialize = useLocalizationStore((state) => state.initialize);
 
   useEffect(() => {
+    I18nInitializer.initialize(translations, defaultLanguage);
     initialize();
-  }, [initialize]);
+  }, [translations, defaultLanguage, initialize]);
 
   return <>{children}</>;
 };

package/src/infrastructure/config/I18nInitializer.ts

@@ -8,70 +8,16 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import { DEFAULT_LANGUAGE } from './languages';
-import { TranslationLoader } from './TranslationLoader';
-
-const DEFAULT_NAMESPACE = 'common';
+import { ResourceBuilder } from './ResourceBuilder';
+import { NamespaceResolver } from './NamespaceResolver';
 
 export class I18nInitializer {
   private static reactI18nextInitialized = false;
-  private static appTranslations: Record<string, any> = {};
-
-  /**
-   * Register app translations (call before initialize)
-   */
-  static registerAppTranslations(translations: Record<string, any>): void {
-    this.appTranslations = translations;
-  }
-
-  /**
-   * Build resources with package + registered app translations
-   */
-  private static buildResources(): Record<string, Record<string, any>> {
-    const packageTranslations = TranslationLoader.loadPackageTranslations();
-
-    const resources: Record<string, Record<string, any>> = {
-      'en-US': {},
-    };
-
-    const enUSPackage = packageTranslations['en-US'] || {};
-
-    // Add package namespaces
-    for (const [namespace, translations] of Object.entries(enUSPackage)) {
-      resources['en-US'][namespace] = translations;
-    }
 
-    // Merge app translations (app overrides package)
-    for (const [namespace, translations] of Object.entries(this.appTranslations)) {
-      if (resources['en-US'][namespace]) {
-        resources['en-US'][namespace] = TranslationLoader.mergeTranslations(
-          resources['en-US'][namespace],
-          translations
-        );
-      } else {
-        resources['en-US'][namespace] = translations;
-      }
-    }
-
-    return resources;
-  }
-
-  private static getNamespaces(): string[] {
-    const packageTranslations = TranslationLoader.loadPackageTranslations();
-    const enUSPackage = packageTranslations['en-US'] || {};
-
-    const namespaces = new Set([
-      ...Object.keys(enUSPackage),
-      ...Object.keys(this.appTranslations),
-    ]);
-
-    if (!namespaces.has(DEFAULT_NAMESPACE)) {
-      namespaces.add(DEFAULT_NAMESPACE);
-    }
-
-    return Array.from(namespaces);
-  }
-
-  static initialize(): void {
+  static initialize(
+    appTranslations: Record<string, any>,
+    languageCode: string = DEFAULT_LANGUAGE
+  ): void {
     if (i18n.isInitialized) {
       return;
     }
@@ -82,16 +28,17 @@ export class I18nInitializer {
         this.reactI18nextInitialized = true;
       }
 
-      const resources = this.buildResources();
-      const namespaces = this.getNamespaces();
+      const resources = ResourceBuilder.buildResources(appTranslations, languageCode);
+      const namespaces = NamespaceResolver.getNamespaces(appTranslations, languageCode);
+      const defaultNamespace = NamespaceResolver.getDefaultNamespace();
 
       i18n.init({
         resources,
-        lng: DEFAULT_LANGUAGE,
-        fallbackLng: DEFAULT_LANGUAGE,
+        lng: languageCode,
+        fallbackLng: languageCode,
         ns: namespaces,
-        defaultNS: DEFAULT_NAMESPACE,
-        fallbackNS: DEFAULT_NAMESPACE,
+        defaultNS: defaultNamespace,
+        fallbackNS: defaultNamespace,
         interpolation: { escapeValue: false },
         react: { useSuspense: false },
         compatibilityJSON: 'v3',

package/src/infrastructure/config/NamespaceResolver.ts

@@ -0,0 +1,36 @@
+/**
+ * Namespace Resolver
+ * Resolves available namespaces from translations
+ */
+
+import { TranslationLoader } from './TranslationLoader';
+
+const DEFAULT_NAMESPACE = 'common';
+
+export class NamespaceResolver {
+  /**
+   * Get all available namespaces from package and app translations
+   */
+  static getNamespaces(
+    appTranslations: Record<string, any>,
+    languageCode: string
+  ): string[] {
+    const packageTranslations = TranslationLoader.loadPackageTranslations();
+    const packageLang = packageTranslations[languageCode] || {};
+
+    const namespaces = new Set([
+      ...Object.keys(packageLang),
+      ...Object.keys(appTranslations),
+    ]);
+
+    if (!namespaces.has(DEFAULT_NAMESPACE)) {
+      namespaces.add(DEFAULT_NAMESPACE);
+    }
+
+    return Array.from(namespaces);
+  }
+
+  static getDefaultNamespace(): string {
+    return DEFAULT_NAMESPACE;
+  }
+}

package/src/infrastructure/config/ResourceBuilder.ts

@@ -0,0 +1,43 @@
+/**
+ * Resource Builder
+ * Builds i18n resources from package and app translations
+ */
+
+import { TranslationLoader } from './TranslationLoader';
+
+export class ResourceBuilder {
+  /**
+   * Build resources with package + app translations
+   */
+  static buildResources(
+    appTranslations: Record<string, any>,
+    languageCode: string
+  ): Record<string, Record<string, any>> {
+    const packageTranslations = TranslationLoader.loadPackageTranslations();
+
+    const resources: Record<string, Record<string, any>> = {
+      [languageCode]: {},
+    };
+
+    const packageLang = packageTranslations[languageCode] || {};
+
+    // Add package namespaces
+    for (const [namespace, translations] of Object.entries(packageLang)) {
+      resources[languageCode][namespace] = translations;
+    }
+
+    // Merge app translations (app overrides package)
+    for (const [namespace, translations] of Object.entries(appTranslations)) {
+      if (resources[languageCode][namespace]) {
+        resources[languageCode][namespace] = TranslationLoader.mergeTranslations(
+          resources[languageCode][namespace],
+          translations
+        );
+      } else {
+        resources[languageCode][namespace] = translations;
+      }
+    }
+
+    return resources;
+  }
+}

package/src/infrastructure/hooks/useTranslation.ts

@@ -5,22 +5,51 @@
  * - React i18next integration
  * - Direct i18n fallback
  * - Type-safe translation function
+ * - Auto-namespace detection from dot notation
  */
 
-import { useTranslation } from 'react-i18next';
 import i18n from '../config/i18n';
 
 /**
  * Hook for translation functionality
+ * Supports both formats:
+ * - t('namespace:key.subkey') - explicit namespace
+ * - t('namespace.key.subkey') - auto-detected namespace (first segment before dot)
  */
 export const useTranslationFunction = (): ((key: string, options?: any) => string) => {
-  // Use direct i18n.t for reliability (no React context issues)
   return (key: string, options?: any): string => {
-    if (i18n.isInitialized && typeof i18n.t === 'function') {
+    if (!i18n.isInitialized || typeof i18n.t !== 'function') {
+      return key;
+    }
+
+    // If key already has namespace separator (:), use as-is
+    if (key.includes(':')) {
       const result = i18n.t(key, options);
       return typeof result === 'string' ? result : String(result);
     }
-    // Final fallback: return key
-    return key;
+
+    // Auto-detect namespace from first dot segment
+    // e.g., 'settings.appearance.title' -> namespace: 'settings', key: 'appearance.title'
+    const firstDotIndex = key.indexOf('.');
+    if (firstDotIndex > 0) {
+      const potentialNamespace = key.substring(0, firstDotIndex);
+      const restOfKey = key.substring(firstDotIndex + 1);
+
+      // Check if this namespace exists in i18n resources
+      const hasNamespace = i18n.hasResourceBundle(i18n.language, potentialNamespace);
+
+      if (hasNamespace) {
+        const namespacedKey = `${potentialNamespace}:${restOfKey}`;
+        const result = i18n.t(namespacedKey, options);
+        // If translation found (not same as key), return it
+        if (result !== namespacedKey && result !== restOfKey) {
+          return typeof result === 'string' ? result : String(result);
+        }
+      }
+    }
+
+    // Fallback: try original key as-is
+    const result = i18n.t(key, options);
+    return typeof result === 'string' ? result : String(result);
   };
 };