@umituz/react-native-localization 3.5.57 → 3.5.58

package/package.json

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

package/src/infrastructure/components/LanguageSwitcher.tsx

@@ -4,7 +4,9 @@
  */
 
 import React, { useMemo } from 'react';
-import { TouchableOpacity, Text } from 'react-native';
+import { TouchableOpacity, View } 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';
 
@@ -21,41 +23,6 @@ export interface LanguageSwitcherProps {
   accessibilityLabel?: string;
 }
 
-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> = ({
   showName = false,
   showFlag = true,
@@ -68,6 +35,7 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
   disabled = false,
   accessibilityLabel,
 }) => {
+  const tokens = useAppDesignTokens();
   const { currentLang, handlePress } = useLanguageSwitcher({ onPress, disabled });
 
   const accessibilityProps = useMemo(() => ({
@@ -77,9 +45,16 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
     accessible: true,
   }), [accessibilityLabel, currentLang.nativeName, disabled]);
 
+  const textColor = color || tokens.colors.textPrimary;
+
   return (
     <TouchableOpacity
-      style={[styles.container, style, disabled && styles.disabled]}
+      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}
@@ -87,9 +62,27 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
       disabled={disabled}
       {...accessibilityProps}
     >
-      {renderContent(showFlag, showName, currentLang.flag, currentLang.nativeName, color, iconStyle, textStyle)}
+      {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/presentation/components/LanguageItem.styles.ts

@@ -9,10 +9,7 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    padding: 16,
-    borderRadius: 12,
     borderWidth: 1,
-    marginBottom: 8,
   },
   selectedLanguageItem: {
     borderWidth: 2,
@@ -29,18 +26,15 @@ export const styles = StyleSheet.create({
   languageText: {
     flex: 1,
     flexShrink: 1,
-    marginRight: 12,
   },
   nativeName: {
-    fontSize: 16,
-    fontWeight: '600',
-    marginBottom: 4,
+    // Styling moved to themedStyles in component for token support
   },
   languageName: {
-    fontSize: 14,
+    // Styling moved to themedStyles in component for token support
   },
   checkIcon: {
-    fontSize: 18,
-    fontWeight: 'bold',
+    // Replaced by AtomicIcon
   },
 });
+

package/src/presentation/components/LanguageItem.tsx

@@ -9,13 +9,12 @@ import React, { useMemo } from 'react';
 import {
   View,
   TouchableOpacity,
-  Text,
   type StyleProp,
   type ViewStyle,
   type TextStyle,
 } from 'react-native';
 // @ts-ignore - Optional peer dependency
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import type { Language } from '../../infrastructure/storage/types/Language';
 import { styles } from './LanguageItem.styles';
 
@@ -42,22 +41,24 @@ export const LanguageItem: React.FC<LanguageItemProps> = ({
 
   const themedStyles = useMemo(() => ({
     languageItem: {
+      padding: tokens.spacing.md,
+      borderRadius: tokens.borders.radius.md,
       backgroundColor: tokens.colors.backgroundSecondary,
       borderColor: tokens.colors.border,
+      marginBottom: tokens.spacing.sm,
     } as ViewStyle,
     selectedLanguageItem: {
       borderColor: tokens.colors.primary,
-      backgroundColor: tokens.colors.primaryLight,
+      backgroundColor: tokens.colors.primaryContainer,
+      borderWidth: 2,
     } as ViewStyle,
     nativeName: {
       color: tokens.colors.textPrimary,
+      marginBottom: tokens.spacing.xs / 2,
     } as TextStyle,
     languageName: {
       color: tokens.colors.textSecondary,
     } as TextStyle,
-    checkIcon: {
-      color: tokens.colors.primary,
-    } as TextStyle,
   }), [tokens]);
 
   return (
@@ -66,28 +67,35 @@ export const LanguageItem: React.FC<LanguageItemProps> = ({
       style={[
         styles.languageItem,
         themedStyles.languageItem,
-        customStyles?.languageItem,
         isSelected ? [styles.selectedLanguageItem, themedStyles.selectedLanguageItem] : undefined,
+        customStyles?.languageItem,
       ]}
       onPress={() => onSelect(item.code)}
       activeOpacity={0.7}
     >
       <View style={[styles.languageContent, customStyles?.languageContent]}>
-        <Text style={[styles.flag, customStyles?.flag]}>
+        <AtomicText style={[styles.flag, customStyles?.flag]}>
           {item.flag || '🌐'}
-        </Text>
-        <View style={[styles.languageText, customStyles?.languageText]}>
-          <Text style={[styles.nativeName, themedStyles.nativeName, customStyles?.nativeName]}>
+        </AtomicText>
+        <View style={[styles.languageText, { gap: tokens.spacing.xs / 2 }, customStyles?.languageText]}>
+          <AtomicText 
+            type="bodyMedium" 
+            style={[themedStyles.nativeName, { fontWeight: '700' }, customStyles?.nativeName]}
+          >
             {item.nativeName}
-          </Text>
-          <Text style={[styles.languageName, themedStyles.languageName, customStyles?.nativeName]}>
+          </AtomicText>
+          <AtomicText 
+            type="labelMedium" 
+            style={[themedStyles.languageName, customStyles?.nativeName]}
+          >
             {item.name}
-          </Text>
+          </AtomicText>
         </View>
       </View>
       {isSelected && (
-        <Text style={[styles.checkIcon, themedStyles.checkIcon, customStyles?.flag]}>✓</Text>
+        <AtomicIcon name="checkmark" size="sm" color="primary" />
       )}
     </TouchableOpacity>
   );
 };
+

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

@@ -6,10 +6,11 @@ import { StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    // Styling handled by ScreenLayout
   },
   listContent: {
-    paddingHorizontal: 20,
-    paddingBottom: 32,
+    // Horizontal padding handled by ScreenLayout contentWrapper
+    // Bottom padding handled in component using tokens
   },
 });
+

package/src/presentation/screens/LanguageSelectionScreen.tsx

@@ -4,11 +4,16 @@
  */
 
 import React from 'react';
-import { View, FlatList } from 'react-native';
+import { FlatList } from 'react-native';
 // @ts-ignore - Optional peer dependency
 import { useNavigation } from '@react-navigation/native';
 // @ts-ignore - Optional peer dependency
-import { useAppDesignTokens, SearchBar } from '@umituz/react-native-design-system';
+import { 
+  useAppDesignTokens, 
+  SearchBar, 
+  ScreenLayout,
+  NavigationHeader
+} from '@umituz/react-native-design-system';
 import { useLanguageSelection } from '../../infrastructure/hooks/useLanguageSelection';
 import { LanguageItem } from '../components/LanguageItem';
 import type { Language } from '../../infrastructure/storage/types/Language';
@@ -17,7 +22,8 @@ import { styles } from './LanguageSelectionScreen.styles';
 interface LanguageSelectionScreenProps {
   renderLanguageItem?: (item: Language, isSelected: boolean, onSelect: (code: string) => void) => React.ReactNode;
   renderSearchInput?: (value: string, onChange: (value: string) => void, placeholder: string) => React.ReactNode;
-  containerComponent?: React.ComponentType<{ children: React.ReactNode }>;
+  headerTitle?: string;
+  onBackPress?: () => void;
   styles?: {
     container?: any;
     searchContainer?: any;
@@ -38,7 +44,8 @@ interface LanguageSelectionScreenProps {
 export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = ({
   renderLanguageItem,
   renderSearchInput,
-  containerComponent: Container,
+  headerTitle,
+  onBackPress,
   styles: customStyles,
   searchPlaceholder = "settings.languageSelection.searchPlaceholder",
   testID = 'language-selection-screen',
@@ -84,27 +91,53 @@ export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = (
         value={searchQuery}
         onChangeText={setSearchQuery}
         placeholder={searchPlaceholder}
-        containerStyle={customStyles?.searchContainer}
+        containerStyle={[
+          { marginBottom: tokens.spacing.md },
+          customStyles?.searchContainer
+        ]}
         inputStyle={customStyles?.searchInput}
       />
     );
   };
 
-  const content = (
-    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }, customStyles?.container]} testID={testID}>
+  const handleBack = () => {
+    if (onBackPress) {
+      onBackPress();
+    } else {
+      navigation.goBack();
+    }
+  };
+
+  return (
+    <ScreenLayout
+      testID={testID}
+      scrollable={false}
+      edges={['top', 'bottom', 'left', 'right']}
+      backgroundColor={tokens.colors.backgroundPrimary}
+      header={
+        <NavigationHeader 
+          title={headerTitle || ""} 
+          onBackPress={handleBack} 
+        />
+      }
+      containerStyle={customStyles?.container}
+    >
       {renderSearchComponent()}
       <FlatList
         data={filteredLanguages}
         renderItem={renderItem}
         keyExtractor={item => item.code}
-        contentContainerStyle={[styles.listContent, customStyles?.listContent]}
+        contentContainerStyle={[
+          styles.listContent, 
+          { paddingBottom: tokens.spacing.xl },
+          customStyles?.listContent
+        ]}
         showsVerticalScrollIndicator={false}
         keyboardShouldPersistTaps="handled"
       />
-    </View>
+    </ScreenLayout>
   );
-
-  return Container ? <Container>{content}</Container> : content;
 };
 
 export default LanguageSelectionScreen;
+