@umituz/react-native-settings 4.23.35 → 4.23.37

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.23.35",
-  "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, rating, and gamification",
+  "version": "4.23.37",
+  "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
@@ -17,6 +17,9 @@
     "user-settings",
     "theme",
     "language",
+    "localization",
+    "i18n",
+    "translation",
     "notifications",
     "about",
     "legal",
@@ -40,17 +43,22 @@
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=14.0.0",
+    "@react-native-async-storage/async-storage": ">=2.0.0",
     "@react-navigation/native": ">=6.0.0",
     "@react-navigation/stack": ">=6.0.0",
     "@tanstack/react-query": ">=5.0.0",
     "expo-notifications": ">=0.28.0",
     "expo-device": ">=6.0.0",
     "expo-haptics": ">=15.0.0",
+    "expo-localization": ">=16.0.0",
     "expo-store-review": ">=14.0.0",
+    "i18next": ">=23.0.0",
+    "react-i18next": ">=15.0.0",
     "@react-native-community/datetimepicker": ">=8.0.0",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
-    "react-native-safe-area-context": ">=4.0.0"
+    "react-native-safe-area-context": ">=4.0.0",
+    "zustand": ">=4.0.0"
   },
   "devDependencies": {
     "@expo/vector-icons": "^15.0.0",
@@ -69,7 +77,6 @@
     "@typescript-eslint/parser": "^7.18.0",
     "@umituz/react-native-auth": "*",
     "@umituz/react-native-firebase": "*",
-    "@umituz/react-native-localization": "*",
     "@umituz/react-native-sentry": "*",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.37.5",
@@ -92,7 +99,7 @@
     "expo-sharing": "^14.0.8",
     "expo-notifications": "~0.27.6",
     "expo-secure-store": "^15.0.8",
-    "expo-store-review": "~14.0.0",
+    "expo-store-review": "^8.0.0",
     "expo-video": "^3.0.15",
     "expo-web-browser": "^12.0.0",
     "firebase": "^12.7.0",

package/src/domains/appearance/presentation/screens/AppearanceScreen.tsx

@@ -12,7 +12,7 @@ import {
   NavigationHeader,
   useAppNavigation
 } from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
+import { useLocalization } from "../../../localization";
 import { useAppearance, useAppearanceActions } from "../../hooks";
 import {
   AppearanceHeader,

package/src/domains/disclaimer/presentation/components/DisclaimerSetting.test.tsx

@@ -7,7 +7,7 @@ import { render, fireEvent } from '@testing-library/react-native';
 import { DisclaimerSetting } from '../DisclaimerSetting';
 
 // Mock dependencies
-jest.mock('@umituz/react-native-localization', () => ({
+jest.mock('../../../localization', () => ({
   useLocalization: () => ({
     t: (key: string) => key,
   }),

package/src/domains/disclaimer/presentation/components/DisclaimerSetting.tsx

@@ -21,7 +21,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { Modal } from 'react-native';
 
 import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system';
-import { useLocalization } from '@umituz/react-native-localization';
+import { useLocalization } from '../../../localization';
 import { DisclaimerCard } from './DisclaimerCard';
 import { DisclaimerModal } from './DisclaimerModal';
 

package/src/domains/disclaimer/presentation/screens/DisclaimerScreen.tsx

@@ -18,7 +18,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system';
 import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
-import { useLocalization } from '@umituz/react-native-localization';
+import { useLocalization } from '../../../localization';
 
 export interface DisclaimerScreenProps {
   /** Custom title (overrides translation) */

package/src/domains/localization/domain/repositories/ILocalizationRepository.ts

@@ -0,0 +1,18 @@
+/**
+ * Localization Repository Interface
+ * Defines language configuration and types
+ */
+
+export interface Language {
+  code: string;
+  name: string;
+  nativeName: string;
+  flag?: string;
+  isRTL?: boolean;
+}
+
+export interface ILocalizationRepository {
+  getSupportedLanguages(): Language[];
+  getLanguageByCode(code: string): Language | undefined;
+  isLanguageSupported(code: string): boolean;
+}

package/src/domains/localization/index.ts

@@ -0,0 +1,33 @@
+// Hooks
+export { useLocalization } from './infrastructure/hooks/useLocalization';
+export { useLocalizationStore } from './infrastructure/storage/LocalizationStore';
+export { useTranslationFunction } from './infrastructure/hooks/useTranslation';
+export { useLanguageSelection } from './infrastructure/hooks/useLanguageSelection';
+export { useLanguageSwitcher } from './infrastructure/components/useLanguageSwitcher';
+export { useLanguageNavigation } from './infrastructure/components/useLanguageNavigation';
+
+// Components
+export { LanguageSwitcher } from './infrastructure/components/LanguageSwitcher';
+
+// Screens
+export { LanguageSelectionScreen } from './presentation/screens/LanguageSelectionScreen';
+export type { LanguageSelectionScreenProps } from './presentation/screens/LanguageSelectionScreen.types';
+export { LanguageSection } from './presentation/components/LanguageSection';
+export type { LanguageSectionProps, LanguageSectionConfig } from './presentation/components/LanguageSection';
+
+// Configuration
+export { default as i18n } from './infrastructure/config/i18n';
+export { I18nInitializer } from './infrastructure/config/I18nInitializer';
+export {
+  SUPPORTED_LANGUAGES,
+  LANGUAGES,
+  DEFAULT_LANGUAGE,
+  getLanguageByCode,
+  isLanguageSupported,
+  getDefaultLanguage,
+  getDeviceLocale,
+  searchLanguages,
+} from './infrastructure/config/languages';
+
+// Types
+export type { Language, ILocalizationRepository } from './domain/repositories/ILocalizationRepository';

package/src/domains/localization/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/domains/localization/infrastructure/components/LanguageSwitcher.tsx

@@ -0,0 +1,88 @@
+/**
+ * Language Switcher Component
+ * Displays current language and allows switching
+ */
+
+import React, { useMemo } from 'react';
+import { TouchableOpacity } from 'react-native';
+// @ts-ignore - Optional peer dependency
+import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+import { useLanguageSwitcher } from './useLanguageSwitcher';
+import { styles, DEFAULT_CONFIG_VALUES } from './LanguageSwitcher.styles';
+
+export interface LanguageSwitcherProps {
+  showName?: boolean;
+  showFlag?: boolean;
+  color?: string;
+  onPress?: () => void;
+  style?: any;
+  textStyle?: any;
+  iconStyle?: any;
+  testID?: string;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+}
+
+export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
+  showName = false,
+  showFlag = true,
+  color,
+  onPress,
+  style,
+  textStyle,
+  iconStyle,
+  testID = 'language-switcher',
+  disabled = false,
+  accessibilityLabel,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { currentLang, handlePress } = useLanguageSwitcher({ onPress, disabled });
+
+  const accessibilityProps = useMemo(() => ({
+    accessibilityRole: 'button' as const,
+    accessibilityLabel: accessibilityLabel || `Current language: ${currentLang.nativeName}`,
+    accessibilityHint: disabled ? undefined : 'Double tap to change language',
+    accessible: true,
+  }), [accessibilityLabel, currentLang.nativeName, disabled]);
+
+  const textColor = color || tokens.colors.textPrimary;
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container, 
+        { gap: tokens.spacing.xs },
+        style, 
+        disabled && styles.disabled
+      ]}
+      onPress={handlePress}
+      activeOpacity={disabled ? 1 : DEFAULT_CONFIG_VALUES.activeOpacity}
+      hitSlop={DEFAULT_CONFIG_VALUES.hitSlop}
+      testID={testID}
+      disabled={disabled}
+      {...accessibilityProps}
+    >
+      {showFlag && (
+        <AtomicText style={[styles.flag, iconStyle]}>
+          {currentLang.flag || '🌐'}
+        </AtomicText>
+      )}
+      {showName && (
+        <AtomicText 
+          type="bodySmall" 
+          style={[styles.languageName, { color: textColor, fontWeight: '600' }, textStyle]}
+        >
+          {currentLang.nativeName}
+        </AtomicText>
+      )}
+      {!showFlag && !showName && (
+        <AtomicText style={[styles.icon, { color: textColor }, iconStyle]}>
+          🌐
+        </AtomicText>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+export default LanguageSwitcher;
+

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

@@ -0,0 +1,91 @@
+/**
+ * Simple tests for LanguageSwitcher component
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { LanguageSwitcher } from '../LanguageSwitcher';
+
+// Mock React Native
+jest.mock('react-native', () => ({
+  View: 'View',
+  Text: 'Text',
+  TouchableOpacity: 'TouchableOpacity',
+  StyleSheet: {
+    create: jest.fn(() => ({})),
+    flatten: jest.fn((styles) => styles),
+  },
+}));
+
+// Mock hooks
+jest.mock('../../hooks/useLocalization', () => ({
+  useLocalization: () => ({
+    currentLanguage: 'en-US',
+  }),
+}));
+
+jest.mock('../../repository/LanguageRepository', () => ({
+  languageRepository: {
+    getLanguageByCode: jest.fn(() => ({
+      code: 'en-US',
+      name: 'English',
+      nativeName: 'English',
+      flag: '🇺🇸',
+    })),
+    getDefaultLanguage: () => ({
+      code: 'en-US',
+      name: 'English',
+      nativeName: 'English',
+      flag: '🇺🇸',
+    }),
+  },
+}));
+
+describe('LanguageSwitcher', () => {
+  it('should render correctly', () => {
+    const { getByTestId } = render(
+      <LanguageSwitcher testID="language-switcher" />
+    );
+
+    expect(getByTestId('language-switcher')).toBeTruthy();
+  });
+
+  it('should render with flag', () => {
+    const { getByText } = render(
+      <LanguageSwitcher testID="language-switcher" showFlag />
+    );
+
+    expect(getByText('🇺🇸')).toBeTruthy();
+  });
+
+  it('should render with name', () => {
+    const { getByText } = render(
+      <LanguageSwitcher testID="language-switcher" showName />
+    );
+
+    expect(getByText('English')).toBeTruthy();
+  });
+
+  it('should handle onPress', () => {
+    const mockOnPress = jest.fn();
+    const { getByTestId } = render(
+      <LanguageSwitcher testID="language-switcher" onPress={mockOnPress} />
+    );
+
+    // Simulate press
+    const component = getByTestId('language-switcher');
+    component.props.onPress();
+    
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('should be accessible', () => {
+    const { getByTestId } = render(
+      <LanguageSwitcher testID="language-switcher" />
+    );
+
+    const component = getByTestId('language-switcher');
+    expect(component.props.accessible).toBe(true);
+    expect(component.props.accessibilityRole).toBe('button');
+  });
+});

package/src/domains/localization/infrastructure/components/useLanguageNavigation.ts

@@ -0,0 +1,20 @@
+// @ts-ignore - Optional peer dependency
+import { useAppNavigation } from '@umituz/react-native-design-system';
+import { useLocalization } from '../hooks/useLocalization';
+import { languageRepository } from '../repository/LanguageRepository';
+
+
+export const useLanguageNavigation = (navigationScreen: string) => {
+  const navigation = useAppNavigation();
+  const { currentLanguage } = useLocalization();
+  const currentLang = languageRepository.getLanguageByCode(currentLanguage) || languageRepository.getDefaultLanguage();
+
+  const navigateToLanguageSelection = () => {
+    if (navigation && navigationScreen) {
+      navigation.navigate(navigationScreen as never);
+    }
+  };
+
+  return { currentLang, navigateToLanguageSelection };
+};
+

package/src/domains/localization/infrastructure/components/useLanguageSwitcher.ts

@@ -0,0 +1,34 @@
+/**
+ * Language Switcher Hook
+ * Manages the logic for the LanguageSwitcher component
+ */
+
+import { useMemo, useCallback } from 'react';
+import { useLocalization } from '../hooks/useLocalization';
+import { languageRepository } from '../repository/LanguageRepository';
+import type { Language } from '../storage/types/Language';
+
+export interface UseLanguageSwitcherProps {
+    onPress?: () => void;
+    disabled?: boolean;
+}
+
+export const useLanguageSwitcher = ({ onPress, disabled }: UseLanguageSwitcherProps) => {
+    const { currentLanguage } = useLocalization();
+
+    const currentLang = useMemo((): Language => {
+        return languageRepository.getLanguageByCode(currentLanguage) || languageRepository.getDefaultLanguage();
+    }, [currentLanguage]);
+
+    const handlePress = useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        onPress?.();
+    }, [disabled, onPress]);
+
+    return {
+        currentLang,
+        handlePress,
+    };
+};

package/src/domains/localization/infrastructure/config/DeviceLocale.ts

@@ -0,0 +1,47 @@
+/**
+ * Device Locale Detection
+ * Detects and maps device locale to supported language
+ */
+
+import * as Localization from 'expo-localization';
+import { LOCALE_MAPPING } from './LocaleMapping';
+import { languageRepository } from '../repository/LanguageRepository';
+
+export const DEFAULT_LANGUAGE = 'en-US';
+
+/**
+ * Get device locale and map it to supported language
+ * Called ONLY on first launch (when no saved language preference exists)
+ */
+export const getDeviceLocale = (): string => {
+    try {
+        const deviceLocale = Localization.getLocales()[0]?.languageTag;
+
+        if (!deviceLocale) {
+            return DEFAULT_LANGUAGE;
+        }
+
+        // Check exact match
+        if (LOCALE_MAPPING[deviceLocale]) {
+            return LOCALE_MAPPING[deviceLocale];
+        }
+
+        // Extract language code
+        const languageCode = deviceLocale.split('-')[0];
+        const mappedByCode = languageCode ? LOCALE_MAPPING[languageCode] : undefined;
+
+        // Check language code
+        if (mappedByCode) {
+            return mappedByCode;
+        }
+
+        // Check if directly supported
+        if (languageRepository.isLanguageSupported(deviceLocale)) {
+            return deviceLocale;
+        }
+
+        return DEFAULT_LANGUAGE;
+    } catch {
+        return DEFAULT_LANGUAGE;
+    }
+};

package/src/domains/localization/infrastructure/config/I18nInitializer.ts

@@ -0,0 +1,73 @@
+/**
+ * i18n Initializer
+ *
+ * Namespace-based i18n configuration
+ * Usage: t('namespace:key') e.g., t('common:cancel')
+ */
+
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { DEFAULT_LANGUAGE } from './languages';
+import { ResourceBuilder } from './ResourceBuilder';
+import { NamespaceResolver } from './NamespaceResolver';
+
+export class I18nInitializer {
+  private static reactI18nextInitialized = false;
+
+  static initialize(
+    appTranslations: Record<string, any>,
+    languageCode: string = DEFAULT_LANGUAGE
+  ): void {
+    if (i18n.isInitialized) {
+      return;
+    }
+
+    try {
+      if (!this.reactI18nextInitialized) {
+        i18n.use(initReactI18next);
+        this.reactI18nextInitialized = true;
+      }
+
+      const resources = ResourceBuilder.buildResources(appTranslations, languageCode);
+      const namespaces = NamespaceResolver.getNamespaces(appTranslations, languageCode);
+      const defaultNamespace = NamespaceResolver.getDefaultNamespace();
+
+      i18n.init({
+        resources,
+        lng: languageCode,
+        fallbackLng: DEFAULT_LANGUAGE,
+        ns: namespaces,
+        defaultNS: defaultNamespace,
+        fallbackNS: defaultNamespace,
+        interpolation: { escapeValue: false },
+        react: { useSuspense: false },
+        compatibilityJSON: 'v4',
+        pluralSeparator: '_',
+        keySeparator: '.',
+        nsSeparator: ':',
+        saveMissing: false,
+        missingKeyHandler: false,
+        debug: false,
+        returnEmptyString: false,
+        returnNull: false,
+      });
+    } catch {
+      // Silent error handling
+    }
+  }
+
+  /**
+   * Add translations at runtime
+   */
+  static addTranslations(
+    languageCode: string,
+    namespaceResources: Record<string, any>
+  ): void {
+    for (const [namespace, translations] of Object.entries(namespaceResources)) {
+      if (translations && typeof translations === 'object') {
+        i18n.addResourceBundle(languageCode, namespace, translations, true, true);
+      }
+    }
+  }
+
+}

package/src/domains/localization/infrastructure/config/LanguageQuery.ts

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

package/src/domains/localization/infrastructure/config/LocaleMapping.ts

@@ -0,0 +1,78 @@
+/**
+ * Locale Mapping Configuration
+ * Maps device locales to supported app locales
+ */
+
+export const LOCALE_MAPPING: Record<string, string> = {
+    // English variants map to en-US
+    'en': 'en-US',
+    'en-US': 'en-US',
+    'en-GB': 'en-US',
+    'en-AU': 'en-US',
+    'en-CA': 'en-US',
+    'en-NZ': 'en-US',
+    'en-IE': 'en-US',
+    'en-ZA': 'en-US',
+    'en-SG': 'en-US',
+    'en-IN': 'en-US',
+
+    // Portuguese mappings
+    'pt': 'pt-PT',
+    'pt-BR': 'pt-BR',
+    'pt-PT': 'pt-PT',
+
+    // Spanish variants
+    'es': 'es-ES',
+    'es-ES': 'es-ES',
+    'es-MX': 'es-ES',
+    'es-AR': 'es-ES',
+    'es-US': 'es-ES',
+
+    // French variants
+    'fr': 'fr-FR',
+    'fr-FR': 'fr-FR',
+    'fr-CA': 'fr-FR',
+    'fr-BE': 'fr-FR',
+    'fr-CH': 'fr-FR',
+
+    // Norwegian
+    'no': 'no-NO',
+    'nb': 'no-NO',
+    'nn': 'no-NO',
+
+    // Chinese variants
+    'zh': 'zh-CN',
+    'zh-CN': 'zh-CN',
+    'zh-Hans': 'zh-CN',
+    'zh-Hans-CN': 'zh-CN',
+    'zh-Hant': 'zh-TW',
+    'zh-TW': 'zh-TW',
+    'zh-HK': 'zh-TW',
+
+    // Others
+    'ar': 'ar-SA',
+    'bg': 'bg-BG',
+    'cs': 'cs-CZ',
+    'da': 'da-DK',
+    'de': 'de-DE',
+    'el': 'el-GR',
+    'fi': 'fi-FI',
+    'hi': 'hi-IN',
+    'hr': 'hr-HR',
+    'hu': 'hu-HU',
+    'id': 'id-ID',
+    'it': 'it-IT',
+    'ja': 'ja-JP',
+    'ko': 'ko-KR',
+    'ms': 'ms-MY',
+    'nl': 'nl-NL',
+    'pl': 'pl-PL',
+    'ro': 'ro-RO',
+    'ru': 'ru-RU',
+    'sk': 'sk-SK',
+    'sv': 'sv-SE',
+    'th': 'th-TH',
+    'tr': 'tr-TR',
+    'uk': 'uk-UA',
+    'vi': 'vi-VN',
+};