@umituz/react-native-localization 3.4.0 → 3.5.1

package/package.json

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

package/src/infrastructure/hooks/useTranslation.ts

@@ -15,7 +15,7 @@ export interface TranslationOptions {
   count?: number;
   ns?: string | string[];
   defaultValue?: string;
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 /**
@@ -29,11 +29,12 @@ export interface TranslationOptions {
 export const useTranslationFunction = () => {
   const { t: i18nextT, ready } = useTranslation(undefined, { i18n });
 
-  const translate = useCallback((key: string, options: TranslationOptions = {}): string => {
+  const translate = useCallback((key: string, defaultValueOrOptions?: string | TranslationOptions): string => {
+    const options: TranslationOptions = typeof defaultValueOrOptions === 'string'
+      ? { defaultValue: defaultValueOrOptions }
+      : defaultValueOrOptions || {};
+
     if (!ready || !i18n.isInitialized) {
-      if (__DEV__) {
-        console.warn(`[Localization] i18n not ready, returning key: ${key}`);
-      }
       return options.defaultValue || key;
     }
 

package/src/presentation/components/LanguageSection.tsx

@@ -32,7 +32,7 @@ export const LanguageSection: React.FC<LanguageSectionProps> = ({
     const { t, currentLanguage } = useLocalization();
 
     const route = config?.route || 'LanguageSelection';
-    const title = config?.title || t('settings.language') || 'Language';
+    const title = config?.title || t('settings.languageSelection.title') || 'Language';
     const description = config?.description || '';
 
     const currentLang = getLanguageByCode(currentLanguage);
@@ -47,7 +47,7 @@ export const LanguageSection: React.FC<LanguageSectionProps> = ({
 
     return (
         <View style={[styles.sectionContainer, { backgroundColor: colors.surface }, containerStyle]}>
-            <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>{t("settings.sections.app.title") || "App"}</Text>
+            <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>{title}</Text>
 
             <Pressable
                 style={({ pressed }) => [

package/src/presentation/screens/LanguageSelectionScreen.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-native';
 // @ts-ignore - Optional peer dependency
 import { useNavigation } from '@react-navigation/native';
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
 import { useLocalization, searchLanguages, Language } from '../../index';
 import { LanguageItem } from '../components/LanguageItem';
 import { SearchInput } from '../components/SearchInput';
@@ -70,6 +71,7 @@ export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = (
   testID = 'language-selection-screen',
 }) => {
   const navigation = useNavigation();
+  const tokens = useAppDesignTokens();
   const { t, currentLanguage, setLanguage } = useLocalization();
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedCode, setSelectedCode] = useState(currentLanguage);
@@ -118,7 +120,7 @@ export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = (
   };
 
   const content = (
-    <View style={[styles.container, customStyles?.container]} testID={testID}>
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }, customStyles?.container]} testID={testID}>
       {renderSearchInputComponent()}
       <FlatList
         data={filteredLanguages}