@umituz/react-native-localization 3.5.49 → 3.5.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-localization",
-  "version": "3.5.49",
+  "version": "3.5.51",
   "description": "Generic localization system for React Native apps with i18n support",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -31,7 +31,8 @@
     "i18next": ">=23.0.0",
     "react": ">=18.2.0",
     "react-i18next": ">=15.0.0",
-    "react-native": ">=0.74.0"
+    "react-native": ">=0.74.0",
+    "zustand": ">=4.0.0"
   },
   "devDependencies": {
     "@react-native-async-storage/async-storage": "~2.1.2",
@@ -42,7 +43,8 @@
     "react": "19.1.0",
     "react-i18next": "^15.2.0",
     "react-native": "0.81.5",
-    "typescript": "~5.9.2"
+    "typescript": "~5.9.2",
+    "zustand": "^4.5.0"
   },
   "publishConfig": {
     "access": "public"

package/src/infrastructure/components/LanguageSwitcher.styles.ts

@@ -0,0 +1,40 @@
+/**
+ * Language Switcher Component Styles
+ */
+
+import { StyleSheet } from 'react-native';
+
+const DEFAULT_CONFIG = {
+  defaultIconSize: 20,
+};
+
+export const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingHorizontal: 4,
+    paddingVertical: 4,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  flag: {
+    fontSize: DEFAULT_CONFIG.defaultIconSize,
+    textAlign: 'center',
+  },
+  languageName: {
+    fontSize: 14,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  icon: {
+    fontSize: DEFAULT_CONFIG.defaultIconSize,
+    textAlign: 'center',
+  },
+});
+
+export const DEFAULT_CONFIG_VALUES = {
+  hitSlop: { top: 10, bottom: 10, left: 10, right: 10 } as const,
+  activeOpacity: 0.7,
+};

package/src/infrastructure/components/LanguageSwitcher.tsx

@@ -4,8 +4,9 @@
  */
 
 import React, { useMemo } from 'react';
-import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+import { TouchableOpacity, Text } from 'react-native';
 import { useLanguageSwitcher } from './useLanguageSwitcher';
+import { styles, DEFAULT_CONFIG_VALUES } from './LanguageSwitcher.styles';
 
 export interface LanguageSwitcherProps {
   showName?: boolean;
@@ -20,10 +21,39 @@ export interface LanguageSwitcherProps {
   accessibilityLabel?: string;
 }
 
-const DEFAULT_CONFIG = {
-  defaultIconSize: 20,
-  hitSlop: { top: 10, bottom: 10, left: 10, right: 10 } as const,
-  activeOpacity: 0.7,
+const renderContent = (
+  showFlag: boolean,
+  showName: boolean,
+  flag: string | undefined,
+  nativeName: string,
+  color: string | undefined,
+  iconStyle: any,
+  textStyle: any
+) => {
+  if (showFlag && showName) {
+    return (
+      <>
+        <Text style={[styles.flag, iconStyle]}>{flag}</Text>
+        <Text style={[styles.languageName, { color }, textStyle]}>
+          {nativeName}
+        </Text>
+      </>
+    );
+  }
+
+  if (showFlag) {
+    return <Text style={[styles.flag, iconStyle]}>{flag}</Text>;
+  }
+
+  if (showName) {
+    return (
+      <Text style={[styles.languageName, { color }, textStyle]}>
+        {nativeName}
+      </Text>
+    );
+  }
+
+  return <Text style={[styles.icon, { color }, iconStyle]}>🌐</Text>;
 };
 
 export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
@@ -40,8 +70,6 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
 }) => {
   const { currentLang, handlePress } = useLanguageSwitcher({ onPress, disabled });
 
-  const iconColor = color;
-
   const accessibilityProps = useMemo(() => ({
     accessibilityRole: 'button' as const,
     accessibilityLabel: accessibilityLabel || `Current language: ${currentLang.nativeName}`,
@@ -49,72 +77,19 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
     accessible: true,
   }), [accessibilityLabel, currentLang.nativeName, disabled]);
 
-  const renderContent = () => {
-    if (showFlag && showName) {
-      return (
-        <>
-          <Text style={[styles.flag, iconStyle]}>{currentLang.flag}</Text>
-          <Text style={[styles.languageName, { color: iconColor }, textStyle]}>
-            {currentLang.nativeName}
-          </Text>
-        </>
-      );
-    }
-
-    if (showFlag) {
-      return <Text style={[styles.flag, iconStyle]}>{currentLang.flag}</Text>;
-    }
-
-    if (showName) {
-      return (
-        <Text style={[styles.languageName, { color: iconColor }, textStyle]}>
-          {currentLang.nativeName}
-        </Text>
-      );
-    }
-
-    return <Text style={[styles.icon, { color: iconColor }, iconStyle]}>🌐</Text>;
-  };
-
   return (
     <TouchableOpacity
       style={[styles.container, style, disabled && styles.disabled]}
       onPress={handlePress}
-      activeOpacity={disabled ? 1 : DEFAULT_CONFIG.activeOpacity}
-      hitSlop={DEFAULT_CONFIG.hitSlop}
+      activeOpacity={disabled ? 1 : DEFAULT_CONFIG_VALUES.activeOpacity}
+      hitSlop={DEFAULT_CONFIG_VALUES.hitSlop}
       testID={testID}
       disabled={disabled}
       {...accessibilityProps}
     >
-      {renderContent()}
+      {renderContent(showFlag, showName, currentLang.flag, currentLang.nativeName, color, iconStyle, textStyle)}
     </TouchableOpacity>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    paddingHorizontal: 4,
-    paddingVertical: 4,
-  },
-  disabled: {
-    opacity: 0.5,
-  },
-  flag: {
-    fontSize: DEFAULT_CONFIG.defaultIconSize,
-    textAlign: 'center',
-  },
-  languageName: {
-    fontSize: 14,
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-  icon: {
-    fontSize: DEFAULT_CONFIG.defaultIconSize,
-    textAlign: 'center',
-  },
-});
-
 export default LanguageSwitcher;

