@umituz/react-native-settings 5.3.67 → 5.3.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "5.3.67",
+  "version": "5.3.69",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification - expo-store-review and expo-device now lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",
@@ -165,7 +165,7 @@
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@umituz/react-native-auth": "^4.3.39",
-    "@umituz/react-native-design-system": "^4.25.34",
+    "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-firebase": "^2.4.55",
     "@umituz/react-native-sentry": "latest",
     "eslint": "^8.57.0",

package/src/domains/appearance/presentation/components/ThemeOption.tsx

@@ -22,9 +22,6 @@ interface ThemeOptionProps {
   onSelect: () => void;
 }
 
-// Valid theme modes for validation
-const VALID_THEME_MODES: readonly ThemeMode[] = ["light", "dark", "auto"];
-
 // Utility function to add opacity to hex color
 const addOpacityToHex = (hexColor: string, opacity: string): string => {
   // Remove # if present
@@ -33,7 +30,7 @@ const addOpacityToHex = (hexColor: string, opacity: string): string => {
 };
 
 export const ThemeOption: React.FC<ThemeOptionProps> = React.memo(({
-  mode,
+  mode: _mode,
   title,
   subtitle,
   description,

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

@@ -19,7 +19,7 @@ export const DEFAULT_LANGUAGES: Language[] = [
   { 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: '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 },

package/src/domains/localization/presentation/components/LanguageItem.tsx

@@ -41,34 +41,43 @@ export const LanguageItem: React.FC<LanguageItemProps> = ({
 
   const themedStyles = useMemo(() => ({
     languageItem: {
-      padding: tokens.spacing.md,
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.md,
       borderRadius: tokens.borders.radius.lg,
-      backgroundColor: tokens.colors.surface,
-      borderColor: tokens.colors.border,
-      borderWidth: 1,
+      backgroundColor: tokens.colors.surfaceSecondary,
       marginBottom: tokens.spacing.md,
+      flexDirection: 'row' as const,
+      alignItems: 'center' as const,
+      justifyContent: 'space-between' as const,
     } as ViewStyle,
     selectedLanguageItem: {
+      backgroundColor: tokens.colors.surface,
       borderColor: tokens.colors.primary,
-      backgroundColor: tokens.colors.surfaceVariant,
       borderWidth: 1.5,
     } as ViewStyle,
     nativeName: {
       color: tokens.colors.textPrimary,
-      marginBottom: 2,
     } as TextStyle,
     languageName: {
       color: tokens.colors.textSecondary,
     } as TextStyle,
+    flagContainer: {
+      width: 44,
+      height: 44,
+      borderRadius: tokens.borders.radius.md,
+      backgroundColor: tokens.colors.backgroundPrimary,
+      alignItems: 'center' as const,
+      justifyContent: 'center' as const,
+      marginRight: tokens.spacing.md,
+    } as ViewStyle,
   }), [tokens]);
 
   return (
     <TouchableOpacity
       testID="language-item-test"
       style={[
-        styles.languageItem,
         themedStyles.languageItem,
-        isSelected ? [styles.selectedLanguageItem, themedStyles.selectedLanguageItem] : undefined,
+        isSelected && themedStyles.selectedLanguageItem,
         customStyles?.languageItem,
       ]}
       onPress={() => {
@@ -77,13 +86,21 @@ export const LanguageItem: React.FC<LanguageItemProps> = ({
       activeOpacity={0.7}
     >
       <View style={[styles.languageContent, customStyles?.languageContent]}>
-        <AtomicText style={[styles.flag, { fontSize: 28, fontFamily: undefined }, customStyles?.flag]}>
-          {item.flag || '🌐'}
-        </AtomicText>
-        <View style={[styles.languageText, { gap: 4 }, customStyles?.languageText]}>
+        <View style={themedStyles.flagContainer}>
+          <AtomicText 
+            style={[
+              styles.flag, 
+              { fontSize: 24, marginRight: 0, fontFamily: undefined }, 
+              customStyles?.flag
+            ]}
+          >
+            {item.flag || '🌐'}
+          </AtomicText>
+        </View>
+        <View style={[styles.languageText, customStyles?.languageText]}>
           <AtomicText 
             type="bodyLarge"
-            style={[themedStyles.nativeName, { fontWeight: '700' }, customStyles?.nativeName]}
+            style={[themedStyles.nativeName, { fontWeight: '600' }, customStyles?.nativeName]}
           >
             {item.nativeName}
           </AtomicText>
@@ -96,7 +113,7 @@ export const LanguageItem: React.FC<LanguageItemProps> = ({
         </View>
       </View>
       {isSelected && (
-        <AtomicIcon name="checkmark" size="sm" color="primary" />
+        <AtomicIcon name="checkmark-circle" size="md" color="primary" />
       )}
     </TouchableOpacity>
   );

package/src/domains/localization/presentation/screens/LanguageSelectionScreen.tsx

@@ -79,21 +79,18 @@ const LanguageSearchComponent: React.FC<LanguageSearchComponentProps> = ({
         containerStyle={[
           {
             marginBottom: tokens.spacing.md,
-            backgroundColor: 'transparent',
-            borderBottomWidth: 0,
-            paddingHorizontal: 0,
+            backgroundColor: tokens.colors.surfaceSecondary,
+            borderWidth: 0,
+            paddingHorizontal: tokens.spacing.md,
+            height: 52,
+            borderRadius: tokens.borders.radius.lg,
           },
           customStyles?.searchContainer
         ]}
         inputStyle={[
           {
-            backgroundColor: tokens.colors.surface,
-            borderRadius: tokens.borders.radius.full,
             color: tokens.colors.textPrimary,
-            paddingHorizontal: tokens.spacing.md,
-            height: 52,
-            borderWidth: 1,
-            borderColor: tokens.colors.border,
+            fontSize: tokens.typography.bodyMedium.responsiveFontSize,
           },
           customStyles?.searchInput
         ]}
@@ -150,7 +147,7 @@ export const LanguageSelectionScreen: React.FC<LanguageSelectionProps> = ({
     <ScreenLayout
       testID={testID}
       scrollable={false}
-      edges={['top', 'bottom', 'left', 'right']}
+      edges={['bottom', 'left', 'right']}
       backgroundColor={tokens.colors.backgroundPrimary}
       header={
         showHeader ? (

package/src/presentation/components/settings/SettingsItemCardContent.tsx

@@ -41,7 +41,12 @@ export const SettingsItemCardContent: React.FC<SettingsItemCardContentProps> = R
           {title}
         </AtomicText>
         {!!description && (
-          <AtomicText type="bodyMedium" color="textSecondary" numberOfLines={2}>
+          <AtomicText 
+            type="bodyMedium" 
+            color="textSecondary" 
+            numberOfLines={2}
+            style={{ fontFamily: undefined }}
+          >
             {description}
           </AtomicText>
         )}

package/src/presentation/screens/SettingsScreen.tsx

@@ -81,6 +81,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = (props) => {
     shouldShowUserProfile,
     appVersion,
     handleClose,
+    currentLanguage,
   } = useSettingsScreen({
     config,
     showUserProfile,
@@ -113,6 +114,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = (props) => {
             devSettings={devSettings}
             gamificationConfig={gamificationConfig}
             navigation={navigation}
+            currentLanguage={currentLanguage}
           />
         )}
       </ScreenLayout>

package/src/presentation/screens/components/SettingsContent.tsx

@@ -30,6 +30,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
   devSettings,
   gamificationConfig,
   navigation,
+  currentLanguage,
 }) => {
   const translations = normalizedConfig.translations;
   const { level } = useGamification(gamificationConfig);
@@ -73,7 +74,11 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
         />
       )}
 
-      <FeatureSettingsSection normalizedConfig={normalizedConfig} features={features} />
+      <FeatureSettingsSection 
+        normalizedConfig={normalizedConfig} 
+        features={features} 
+        currentLanguage={currentLanguage}
+      />
 
       {features.gamification && (
         <SettingsSection title={translations?.sections?.progress || ''}>

package/src/presentation/screens/components/sections/FeatureSettingsSection.tsx

@@ -39,7 +39,8 @@ export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
   
   const languageDisplayName = React.useMemo(() => {
     if (!currentLanguageData) return langCode;
-    return `${currentLanguageData.flag} ${currentLanguageData.nativeName}`;
+    // Native flag rendering fix: ensure no custom font breaks emojis
+    return `${currentLanguageData.flag || ''} ${currentLanguageData.nativeName}`;
   }, [currentLanguageData, langCode]);
 
   if (!features.appearance && !features.language && !features.notifications) return null;

package/src/presentation/screens/components/types/SettingsContentProps.ts

@@ -49,4 +49,5 @@ export interface SettingsContentProps {
   devSettings?: DevSettingsProps;
   gamificationConfig?: GamificationSettingsConfig;
   navigation?: any;
+  currentLanguage?: string;
 }

package/src/presentation/screens/hooks/useSettingsScreen.ts

@@ -8,6 +8,7 @@ import { useAppNavigation } from "@umituz/react-native-design-system/molecules";
 import { normalizeSettingsConfig } from "../utils/normalizeConfig";
 import { useFeatureDetection } from "./useFeatureDetection";
 import { getAppVersion } from "../../../utils/appUtils";
+import { useLocalization } from "../../../domains/localization";
 import type { SettingsConfig } from "../types";
 
 export interface UseSettingsScreenParams {
@@ -28,6 +29,7 @@ export function useSettingsScreen({
   onClose,
 }: UseSettingsScreenParams) {
   const navigation = useAppNavigation();
+  const localization = useLocalization();
 
   // Normalize config
   const normalizedConfig = useMemo(
@@ -60,5 +62,6 @@ export function useSettingsScreen({
     shouldShowUserProfile,
     appVersion,
     handleClose,
+    currentLanguage: localization.currentLanguage,
   };
 }