@umituz/react-native-localization 3.2.5 → 3.4.0

package/package.json

@@ -1,19 +1,22 @@
 {
   "name": "@umituz/react-native-localization",
-  "version": "3.2.5",
+  "version": "3.4.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",
     "prepublishOnly": "node scripts/prepublish.js",
     "version:patch": "npm version patch -m 'chore: release v%s'",
     "version:minor": "npm version minor -m 'chore: release v%s'",
-    "version:major": "npm version major -m 'chore: release v%s'"
+    "version:major": "npm version major -m 'chore: release v%s'",
+    "i18n:setup": "node scripts/setup-languages.js",
+    "i18n:sync": "node scripts/sync-translations.js",
+    "i18n:translate": "node scripts/translate-missing.js"
   },
   "keywords": [
     "react-native",

package/scripts/sync-translations.js

@@ -0,0 +1,277 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+
+/**
+ * Sync Translations Script
+ *
+ * Synchronizes translation keys from en-US.ts to all other language files.
+ * - Adds missing keys (with English values as placeholders)
+ * - Removes extra keys not in en-US
+ * - Maintains existing translations
+ *
+ * Usage: node scripts/sync-translations.js [locales-dir]
+ * Default: src/domains/localization/infrastructure/locales
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Parse TypeScript translation file and extract the object
+ */
+function parseTypeScriptFile(filePath) {
+  const content = fs.readFileSync(filePath, 'utf8');
+
+  // Extract the object from "export default { ... };"
+  const match = content.match(/export\s+default\s+(\{[\s\S]*\});?\s*$/);
+  if (!match) {
+    throw new Error(`Could not parse TypeScript file: ${filePath}`);
+  }
+
+  const objectStr = match[1].replace(/;$/, '');
+
+  try {
+    // eslint-disable-next-line no-eval
+    return eval(`(${objectStr})`);
+  } catch (error) {
+    throw new Error(`Failed to parse object in ${filePath}: ${error.message}`);
+  }
+}
+
+/**
+ * Generate TypeScript file content from object
+ */
+function generateTypeScriptContent(obj, langCode) {
+  const langName = getLangDisplayName(langCode);
+
+  function stringifyValue(value, indent = 2) {
+    if (typeof value === 'string') {
+      const escaped = value
+        .replace(/\\/g, '\\\\')
+        .replace(/"/g, '\\"')
+        .replace(/\n/g, '\\n');
+      return `"${escaped}"`;
+    }
+
+    if (Array.isArray(value)) {
+      if (value.length === 0) return '[]';
+      const items = value.map(v => stringifyValue(v, indent + 2));
+      return `[${items.join(', ')}]`;
+    }
+
+    if (typeof value === 'object' && value !== null) {
+      const spaces = ' '.repeat(indent);
+      const innerSpaces = ' '.repeat(indent + 2);
+      const entries = Object.entries(value)
+        .map(([k, v]) => {
+          const key = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(k) ? k : `"${k}"`;
+          return `${innerSpaces}${key}: ${stringifyValue(v, indent + 2)}`;
+        })
+        .join(',\n');
+      return `{\n${entries},\n${spaces}}`;
+    }
+
+    return String(value);
+  }
+
+  const objString = stringifyValue(obj, 0);
+
+  return `/**
+ * ${langName} Translations
+ * Auto-synced from en-US.ts
+ */
+
+export default ${objString};
+`;
+}
+
+/**
+ * Get display name for language code
+ */
+function getLangDisplayName(code) {
+  const names = {
+    'ar-SA': 'Arabic (Saudi Arabia)',
+    'bg-BG': 'Bulgarian',
+    'cs-CZ': 'Czech',
+    'da-DK': 'Danish',
+    'de-DE': 'German',
+    'el-GR': 'Greek',
+    'en-AU': 'English (Australia)',
+    'en-CA': 'English (Canada)',
+    'en-GB': 'English (UK)',
+    'en-US': 'English (US)',
+    'es-ES': 'Spanish (Spain)',
+    'es-MX': 'Spanish (Mexico)',
+    'fi-FI': 'Finnish',
+    'fr-CA': 'French (Canada)',
+    'fr-FR': 'French (France)',
+    'hi-IN': 'Hindi',
+    'hr-HR': 'Croatian',
+    'hu-HU': 'Hungarian',
+    'id-ID': 'Indonesian',
+    'it-IT': 'Italian',
+    'ja-JP': 'Japanese',
+    'ko-KR': 'Korean',
+    'ms-MY': 'Malay',
+    'nl-NL': 'Dutch',
+    'no-NO': 'Norwegian',
+    'pl-PL': 'Polish',
+    'pt-BR': 'Portuguese (Brazil)',
+    'pt-PT': 'Portuguese (Portugal)',
+    'ro-RO': 'Romanian',
+    'ru-RU': 'Russian',
+    'sk-SK': 'Slovak',
+    'sv-SE': 'Swedish',
+    'th-TH': 'Thai',
+    'tl-PH': 'Tagalog',
+    'tr-TR': 'Turkish',
+    'uk-UA': 'Ukrainian',
+    'vi-VN': 'Vietnamese',
+    'zh-CN': 'Chinese (Simplified)',
+    'zh-TW': 'Chinese (Traditional)',
+  };
+  return names[code] || code;
+}
+
+/**
+ * Add missing keys from en-US to target
+ */
+function addMissingKeys(enObj, targetObj, stats = { added: 0 }) {
+  for (const key in enObj) {
+    if (!Object.prototype.hasOwnProperty.call(targetObj, key)) {
+      targetObj[key] = enObj[key];
+      stats.added++;
+    } else if (
+      typeof enObj[key] === 'object' &&
+      enObj[key] !== null &&
+      !Array.isArray(enObj[key])
+    ) {
+      if (!targetObj[key] || typeof targetObj[key] !== 'object') {
+        targetObj[key] = {};
+      }
+      addMissingKeys(enObj[key], targetObj[key], stats);
+    }
+  }
+  return stats;
+}
+
+/**
+ * Remove extra keys not in en-US
+ */
+function removeExtraKeys(enObj, targetObj, stats = { removed: 0 }) {
+  for (const key in targetObj) {
+    if (!Object.prototype.hasOwnProperty.call(enObj, key)) {
+      delete targetObj[key];
+      stats.removed++;
+    } else if (
+      typeof enObj[key] === 'object' &&
+      enObj[key] !== null &&
+      !Array.isArray(enObj[key]) &&
+      typeof targetObj[key] === 'object' &&
+      targetObj[key] !== null &&
+      !Array.isArray(targetObj[key])
+    ) {
+      removeExtraKeys(enObj[key], targetObj[key], stats);
+    }
+  }
+  return stats;
+}
+
+/**
+ * Sync a single language file
+ */
+function syncLanguageFile(enUSPath, targetPath, langCode) {
+  const enUS = parseTypeScriptFile(enUSPath);
+  let target;
+
+  try {
+    target = parseTypeScriptFile(targetPath);
+  } catch {
+    target = {};
+  }
+
+  const addStats = { added: 0 };
+  const removeStats = { removed: 0 };
+
+  addMissingKeys(enUS, target, addStats);
+  removeExtraKeys(enUS, target, removeStats);
+
+  const changed = addStats.added > 0 || removeStats.removed > 0;
+
+  if (changed) {
+    const content = generateTypeScriptContent(target, langCode);
+    fs.writeFileSync(targetPath, content);
+  }
+
+  return {
+    added: addStats.added,
+    removed: removeStats.removed,
+    changed,
+  };
+}
+
+/**
+ * Main function
+ */
+function main() {
+  const targetDir = process.argv[2] || 'src/domains/localization/infrastructure/locales';
+  const localesDir = path.resolve(process.cwd(), targetDir);
+
+  console.log('🚀 Starting translation synchronization...\n');
+  console.log(`📂 Locales directory: ${localesDir}\n`);
+
+  if (!fs.existsSync(localesDir)) {
+    console.error(`❌ Locales directory not found: ${localesDir}`);
+    process.exit(1);
+  }
+
+  const enUSPath = path.join(localesDir, 'en-US.ts');
+  if (!fs.existsSync(enUSPath)) {
+    console.error(`❌ Base file not found: ${enUSPath}`);
+    process.exit(1);
+  }
+
+  // Find all language files
+  const files = fs.readdirSync(localesDir)
+    .filter(f => f.match(/^[a-z]{2}-[A-Z]{2}\.ts$/) && f !== 'en-US.ts')
+    .sort();
+
+  console.log(`📊 Languages to sync: ${files.length}\n`);
+
+  let totalAdded = 0;
+  let totalRemoved = 0;
+  let totalChanged = 0;
+
+  for (const file of files) {
+    const langCode = file.replace('.ts', '');
+    const targetPath = path.join(localesDir, file);
+
+    console.log(`🌍 Syncing ${langCode}...`);
+
+    const result = syncLanguageFile(enUSPath, targetPath, langCode);
+
+    if (result.changed) {
+      console.log(`   ✏️ +${result.added} keys, -${result.removed} keys`);
+      totalAdded += result.added;
+      totalRemoved += result.removed;
+      totalChanged++;
+    } else {
+      console.log(`   ✅ Already synchronized`);
+    }
+  }
+
+  console.log(`\n📊 Summary:`);
+  console.log(`   Languages processed: ${files.length}`);
+  console.log(`   Files changed: ${totalChanged}`);
+  console.log(`   Keys added: ${totalAdded}`);
+  console.log(`   Keys removed: ${totalRemoved}`);
+
+  if (totalChanged > 0) {
+    console.log(`\n✅ Synchronization completed!`);
+    console.log(`   Next: Run 'node scripts/translate-missing.js' to translate new keys`);
+  } else {
+    console.log(`\n✅ All languages were already synchronized!`);
+  }
+}
+
+main();

package/scripts/translate-missing.js

@@ -1,6 +1,396 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+
+/**
+ * Translate Missing Script
+ *
+ * Translates missing strings from en-US.ts to all other language files
+ * using Google Translate free API.
+ *
+ * Usage: node scripts/translate-missing.js [locales-dir]
+ * Default: src/domains/localization/infrastructure/locales
+ */
+
 const fs = require('fs');
 const path = require('path');
+const https = require('https');
+
+// Language codes mapping for Google Translate API
+const LANGUAGE_MAP = {
+  'ar-SA': 'ar', // Arabic
+  'bg-BG': 'bg', // Bulgarian
+  'cs-CZ': 'cs', // Czech
+  'da-DK': 'da', // Danish
+  'de-DE': 'de', // German
+  'el-GR': 'el', // Greek
+  'en-AU': 'en', // English (skip)
+  'en-CA': 'en', // English (skip)
+  'en-GB': 'en', // English (skip)
+  'es-ES': 'es', // Spanish
+  'es-MX': 'es', // Spanish
+  'fi-FI': 'fi', // Finnish
+  'fr-CA': 'fr', // French
+  'fr-FR': 'fr', // French
+  'hi-IN': 'hi', // Hindi
+  'hr-HR': 'hr', // Croatian
+  'hu-HU': 'hu', // Hungarian
+  'id-ID': 'id', // Indonesian
+  'it-IT': 'it', // Italian
+  'ja-JP': 'ja', // Japanese
+  'ko-KR': 'ko', // Korean
+  'ms-MY': 'ms', // Malay
+  'nl-NL': 'nl', // Dutch
+  'no-NO': 'no', // Norwegian
+  'pl-PL': 'pl', // Polish
+  'pt-BR': 'pt', // Portuguese
+  'pt-PT': 'pt', // Portuguese
+  'ro-RO': 'ro', // Romanian
+  'ru-RU': 'ru', // Russian
+  'sk-SK': 'sk', // Slovak
+  'sv-SE': 'sv', // Swedish
+  'th-TH': 'th', // Thai
+  'tl-PH': 'tl', // Tagalog
+  'tr-TR': 'tr', // Turkish
+  'uk-UA': 'uk', // Ukrainian
+  'vi-VN': 'vi', // Vietnamese
+  'zh-CN': 'zh-CN', // Chinese Simplified
+  'zh-TW': 'zh-TW', // Chinese Traditional
+};
+
+// Common English words that don't need translation
+const SKIP_WORDS = new Set([
+  'OK',
+  'Email',
+  'Google',
+  'Apple',
+  'Facebook',
+  'Premium',
+  'Pro',
+  'Plus',
+  'BPM',
+]);
+
+/**
+ * Parse TypeScript translation file and extract the object
+ */
+function parseTypeScriptFile(filePath) {
+  const content = fs.readFileSync(filePath, 'utf8');
+
+  // Extract the object from "export default { ... };"
+  const match = content.match(/export\s+default\s+(\{[\s\S]*\});?\s*$/);
+  if (!match) {
+    throw new Error(`Could not parse TypeScript file: ${filePath}`);
+  }
+
+  // Use eval to parse the object (safe since we control the files)
+  // Remove trailing semicolon if present
+  const objectStr = match[1].replace(/;$/, '');
+
+  try {
+    // eslint-disable-next-line no-eval
+    return eval(`(${objectStr})`);
+  } catch (error) {
+    throw new Error(`Failed to parse object in ${filePath}: ${error.message}`);
+  }
+}
+
+/**
+ * Generate TypeScript file content from object
+ */
+function generateTypeScriptContent(obj, langCode) {
+  const langName = getLangDisplayName(langCode);
+
+  function stringifyValue(value, indent = 2) {
+    if (typeof value === 'string') {
+      // Escape quotes and handle multiline
+      const escaped = value
+        .replace(/\\/g, '\\\\')
+        .replace(/"/g, '\\"')
+        .replace(/\n/g, '\\n');
+      return `"${escaped}"`;
+    }
+
+    if (Array.isArray(value)) {
+      if (value.length === 0) return '[]';
+      const items = value.map(v => stringifyValue(v, indent + 2));
+      return `[${items.join(', ')}]`;
+    }
+
+    if (typeof value === 'object' && value !== null) {
+      const spaces = ' '.repeat(indent);
+      const innerSpaces = ' '.repeat(indent + 2);
+      const entries = Object.entries(value)
+        .map(([k, v]) => {
+          const key = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(k) ? k : `"${k}"`;
+          return `${innerSpaces}${key}: ${stringifyValue(v, indent + 2)}`;
+        })
+        .join(',\n');
+      return `{\n${entries},\n${spaces}}`;
+    }
+
+    return String(value);
+  }
+
+  const objString = stringifyValue(obj, 0);
+
+  return `/**
+ * ${langName} Translations
+ * Auto-translated from en-US.ts
+ */
+
+export default ${objString};
+`;
+}
+
+/**
+ * Get display name for language code
+ */
+function getLangDisplayName(code) {
+  const names = {
+    'ar-SA': 'Arabic (Saudi Arabia)',
+    'bg-BG': 'Bulgarian',
+    'cs-CZ': 'Czech',
+    'da-DK': 'Danish',
+    'de-DE': 'German',
+    'el-GR': 'Greek',
+    'en-AU': 'English (Australia)',
+    'en-CA': 'English (Canada)',
+    'en-GB': 'English (UK)',
+    'en-US': 'English (US)',
+    'es-ES': 'Spanish (Spain)',
+    'es-MX': 'Spanish (Mexico)',
+    'fi-FI': 'Finnish',
+    'fr-CA': 'French (Canada)',
+    'fr-FR': 'French (France)',
+    'hi-IN': 'Hindi',
+    'hr-HR': 'Croatian',
+    'hu-HU': 'Hungarian',
+    'id-ID': 'Indonesian',
+    'it-IT': 'Italian',
+    'ja-JP': 'Japanese',
+    'ko-KR': 'Korean',
+    'ms-MY': 'Malay',
+    'nl-NL': 'Dutch',
+    'no-NO': 'Norwegian',
+    'pl-PL': 'Polish',
+    'pt-BR': 'Portuguese (Brazil)',
+    'pt-PT': 'Portuguese (Portugal)',
+    'ro-RO': 'Romanian',
+    'ru-RU': 'Russian',
+    'sk-SK': 'Slovak',
+    'sv-SE': 'Swedish',
+    'th-TH': 'Thai',
+    'tl-PH': 'Tagalog',
+    'tr-TR': 'Turkish',
+    'uk-UA': 'Ukrainian',
+    'vi-VN': 'Vietnamese',
+    'zh-CN': 'Chinese (Simplified)',
+    'zh-TW': 'Chinese (Traditional)',
+  };
+  return names[code] || code;
+}
+
+/**
+ * Simple Google Translate API call using free endpoint
+ */
+async function translateText(text, targetLang) {
+  return new Promise((resolve) => {
+    if (SKIP_WORDS.has(text)) {
+      resolve(text);
+      return;
+    }
+
+    const encodedText = encodeURIComponent(text);
+    const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=${targetLang}&dt=t&q=${encodedText}`;
+
+    https
+      .get(url, res => {
+        let data = '';
+        res.on('data', chunk => {
+          data += chunk;
+        });
+        res.on('end', () => {
+          try {
+            const parsed = JSON.parse(data);
+            const translated = parsed[0]
+              .map(item => item[0])
+              .join('')
+              .trim();
+            resolve(translated || text);
+          } catch (error) {
+            console.warn(`   ⚠️ Translation failed for "${text.substring(0, 30)}...": ${error.message}`);
+            resolve(text);
+          }
+        });
+      })
+      .on('error', err => {
+        console.warn(`   ⚠️ Network error: ${err.message}`);
+        resolve(text);
+      });
+  });
+}
+
+/**
+ * Add delay between API calls to avoid rate limiting
+ */
+function delay(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+/**
+ * Check if a value needs translation (is still in English)
+ */
+function needsTranslation(value, enValue) {
+  if (typeof value !== 'string') return false;
+  if (value === enValue) return true;
+  if (SKIP_WORDS.has(value)) return false;
+  return false;
+}
+
+/**
+ * Recursively translate object values
+ */
+async function translateObject(enObj, targetObj, targetLang, path = '', stats = { count: 0 }) {
+  for (const key in enObj) {
+    const currentPath = path ? `${path}.${key}` : key;
+    const enValue = enObj[key];
+    const targetValue = targetObj[key];
+
+    if (Array.isArray(enValue)) {
+      // Handle arrays
+      if (!Array.isArray(targetValue)) {
+        targetObj[key] = [];
+      }
+      for (let i = 0; i < enValue.length; i++) {
+        if (typeof enValue[i] === 'string') {
+          if (needsTranslation(targetObj[key][i], enValue[i])) {
+            console.log(`   🔄 ${currentPath}[${i}]: "${enValue[i].substring(0, 40)}..."`);
+            targetObj[key][i] = await translateText(enValue[i], targetLang);
+            stats.count++;
+            await delay(200);
+          }
+        }
+      }
+    } else if (typeof enValue === 'object' && enValue !== null) {
+      // Handle nested objects
+      if (!targetObj[key] || typeof targetObj[key] !== 'object') {
+        targetObj[key] = {};
+      }
+      await translateObject(enValue, targetObj[key], targetLang, currentPath, stats);
+    } else if (typeof enValue === 'string') {
+      // Handle string values
+      if (needsTranslation(targetValue, enValue)) {
+        // Skip placeholders like {{count}}
+        if (enValue.includes('{{') && enValue.includes('}}')) {
+          // Translate but preserve placeholders
+          console.log(`   🔄 ${currentPath}: "${enValue.substring(0, 40)}${enValue.length > 40 ? '...' : ''}"`);
+          targetObj[key] = await translateText(enValue, targetLang);
+          stats.count++;
+          await delay(200);
+        } else {
+          console.log(`   🔄 ${currentPath}: "${enValue.substring(0, 40)}${enValue.length > 40 ? '...' : ''}"`);
+          targetObj[key] = await translateText(enValue, targetLang);
+          stats.count++;
+          await delay(200);
+        }
+      }
+    }
+  }
+
+  return stats.count;
+}
+
+/**
+ * Translate a single language file
+ */
+async function translateLanguageFile(enUSPath, targetPath, langCode) {
+  const targetLang = LANGUAGE_MAP[langCode];
+
+  if (!targetLang) {
+    console.log(`   ⚠️ No language mapping for ${langCode}, skipping`);
+    return 0;
+  }
+
+  // Skip English variants
+  if (targetLang === 'en') {
+    console.log(`   ⏭️ Skipping English variant: ${langCode}`);
+    return 0;
+  }
+
+  const enUS = parseTypeScriptFile(enUSPath);
+  let target;
+
+  try {
+    target = parseTypeScriptFile(targetPath);
+  } catch {
+    // If target file doesn't exist or is invalid, start fresh
+    target = {};
+  }
+
+  const stats = { count: 0 };
+  await translateObject(enUS, target, targetLang, '', stats);
+
+  if (stats.count > 0) {
+    const content = generateTypeScriptContent(target, langCode);
+    fs.writeFileSync(targetPath, content);
+  }
+
+  return stats.count;
+}
+
+/**
+ * Main function
+ */
+async function main() {
+  const targetDir = process.argv[2] || 'src/domains/localization/infrastructure/locales';
+  const localesDir = path.resolve(process.cwd(), targetDir);
+
+  console.log('🚀 Starting automatic translation...\n');
+  console.log(`📂 Locales directory: ${localesDir}\n`);
+
+  if (!fs.existsSync(localesDir)) {
+    console.error(`❌ Locales directory not found: ${localesDir}`);
+    process.exit(1);
+  }
+
+  const enUSPath = path.join(localesDir, 'en-US.ts');
+  if (!fs.existsSync(enUSPath)) {
+    console.error(`❌ Base file not found: ${enUSPath}`);
+    process.exit(1);
+  }
+
+  // Find all language files
+  const files = fs.readdirSync(localesDir)
+    .filter(f => f.match(/^[a-z]{2}-[A-Z]{2}\.ts$/) && f !== 'en-US.ts')
+    .sort();
+
+  console.log(`📊 Languages to translate: ${files.length}`);
+  console.log('⚡ Running with 200ms delay between API calls\n');
+
+  let totalTranslated = 0;
+
+  for (const file of files) {
+    const langCode = file.replace('.ts', '');
+    const targetPath = path.join(localesDir, file);
+
+    console.log(`\n🌍 Translating ${langCode}...`);
+
+    const count = await translateLanguageFile(enUSPath, targetPath, langCode);
+    totalTranslated += count;
+
+    if (count > 0) {
+      console.log(`   ✅ Translated ${count} strings`);
+    } else {
+      console.log(`   ✓ Already complete`);
+    }
+  }
+
+  console.log(`\n✅ Translation completed!`);
+  console.log(`   Total strings translated: ${totalTranslated}`);
+  console.log(`\n📝 Next: Run 'node scripts/setup-languages.js' to update index.ts`);
+}
 
-// Placeholder for translation script
-console.log('🌍 [Localization] Translate Missing Script');
-console.log('Not implemented yet. This script would check for missing keys against en-US and auto-translate them.');
+main().catch(error => {
+  console.error('❌ Translation failed:', error);
+  process.exit(1);
+});

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');
-  });
-});