package/src/infrastructure/components/__tests__/LanguageSwitcher.test.tsx

@@ -24,8 +24,8 @@ jest.mock('../../hooks/useLocalization', () => ({
   }),
 }));
 
-jest.mock('../../config/languagesData', () => ({
-  languageRegistry: {
+jest.mock('../../repository/LanguageRepository', () => ({
+  languageRepository: {
     getLanguageByCode: jest.fn(() => ({
       code: 'en-US',
       name: 'English',

package/src/infrastructure/components/useLanguageNavigation.ts

@@ -1,13 +1,13 @@
 // @ts-ignore - Optional peer dependency
 import { useNavigation } from '@react-navigation/native';
 import { useLocalization } from '../hooks/useLocalization';
-import { languageRegistry } from '../config/languagesData';
+import { languageRepository } from '../repository/LanguageRepository';
 
 
 export const useLanguageNavigation = (navigationScreen: string) => {
   const navigation = useNavigation();
   const { currentLanguage } = useLocalization();
-  const currentLang = languageRegistry.getLanguageByCode(currentLanguage) || languageRegistry.getDefaultLanguage();
+  const currentLang = languageRepository.getLanguageByCode(currentLanguage) || languageRepository.getDefaultLanguage();
 
   const navigateToLanguageSelection = () => {
     if (navigation && navigationScreen) {

package/src/infrastructure/components/useLanguageSwitcher.ts

@@ -5,8 +5,8 @@
 
 import { useMemo, useCallback } from 'react';
 import { useLocalization } from '../hooks/useLocalization';
-import { languageRegistry } from '../config/languagesData';
-import type { Language } from '../storage/types/LocalizationState';
+import { languageRepository } from '../repository/LanguageRepository';
+import type { Language } from '../storage/types/Language';
 
 export interface UseLanguageSwitcherProps {
     onPress?: () => void;
@@ -17,7 +17,7 @@ export const useLanguageSwitcher = ({ onPress, disabled }: UseLanguageSwitcherPr
     const { currentLanguage } = useLocalization();
 
     const currentLang = useMemo((): Language => {
-        return languageRegistry.getLanguageByCode(currentLanguage) || languageRegistry.getDefaultLanguage();
+        return languageRepository.getLanguageByCode(currentLanguage) || languageRepository.getDefaultLanguage();
     }, [currentLanguage]);
 
     const handlePress = useCallback(() => {

package/src/infrastructure/config/DeviceLocale.ts

@@ -5,7 +5,7 @@
 
 import * as Localization from 'expo-localization';
 import { LOCALE_MAPPING } from './LocaleMapping';
-import { languageRegistry } from './languagesData';
+import { languageRepository } from '../repository/LanguageRepository';
 
 export const DEFAULT_LANGUAGE = 'en-US';
 
@@ -36,7 +36,7 @@ export const getDeviceLocale = (): string => {
         }
 
         // Check if directly supported
-        if (languageRegistry.isLanguageSupported(deviceLocale)) {
+        if (languageRepository.isLanguageSupported(deviceLocale)) {
             return deviceLocale;
         }
 

package/src/infrastructure/config/LanguageQuery.ts

@@ -3,31 +3,31 @@
  * Provides functions to query and search languages
  */
 
-import { languageRegistry } from './languagesData';
-import type { Language } from '../storage/types/LocalizationState';
+import { languageRepository } from '../repository/LanguageRepository';
+import type { Language } from '../storage/types/Language';
 
-export const getSupportedLanguages = () => languageRegistry.getLanguages();
+export const getSupportedLanguages = () => languageRepository.getLanguages();
 
 export const getLanguageByCode = (code: string): Language | undefined => {
-    return languageRegistry.getLanguageByCode(code);
+    return languageRepository.getLanguageByCode(code);
 };
 
 export const isLanguageSupported = (code: string): boolean => {
-    return languageRegistry.isLanguageSupported(code);
+    return languageRepository.isLanguageSupported(code);
 };
 
 export const getDefaultLanguage = (): Language => {
-    const langs = languageRegistry.getLanguages();
+    const langs = languageRepository.getLanguages();
     const firstLang = langs[0];
     if (firstLang) return firstLang;
 
-    // Final fallback to system defaults if registry is empty
-    return languageRegistry.getDefaultLanguage();
+    // Final fallback to system defaults if repository is empty
+    return languageRepository.getDefaultLanguage();
 };
 
 export const searchLanguages = (query: string): Language[] => {
     const lowerQuery = query.toLowerCase();
-    return languageRegistry.getLanguages().filter(
+    return languageRepository.getLanguages().filter(
         (lang) =>
             lang.name.toLowerCase().includes(lowerQuery) ||
             lang.nativeName.toLowerCase().includes(lowerQuery)

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

@@ -1,48 +1,48 @@
 /**
- * Simple tests for language registry
+ * Simple tests for language repository
  */
 
-import { languageRegistry } from '../../config/languagesData';
+import { languageRepository } from '../../repository/LanguageRepository';
 
-describe('LanguageRegistry', () => {
+describe('LanguageRepository', () => {
   beforeEach(() => {
-    languageRegistry.clearLanguages();
+    languageRepository.clearLanguages();
   });
 
   it('should get default language', () => {
-    const defaultLang = languageRegistry.getDefaultLanguage();
+    const defaultLang = languageRepository.getDefaultLanguage();
     expect(defaultLang).toBeDefined();
     expect(defaultLang.code).toBe('en-US');
   });
 
   it('should check if language is supported', () => {
-    const supported = languageRegistry.isLanguageSupported('en-US');
+    const supported = languageRepository.isLanguageSupported('en-US');
     expect(supported).toBe(true);
   });
 
   it('should check if language is not supported', () => {
-    const supported = languageRegistry.isLanguageSupported('unknown');
+    const supported = languageRepository.isLanguageSupported('unknown');
     expect(supported).toBe(false);
   });
 
   it('should get language by code', () => {
-    const language = languageRegistry.getLanguageByCode('en-US');
+    const language = languageRepository.getLanguageByCode('en-US');
     expect(language).toBeDefined();
     expect(language?.code).toBe('en-US');
   });
 
   it('should return undefined for unknown code', () => {
-    const language = languageRegistry.getLanguageByCode('unknown');
+    const language = languageRepository.getLanguageByCode('unknown');
     expect(language).toBeUndefined();
   });
 
   it('should search languages', () => {
-    const results = languageRegistry.searchLanguages('english');
+    const results = languageRepository.searchLanguages('english');
     expect(Array.isArray(results)).toBe(true);
   });
 
   it('should get supported languages', () => {
-    const languages = languageRegistry.getLanguages();
+    const languages = languageRepository.getLanguages();
     expect(Array.isArray(languages)).toBe(true);
     expect(languages.length).toBeGreaterThan(0);
     // Should now support many languages (29+)
@@ -50,19 +50,19 @@ describe('LanguageRegistry', () => {
   });
 
   it('should support newly added languages', () => {
-    expect(languageRegistry.isLanguageSupported('cs-CZ')).toBe(true);
-    expect(languageRegistry.isLanguageSupported('pt-BR')).toBe(true);
-    expect(languageRegistry.isLanguageSupported('zh-TW')).toBe(true);
-    expect(languageRegistry.isLanguageSupported('el-GR')).toBe(true);
+    expect(languageRepository.isLanguageSupported('cs-CZ')).toBe(true);
+    expect(languageRepository.isLanguageSupported('pt-BR')).toBe(true);
+    expect(languageRepository.isLanguageSupported('zh-TW')).toBe(true);
+    expect(languageRepository.isLanguageSupported('el-GR')).toBe(true);
   });
 
   it('should find language attributes correctly', () => {
-    const czech = languageRegistry.getLanguageByCode('cs-CZ');
+    const czech = languageRepository.getLanguageByCode('cs-CZ');
     expect(czech).toBeDefined();
     expect(czech?.name).toBe('Czech');
     expect(czech?.flag).toBe('🇨🇿');
 
-    const brazil = languageRegistry.getLanguageByCode('pt-BR');
+    const brazil = languageRepository.getLanguageByCode('pt-BR');
     expect(brazil).toBeDefined();
     expect(brazil?.name).toBe('Portuguese (Brazil)');
   });

package/src/infrastructure/config/constants/defaultLanguages.ts

@@ -0,0 +1,43 @@
+/**
+ * Default Languages Configuration
+ * Applications can override this by providing their own language list
+ */
+
+import type { Language } from '../../storage/types/Language';
+
+export const DEFAULT_LANGUAGES: Language[] = [
+  { code: 'ar-SA', name: 'Arabic', nativeName: 'العربية', flag: '🇸🇦', isRTL: true },
+  { code: 'bg-BG', name: 'Bulgarian', nativeName: 'Български', flag: '🇧🇬', isRTL: false },
+  { code: 'cs-CZ', name: 'Czech', nativeName: 'Čeština', flag: '🇨🇿', isRTL: false },
+  { code: 'da-DK', name: 'Danish', nativeName: 'Dansk', flag: '🇩🇰', isRTL: false },
+  { code: 'de-DE', name: 'German', nativeName: 'Deutsch', flag: '🇩🇪', isRTL: false },
+  { code: 'el-GR', name: 'Greek', nativeName: 'Ελληνικά', flag: '🇬🇷', isRTL: false },
+  { code: 'en-US', name: 'English', nativeName: 'English', flag: '🇺🇸', isRTL: false },
+  { code: 'es-ES', name: 'Spanish', nativeName: 'Español', flag: '🇪🇸', isRTL: false },
+  { code: 'fi-FI', name: 'Finnish', nativeName: 'Suomi', flag: '🇫🇮', isRTL: false },
+  { code: 'fr-FR', name: 'French', nativeName: 'Français', flag: '🇫🇷', isRTL: false },
+  { code: 'hi-IN', name: 'Hindi', nativeName: 'हिन्दी', flag: '🇮🇳', isRTL: false },
+  { code: 'hr-HR', name: 'Croatian', nativeName: 'Hrvatski', flag: '🇭🇷', isRTL: false },
+  { code: 'hu-HU', name: 'Hungarian', nativeName: 'Magyar', flag: '🇭🇺', isRTL: false },
+  { code: 'id-ID', name: 'Indonesian', nativeName: 'Bahasa Indonesia', flag: '🇮', isRTL: false },
+  { code: 'it-IT', name: 'Italian', nativeName: 'Italiano', flag: '🇮🇹', isRTL: false },
+  { code: 'ja-JP', name: 'Japanese', nativeName: '日本語', flag: '🇯🇵', isRTL: false },
+  { code: 'ko-KR', name: 'Korean', nativeName: '한국어', flag: '🇰🇷', isRTL: false },
+  { code: 'ms-MY', name: 'Malay', nativeName: 'Bahasa Melayu', flag: '🇲🇾', isRTL: false },
+  { code: 'nl-NL', name: 'Dutch', nativeName: 'Nederlands', flag: '🇳🇱', isRTL: false },
+  { code: 'no-NO', name: 'Norwegian', nativeName: 'Norsk', flag: '🇳🇴', isRTL: false },
+  { code: 'pl-PL', name: 'Polish', nativeName: 'Polski', flag: '🇵🇱', isRTL: false },
+  { code: 'pt-BR', name: 'Portuguese (Brazil)', nativeName: 'Português (Brasil)', flag: '🇧🇷', isRTL: false },
+  { code: 'pt-PT', name: 'Portuguese', nativeName: 'Português', flag: '🇵🇹', isRTL: false },
+  { code: 'ro-RO', name: 'Romanian', nativeName: 'Română', flag: '🇷🇴', isRTL: false },
+  { code: 'ru-RU', name: 'Russian', nativeName: 'Русский', flag: '🇷🇺', isRTL: false },
+  { code: 'sk-SK', name: 'Slovak', nativeName: 'Slovenčina', flag: '🇸🇰', isRTL: false },
+  { code: 'sv-SE', name: 'Swedish', nativeName: 'Svenska', flag: '🇸🇪', isRTL: false },
+  { code: 'th-TH', name: 'Thai', nativeName: 'ไทย', flag: '🇹🇭', isRTL: false },
+  { code: 'tl-PH', name: 'Filipino', nativeName: 'Filipino', flag: '🇵🇭', isRTL: false },
+  { code: 'tr-TR', name: 'Turkish', nativeName: 'Türkçe', flag: '🇹🇷', isRTL: false },
+  { code: 'uk-UA', name: 'Ukrainian', nativeName: 'Українська', flag: '🇺🇦', isRTL: false },
+  { code: 'vi-VN', name: 'Vietnamese', nativeName: 'Tiếng Việt', flag: '🇻🇳', isRTL: false },
+  { code: 'zh-CN', name: 'Chinese (Simplified)', nativeName: '简体中文', flag: '🇨🇳', isRTL: false },
+  { code: 'zh-TW', name: 'Chinese (Traditional)', nativeName: '繁體中文', flag: '🇹🇼', isRTL: false },
+];

package/src/infrastructure/config/languages.ts

@@ -3,8 +3,8 @@
  * Central export point for all language-related functionality
  */
 
-import { languageRegistry } from './languagesData';
-import type { Language } from '../storage/types/LocalizationState';
+import { languageRepository } from '../repository/LanguageRepository';
+import type { Language } from '../storage/types/Language';
 
 // Re-export from DeviceLocale
 export { DEFAULT_LANGUAGE, getDeviceLocale } from './DeviceLocale';
@@ -22,7 +22,7 @@ export {
 export { LOCALE_MAPPING } from './LocaleMapping';
 
 // Backward compatibility
-export const getSUPPORTED_LANGUAGES = () => languageRegistry.getLanguages();
-export const getLANGUAGES = () => languageRegistry.getLanguages();
-export const SUPPORTED_LANGUAGES: Language[] = languageRegistry.getLanguages();
+export const getSUPPORTED_LANGUAGES = () => languageRepository.getLanguages();
+export const getLANGUAGES = () => languageRepository.getLanguages();
+export const SUPPORTED_LANGUAGES: Language[] = languageRepository.getLanguages();
 export const LANGUAGES = SUPPORTED_LANGUAGES;

package/src/infrastructure/config/languagesData.ts

@@ -1,145 +1,26 @@
 /**
- * Language Configuration
- * Generic language interface and utilities for localization packages
- * This is a base configuration that can be extended by consuming applications
+ * Language Data Exports
+ * Centralized exports for language management
  */
 
-export interface Language {
-  code: string;
-  name: string;
-  nativeName: string;
-  flag?: string;
-  isRTL?: boolean;
-}
+import { languageRepository } from '../repository/LanguageRepository';
+import { DEFAULT_LANGUAGES } from './constants/defaultLanguages';
+import type { Language } from '../storage/types/Language';
 
-/**
- * Default language configuration
- * Applications can override this by providing their own language list
- */
-export const DEFAULT_LANGUAGES: Language[] = [
-  { code: 'ar-SA', name: 'Arabic', nativeName: 'العربية', flag: '🇸🇦', isRTL: true },
-  { code: 'bg-BG', name: 'Bulgarian', nativeName: 'Български', flag: '🇧🇬', isRTL: false },
-  { code: 'cs-CZ', name: 'Czech', nativeName: 'Čeština', flag: '🇨🇿', isRTL: false },
-  { code: 'da-DK', name: 'Danish', nativeName: 'Dansk', flag: '🇩🇰', isRTL: false },
-  { code: 'de-DE', name: 'German', nativeName: 'Deutsch', flag: '🇩🇪', isRTL: false },
-  { code: 'el-GR', name: 'Greek', nativeName: 'Ελληνικά', flag: '🇬🇷', isRTL: false },
-  { code: 'en-US', name: 'English', nativeName: 'English', flag: '🇺🇸', isRTL: false },
-  { code: 'es-ES', name: 'Spanish', nativeName: 'Español', flag: '🇪🇸', isRTL: false },
-  { code: 'fi-FI', name: 'Finnish', nativeName: 'Suomi', flag: '🇫🇮', isRTL: false },
-  { code: 'fr-FR', name: 'French', nativeName: 'Français', flag: '🇫🇷', isRTL: false },
-  { code: 'hi-IN', name: 'Hindi', nativeName: 'हिन्दी', flag: '🇮🇳', isRTL: false },
-  { code: 'hr-HR', name: 'Croatian', nativeName: 'Hrvatski', flag: '🇭🇷', isRTL: false },
-  { code: 'hu-HU', name: 'Hungarian', nativeName: 'Magyar', flag: '🇭🇺', isRTL: false },
-  { code: 'id-ID', name: 'Indonesian', nativeName: 'Bahasa Indonesia', flag: '🇮', isRTL: false },
-  { code: 'it-IT', name: 'Italian', nativeName: 'Italiano', flag: '🇮🇹', isRTL: false },
-  { code: 'ja-JP', name: 'Japanese', nativeName: '日本語', flag: '🇯🇵', isRTL: false },
-  { code: 'ko-KR', name: 'Korean', nativeName: '한국어', flag: '🇰🇷', isRTL: false },
-  { code: 'ms-MY', name: 'Malay', nativeName: 'Bahasa Melayu', flag: '🇲🇾', isRTL: false },
-  { code: 'nl-NL', name: 'Dutch', nativeName: 'Nederlands', flag: '🇳🇱', isRTL: false },
-  { code: 'no-NO', name: 'Norwegian', nativeName: 'Norsk', flag: '🇳🇴', isRTL: false },
-  { code: 'pl-PL', name: 'Polish', nativeName: 'Polski', flag: '🇵🇱', isRTL: false },
-  { code: 'pt-BR', name: 'Portuguese (Brazil)', nativeName: 'Português (Brasil)', flag: '🇧🇷', isRTL: false },
-  { code: 'pt-PT', name: 'Portuguese', nativeName: 'Português', flag: '🇵🇹', isRTL: false },
-  { code: 'ro-RO', name: 'Romanian', nativeName: 'Română', flag: '🇷🇴', isRTL: false },
-  { code: 'ru-RU', name: 'Russian', nativeName: 'Русский', flag: '🇷🇺', isRTL: false },
-  { code: 'sk-SK', name: 'Slovak', nativeName: 'Slovenčina', flag: '🇸🇰', isRTL: false },
-  { code: 'sv-SE', name: 'Swedish', nativeName: 'Svenska', flag: '🇸🇪', isRTL: false },
-  { code: 'th-TH', name: 'Thai', nativeName: 'ไทย', flag: '🇹🇭', isRTL: false },
-  { code: 'tl-PH', name: 'Filipino', nativeName: 'Filipino', flag: '🇵🇭', isRTL: false },
-  { code: 'tr-TR', name: 'Turkish', nativeName: 'Türkçe', flag: '🇹🇷', isRTL: false },
-  { code: 'uk-UA', name: 'Ukrainian', nativeName: 'Українська', flag: '🇺🇦', isRTL: false },
-  { code: 'vi-VN', name: 'Vietnamese', nativeName: 'Tiếng Việt', flag: '🇻🇳', isRTL: false },
-  { code: 'zh-CN', name: 'Chinese (Simplified)', nativeName: '简体中文', flag: '🇨🇳', isRTL: false },
-  { code: 'zh-TW', name: 'Chinese (Traditional)', nativeName: '繁體中文', flag: '🇹🇼', isRTL: false },
-];
-
-/**
- * Language registry for dynamic language management
- */
-class LanguageRegistry {
-  private languages: Language[] = [...DEFAULT_LANGUAGES];
-
-  /**
-   * Register new languages
-   */
-  registerLanguages(languages: Language[]): void {
-    this.languages = [...this.languages, ...languages];
-  }
-
-  /**
-   * Get all registered languages
-   */
-  getLanguages(): Language[] {
-    return [...this.languages];
-  }
-
-  /**
-   * Clear all languages (reset to default)
-   */
-  clearLanguages(): void {
-    this.languages = [...DEFAULT_LANGUAGES];
-  }
-
-  /**
-   * Get language by code
-   */
-  getLanguageByCode(code: string): Language | undefined {
-    return this.languages.find(lang => lang.code === code);
-  }
-
-  /**
-   * Search languages by name or native name
-   */
-  searchLanguages(query: string): Language[] {
-    const lowerQuery = query.toLowerCase();
-    return this.languages.filter(
-      lang =>
-        lang.name.toLowerCase().includes(lowerQuery) ||
-        lang.nativeName.toLowerCase().includes(lowerQuery)
-    );
-  }
-
-  /**
-   * Check if language is supported
-   */
-  isLanguageSupported(code: string): boolean {
-    return this.languages.some(lang => lang.code === code);
-  }
-
-  /**
-   * Get default language
-   * Prioritizes en-US, otherwise returns first available
-   */
-  getDefaultLanguage(): Language {
-    const en = this.languages.find(l => l.code === 'en-US');
-    if (en) return en;
-    const first = this.languages[0];
-    if (first) return first;
-    const systemDefault = DEFAULT_LANGUAGES[0];
-    if (systemDefault) return systemDefault;
-    throw new Error('No languages registered in registry or defaults');
-  }
-}
-
-// Singleton instance
-export const languageRegistry = new LanguageRegistry();
+export { languageRepository };
+export { DEFAULT_LANGUAGES };
+export type { Language };
 
-// Export convenience functions that delegate to registry
-export const getLanguageByCode = (code: string): Language | undefined => {
-  return languageRegistry.getLanguageByCode(code);
-};
+export const getLanguageByCode = (code: string) =>
+  languageRepository.getLanguageByCode(code);
 
-export const searchLanguages = (query: string): Language[] => {
-  return languageRegistry.searchLanguages(query);
-};
+export const searchLanguages = (query: string) =>
+  languageRepository.searchLanguages(query);
 
-export const isLanguageSupported = (code: string): boolean => {
-  return languageRegistry.isLanguageSupported(code);
-};
+export const isLanguageSupported = (code: string) =>
+  languageRepository.isLanguageSupported(code);
 
-export const getDefaultLanguage = (): Language => {
-  return languageRegistry.getDefaultLanguage();
-};
+export const getDefaultLanguage = () =>
+  languageRepository.getDefaultLanguage();
 
-// Legacy exports for backward compatibility
-export const LANGUAGES = languageRegistry.getLanguages();
+export const LANGUAGES = languageRepository.getLanguages();

package/src/infrastructure/repository/LanguageRepository.ts

@@ -0,0 +1,53 @@
+/**
+ * Language Repository
+ * Manages language data with repository pattern
+ * Provides dynamic language management for multiple applications
+ */
+
+import type { Language } from '../storage/types/Language';
+import { DEFAULT_LANGUAGES } from '../config/constants/defaultLanguages';
+
+class LanguageRepository {
+  private languages: Language[] = [...DEFAULT_LANGUAGES];
+
+  registerLanguages(languages: Language[]): void {
+    this.languages = [...this.languages, ...languages];
+  }
+
+  getLanguages(): Language[] {
+    return [...this.languages];
+  }
+
+  clearLanguages(): void {
+    this.languages = [...DEFAULT_LANGUAGES];
+  }
+
+  getLanguageByCode(code: string): Language | undefined {
+    return this.languages.find(lang => lang.code === code);
+  }
+
+  searchLanguages(query: string): Language[] {
+    const lowerQuery = query.toLowerCase();
+    return this.languages.filter(
+      lang =>
+        lang.name.toLowerCase().includes(lowerQuery) ||
+        lang.nativeName.toLowerCase().includes(lowerQuery)
+    );
+  }
+
+  isLanguageSupported(code: string): boolean {
+    return this.languages.some(lang => lang.code === code);
+  }
+
+  getDefaultLanguage(): Language {
+    const en = this.languages.find(l => l.code === 'en-US');
+    if (en) return en;
+    const first = this.languages[0];
+    if (first) return first;
+    const systemDefault = DEFAULT_LANGUAGES[0];
+    if (systemDefault) return systemDefault;
+    throw new Error('No languages registered in repository or defaults');
+  }
+}
+
+export const languageRepository = new LanguageRepository();

package/src/infrastructure/storage/LanguageInitializer.ts

@@ -9,7 +9,7 @@
 
 import { storageRepository } from '@umituz/react-native-storage';
 import i18n from '../config/i18n';
-import { languageRegistry } from '../config/languagesData';
+import { languageRepository } from '../repository/LanguageRepository';
 import { getDeviceLocale } from '../config/languages';
 
 const LANGUAGE_STORAGE_KEY = '@localization:language';
@@ -49,9 +49,9 @@ export class LanguageInitializer {
     languageCode: string;
     isRTL: boolean;
   }> {
-    const language = languageRegistry.getLanguageByCode(languageCode);
+    const language = languageRepository.getLanguageByCode(languageCode);
     const finalLanguageCode = language ? languageCode : 'en-US';
-    const finalLanguageObj = languageRegistry.getLanguageByCode(finalLanguageCode);
+    const finalLanguageObj = languageRepository.getLanguageByCode(finalLanguageCode);
 
     await i18n.changeLanguage(finalLanguageCode);
 

package/src/infrastructure/storage/LanguageSwitcher.ts

@@ -8,7 +8,7 @@
 
 import { storageRepository } from '@umituz/react-native-storage';
 import i18n from '../config/i18n';
-import { languageRegistry } from '../config/languagesData';
+import { languageRepository } from '../repository/LanguageRepository';
 
 const LANGUAGE_STORAGE_KEY = '@localization:language';
 
@@ -20,7 +20,7 @@ export class LanguageSwitcher {
     languageCode: string;
     isRTL: boolean;
   }> {
-    const language = languageRegistry.getLanguageByCode(languageCode);
+    const language = languageRepository.getLanguageByCode(languageCode);
 
     await i18n.changeLanguage(languageCode);
     await storageRepository.setString(LANGUAGE_STORAGE_KEY, languageCode);

package/src/infrastructure/storage/LocalizationStore.ts

@@ -3,85 +3,73 @@
  * Creates and manages localization state with proper separation of concerns
  */
 
-import { createStore } from '@umituz/react-native-storage';
+import { create } from 'zustand';
 import type { LocalizationState, LocalizationActions, LocalizationGetters } from './types/LocalizationState';
 import { LanguageInitializer } from './LanguageInitializer';
 import { LanguageSwitcher } from './LanguageSwitcher';
-import { languageRegistry } from '../config/languagesData';
+import { languageRepository } from '../repository/LanguageRepository';
 
-type LocalizationStoreActions = LocalizationActions & LocalizationGetters;
+type LocalizationStoreType = LocalizationState & LocalizationActions & LocalizationGetters;
 
-const initialLocalizationState: LocalizationState = {
+export const useLocalizationStore = create<LocalizationStoreType>((set, get) => ({
+  // State
   currentLanguage: 'en-US',
   isRTL: false,
   isInitialized: false,
-  supportedLanguages: languageRegistry.getLanguages(),
-};
+  supportedLanguages: languageRepository.getLanguages(),
 
-// Create singleton instance
-export const useLocalizationStore = createStore<LocalizationState, LocalizationStoreActions>({
-  name: 'localization-store',
-  initialState: initialLocalizationState,
-  persist: false,
-  actions: (set, get) => ({
-    // Actions
-    initialize: async () => {
-      const { isInitialized: alreadyInitialized } = get();
-      if (alreadyInitialized) {
-        return;
-      }
+  // Actions
+  initialize: async () => {
+    const { isInitialized: alreadyInitialized } = get();
+    if (alreadyInitialized) {
+      return;
+    }
 
-      try {
-        const result = await LanguageInitializer.initialize();
-
-        set({
-          currentLanguage: result.languageCode,
-          isRTL: result.isRTL,
-          isInitialized: true,
-        });
-      } catch {
-        set({
-          currentLanguage: 'en-US',
-          isRTL: false,
-          isInitialized: true,
-        });
-      }
-    },
-
-    setLanguage: async (languageCode: string) => {
-      const result = await LanguageSwitcher.switchLanguage(languageCode);
+    try {
+      const result = await LanguageInitializer.initialize();
 
       set({
         currentLanguage: result.languageCode,
         isRTL: result.isRTL,
+        isInitialized: true,
       });
-    },
-
-    reset: () => {
+    } catch {
       set({
         currentLanguage: 'en-US',
         isRTL: false,
-        isInitialized: false,
+        isInitialized: true,
       });
-    },
+    }
+  },
 
-    // Getters
-    getCurrentLanguage: () => {
-      const { currentLanguage } = get();
-      return languageRegistry.getLanguageByCode(currentLanguage);
-    },
+  setLanguage: async (languageCode: string) => {
+    const result = await LanguageSwitcher.switchLanguage(languageCode);
 
-    isLanguageSupported: (code: string) => {
-      return languageRegistry.isLanguageSupported(code);
-    },
+    set({
+      currentLanguage: result.languageCode,
+      isRTL: result.isRTL,
+    });
+  },
 
-    getSupportedLanguages: () => {
-      return languageRegistry.getLanguages();
-    },
-  }),
-});
+  reset: () => {
+    set({
+      currentLanguage: 'en-US',
+      isRTL: false,
+      isInitialized: false,
+    });
+  },
 
-/**
- * @deprecated Use useLocalizationStore directly
- */
-export const createLocalizationStore = () => useLocalizationStore;
+  // Getters
+  getCurrentLanguage: () => {
+    const { currentLanguage } = get();
+    return languageRepository.getLanguageByCode(currentLanguage);
+  },
+
+  isLanguageSupported: (code: string) => {
+    return languageRepository.isLanguageSupported(code);
+  },
+
+  getSupportedLanguages: () => {
+    return languageRepository.getLanguages();
+  },
+}));

package/src/infrastructure/storage/types/Language.ts

@@ -0,0 +1,13 @@
+/**
+ * Language Type
+ * Generic language interface for localization packages
+ * This is a base configuration that can be extended by consuming applications
+ */
+
+export interface Language {
+  code: string;
+  name: string;
+  nativeName: string;
+  flag?: string;
+  isRTL?: boolean;
+}

package/src/infrastructure/storage/types/LocalizationState.ts

@@ -3,13 +3,9 @@
  * Defines the shape of localization state management
  */
 
-export interface Language {
-  code: string;
-  name: string;
-  nativeName: string;
-  flag?: string;
-  isRTL?: boolean;
-}
+import type { Language } from './Language';
+
+export type { Language };
 
 export interface LocalizationState {
   currentLanguage: string;

package/src/presentation/components/LanguageItem.styles.ts

@@ -0,0 +1,44 @@
+/**
+ * Language Item Component Styles
+ */
+
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  languageItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    marginBottom: 8,
+  },
+  selectedLanguageItem: {
+    borderWidth: 2,
+  },
+  languageContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  flag: {
+    fontSize: 24,
+    marginRight: 16,
+  },
+  languageText: {
+    flex: 1,
+  },
+  nativeName: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 2,
+  },
+  languageName: {
+    fontSize: 14,
+  },
+  checkIcon: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+});

package/src/presentation/components/LanguageItem.tsx

@@ -17,7 +17,8 @@ import {
 } from 'react-native';
 // @ts-ignore - Optional peer dependency
 import { useAppDesignTokens } from '@umituz/react-native-design-system';
-import type { Language } from '../../infrastructure/storage/types/LocalizationState';
+import type { Language } from '../../infrastructure/storage/types/Language';
+import { styles } from './LanguageItem.styles';
 
 interface LanguageItemProps {
   item: Language;
@@ -91,42 +92,3 @@ export const LanguageItem: React.FC<LanguageItemProps> = ({
     </TouchableOpacity>
   );
 };
-
-const styles = StyleSheet.create({
-  languageItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: 16,
-    borderRadius: 12,
-    borderWidth: 1,
-    marginBottom: 8,
-  },
-  selectedLanguageItem: {
-    borderWidth: 2,
-  },
-  languageContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-  },
-  flag: {
-    fontSize: 24,
-    marginRight: 16,
-  },
-  languageText: {
-    flex: 1,
-  },
-  nativeName: {
-    fontSize: 16,
-    fontWeight: '600',
-    marginBottom: 2,
-  },
-  languageName: {
-    fontSize: 14,
-  },
-  checkIcon: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
-});

package/src/presentation/components/SearchInput.styles.ts

@@ -0,0 +1,34 @@
+/**
+ * Search Input Component Styles
+ */
+
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  searchContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: 20,
+    marginBottom: 24,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  searchIcon: {
+    marginRight: 12,
+    fontSize: 16,
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: 16,
+    padding: 0,
+    fontWeight: '500',
+  },
+  clearButton: {
+    padding: 4,
+  },
+  clearIcon: {
+    fontSize: 14,
+  },
+});

package/src/presentation/components/SearchInput.tsx

@@ -11,13 +11,13 @@ import {
   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';
+import { styles } from './SearchInput.styles';
 
 interface SearchInputProps {
   value: string;
@@ -76,32 +76,3 @@ export const SearchInput: React.FC<SearchInputProps> = ({
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  searchContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginHorizontal: 20,
-    marginBottom: 24,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderRadius: 12,
-    borderWidth: 1,
-  },
-  searchIcon: {
-    marginRight: 12,
-    fontSize: 16,
-  },
-  searchInput: {
-    flex: 1,
-    fontSize: 16,
-    padding: 0,
-    fontWeight: '500',
-  },
-  clearButton: {
-    padding: 4,
-  },
-  clearIcon: {
-    fontSize: 14,
-  },
-});

package/src/presentation/screens/LanguageSelectionScreen.styles.ts

@@ -0,0 +1,15 @@
+/**
+ * Language Selection Screen Styles
+ */
+
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  listContent: {
+    paddingHorizontal: 20,
+    paddingBottom: 32,
+  },
+});

package/src/presentation/screens/LanguageSelectionScreen.tsx

@@ -11,7 +11,8 @@ import { useAppDesignTokens } from '@umituz/react-native-design-system';
 import { useLanguageSelection } from '../../infrastructure/hooks/useLanguageSelection';
 import { LanguageItem } from '../components/LanguageItem';
 import { SearchInput } from '../components/SearchInput';
-import type { Language } from '../../infrastructure/storage/types/LocalizationState';
+import type { Language } from '../../infrastructure/storage/types/Language';
+import { styles } from './LanguageSelectionScreen.styles';
 
 interface LanguageSelectionScreenProps {
   renderLanguageItem?: (item: Language, isSelected: boolean, onSelect: (code: string) => void) => React.ReactNode;
@@ -105,14 +106,4 @@ export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = (
   return Container ? <Container>{content}</Container> : content;
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  listContent: {
-    paddingHorizontal: 20,
-    paddingBottom: 32,
-  },
-});
-
-export default LanguageSelectionScreen;
+export default LanguageSelectionScreen;