@umituz/react-native-settings 5.3.62 → 5.3.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "5.3.62",
+  "version": "5.3.64",
   "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",

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

@@ -25,13 +25,6 @@ interface ThemeOptionProps {
 // Valid theme modes for validation
 const VALID_THEME_MODES: readonly ThemeMode[] = ["light", "dark", "auto"];
 
-// Icon names mapping for type safety
-const THEME_ICONS: Record<ThemeMode, string> = {
-  light: "sunny-outline",
-  dark: "moon-outline",
-  auto: "desktop-outline",
-};
-
 // Utility function to add opacity to hex color
 const addOpacityToHex = (hexColor: string, opacity: string): string => {
   // Remove # if present
@@ -54,14 +47,6 @@ export const ThemeOption: React.FC<ThemeOptionProps> = React.memo(({
   // Memoize styles to prevent unnecessary re-creation
   const styles = useMemo(() => getStyles(tokens), [tokens]);
 
-  // Type-safe icon name selection with validation
-  const iconName: string = useMemo(() => {
-    if (VALID_THEME_MODES.includes(mode)) {
-      return THEME_ICONS[mode];
-    }
-    // Fallback for invalid mode
-    return THEME_ICONS.auto;
-  }, [mode]);
 
   return (
     <TouchableOpacity
@@ -72,9 +57,6 @@ export const ThemeOption: React.FC<ThemeOptionProps> = React.memo(({
       accessibilityState={{ selected: isSelected }}
     >
       <View style={styles.header}>
-        <View style={styles.iconContainer}>
-          <AtomicIcon name={iconName} customSize={24} customColor={tokens.colors.primary} />
-        </View>
         <View style={styles.textContainer}>
           <AtomicText type="titleLarge" color="primary">
             {title}
@@ -149,15 +131,6 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       alignItems: "center",
       marginBottom: 12,
     },
-    iconContainer: {
-      width: 48,
-      height: 48,
-      borderRadius: 24,
-      backgroundColor: addOpacityToHex(tokens.colors.primary, "15"),
-      justifyContent: "center",
-      alignItems: "center",
-      marginRight: 12,
-    },
     textContainer: {
       flex: 1,
     },

package/src/domains/localization/infrastructure/hooks/useTranslation.ts

@@ -44,12 +44,21 @@ export const useTranslationFunction = () => {
       ? `${key.substring(0, firstDotIndex)}:${key.substring(firstDotIndex + 1)}`
       : key;
 
+    // Check if key exists in either format
+    const keyToUse = i18n.exists(i18nextKey) ? i18nextKey : key;
+
     // Missing translation is a critical issue — warn in development
-    if (!i18n.exists(i18nextKey)) {
+    if (!i18n.exists(keyToUse)) {
       devWarn(`[i18n] Missing translation: "${key}"`);
     }
 
-    const result = i18nextT(i18nextKey, options);
+    const result = i18nextT(keyToUse, options);
+    
+    // Support returnObjects (for appearance texts etc)
+    if (options.returnObjects) {
+      return result as any;
+    }
+
     return typeof result === 'string' ? result : (options.defaultValue ?? key);
   }, [i18nextT, ready]);
 

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

@@ -42,19 +42,20 @@ export const LanguageItem: React.FC<LanguageItemProps> = ({
   const themedStyles = useMemo(() => ({
     languageItem: {
       padding: tokens.spacing.md,
-      borderRadius: tokens.borders.radius.md,
-      backgroundColor: tokens.colors.backgroundSecondary,
+      borderRadius: tokens.borders.radius.lg,
+      backgroundColor: tokens.colors.surface,
       borderColor: tokens.colors.border,
-      marginBottom: tokens.spacing.sm,
+      borderWidth: 1,
+      marginBottom: tokens.spacing.md,
     } as ViewStyle,
     selectedLanguageItem: {
       borderColor: tokens.colors.primary,
-      backgroundColor: tokens.colors.primaryContainer,
-      borderWidth: 2,
+      backgroundColor: tokens.colors.surfaceVariant,
+      borderWidth: 1.5,
     } as ViewStyle,
     nativeName: {
-      color: tokens.colors.textPrimary,
-      marginBottom: tokens.spacing.xs / 2,
+      color: "#FFFFFF",
+      marginBottom: 2,
     } as TextStyle,
     languageName: {
       color: tokens.colors.textSecondary,
@@ -76,19 +77,18 @@ export const LanguageItem: React.FC<LanguageItemProps> = ({
       activeOpacity={0.7}
     >
       <View style={[styles.languageContent, customStyles?.languageContent]}>
-        <AtomicText style={[styles.flag, customStyles?.flag]}>
+        <AtomicText style={[styles.flag, { fontSize: 28 }, customStyles?.flag]}>
           {item.flag || '🌐'}
         </AtomicText>
-        <View style={[styles.languageText, { gap: tokens.spacing.xs / 2 }, customStyles?.languageText]}>
+        <View style={[styles.languageText, { gap: 4 }, customStyles?.languageText]}>
           <AtomicText 
-            type="bodyMedium" 
-            style={[themedStyles.nativeName, { fontWeight: '700' }, customStyles?.nativeName]}
+            style={[themedStyles.nativeName, { fontWeight: '700', fontSize: 17, color: '#FFFFFF' }, customStyles?.nativeName]}
           >
             {item.nativeName}
           </AtomicText>
           <AtomicText 
             type="labelMedium" 
-            style={[themedStyles.languageName, customStyles?.nativeName]}
+            style={[themedStyles.languageName, { fontSize: 13, color: '#E8B4B8', opacity: 0.8 }, customStyles?.nativeName]}
           >
             {item.name}
           </AtomicText>

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

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { FlatList } from 'react-native';
+import { FlatList, View } from 'react-native';
 import { ScreenLayout } from '@umituz/react-native-design-system/layouts';
 import { SearchBar, NavigationHeader, useAppNavigation } from '@umituz/react-native-design-system/molecules';
 import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
@@ -14,6 +14,10 @@ import type { Language } from '../../infrastructure/storage/types/Language';
 import type { LanguageSelectionScreenProps } from './LanguageSelectionScreen.types';
 import { styles } from './LanguageSelectionScreen.styles';
 
+export interface LanguageSelectionProps extends LanguageSelectionScreenProps {
+  showHeader?: boolean;
+}
+
 interface LanguageListItemProps {
   item: Language;
   selectedCode: string;
@@ -67,26 +71,45 @@ const LanguageSearchComponent: React.FC<LanguageSearchComponentProps> = ({
   }
 
   return (
-    <SearchBar
-      value={searchQuery}
-      onChangeText={setSearchQuery}
-      placeholder={searchPlaceholder}
-      containerStyle={[
-        { marginBottom: tokens.spacing.md },
-        customStyles?.searchContainer
-      ]}
-      inputStyle={customStyles?.searchInput}
-    />
+    <View style={{ paddingHorizontal: 20 }}>
+      <SearchBar
+        value={searchQuery}
+        onChangeText={setSearchQuery}
+        placeholder={searchPlaceholder}
+        containerStyle={[
+          {
+            marginBottom: 20,
+            backgroundColor: 'transparent',
+            borderBottomWidth: 0,
+            paddingHorizontal: 0,
+          },
+          customStyles?.searchContainer
+        ]}
+        inputStyle={[
+          {
+            backgroundColor: '#2D1518',
+            borderRadius: 24,
+            color: '#FFFFFF',
+            paddingHorizontal: 16,
+            height: 52,
+            borderWidth: 1,
+            borderColor: '#3D2022',
+          },
+          customStyles?.searchInput
+        ]}
+      />
+    </View>
   );
 };
 
-export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = ({
+export const LanguageSelectionScreen: React.FC<LanguageSelectionProps> = ({
   renderLanguageItem,
   renderSearchInput,
   headerTitle,
   onBackPress,
   styles: customStyles,
   searchPlaceholder,
+  showHeader = true,
   testID = 'language-selection-screen',
 }) => {
   const tokens = useAppDesignTokens();
@@ -130,10 +153,12 @@ export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = (
       edges={['top', 'bottom', 'left', 'right']}
       backgroundColor={tokens.colors.backgroundPrimary}
       header={
-        <NavigationHeader
-          title={headerTitle || ""}
-          onBackPress={handleBack}
-        />
+        showHeader ? (
+          <NavigationHeader
+            title={headerTitle || ""}
+            onBackPress={handleBack}
+          />
+        ) : null
       }
       containerStyle={customStyles?.container}
     >

package/src/infrastructure/utils/configFactory.ts

@@ -21,7 +21,7 @@ export interface BaseConfigType {
  * Configuration parameters for creating a settings item config
  */
 export interface ConfigCreatorParams {
-  icon: string;
+  icon?: string;
   routeOrOnPress?: string | (() => void);
   defaultRoute?: string;
 }

package/src/presentation/components/SettingsItemCard.tsx

@@ -12,7 +12,7 @@ import { SettingsItemCardSection } from "./settings/SettingsItemCardSection";
 export interface SettingsItemCardProps {
   title: string;
   description?: string;
-  icon: IconName;
+  icon?: IconName;
   onPress?: () => void;
   containerStyle?: StyleProp<ViewStyle>;
   sectionTitle?: string;

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

@@ -4,7 +4,7 @@ import { AtomicIcon, AtomicText, type IconName } from "@umituz/react-native-desi
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 
 export interface SettingsItemCardContentProps {
-  icon: IconName;
+  icon?: IconName;
   title: string;
   description?: string;
   iconBgColor: string;
@@ -26,9 +26,11 @@ export const SettingsItemCardContent: React.FC<SettingsItemCardContentProps> = R
 
   return (
     <View style={styles.content}>
-      <View style={[styles.iconContainer, { backgroundColor: iconBgColor, borderRadius: tokens.borders.radius.md }]}>
-        <AtomicIcon name={icon} size="lg" customColor={iconColor} />
-      </View>
+      {!!icon && (
+        <View style={[styles.iconContainer, { backgroundColor: iconBgColor, borderRadius: tokens.borders.radius.md }]}>
+          <AtomicIcon name={icon} size="lg" customColor={iconColor} />
+        </View>
+      )}
       <View style={styles.textContainer}>
         <AtomicText
           type="bodyLarge"

package/src/presentation/hooks/useSettingsScreenConfig.ts

@@ -35,6 +35,21 @@ export interface UseSettingsScreenConfigParams {
   additionalScreens?: AdditionalScreen[];
   features?: SettingsFeatures;
   translations?: SettingsTranslations;
+  /** Optional auth data for apps that use authentication */
+  auth?: {
+    user: {
+      displayName?: string;
+      userId?: string;
+      photoURL?: string;
+      isAnonymous?: boolean;
+    } | null;
+    isLoading?: boolean;
+    isAuthReady?: boolean;
+    onSignIn: () => void;
+    onLogout: () => Promise<void>;
+    onDeleteAccount: () => Promise<void>;
+    accountTranslations?: AccountTranslations;
+  };
 }
 
 export interface SettingsScreenConfigResult {
@@ -49,7 +64,15 @@ export interface SettingsScreenConfigResult {
 export const useSettingsScreenConfig = (
   params: UseSettingsScreenConfigParams
 ): SettingsScreenConfigResult => {
-  const { appInfo, faqData, isPremium, onFeedbackSubmit, features = {}, translations } = params;
+  const { 
+    appInfo, 
+    faqData, 
+    isPremium, 
+    onFeedbackSubmit, 
+    features = {}, 
+    translations,
+    auth
+  } = params;
 
   const {
     notifications: showNotifications = true,
@@ -65,26 +88,13 @@ export const useSettingsScreenConfig = (
     subscription: showSubscription = true,
   } = features;
 
-  // No-auth version - always ready
-  const loading = false;
-  const isAuthReady = true;
+  // Auth orchestration
+  const loading = auth?.isLoading ?? false;
+  const isAuthReady = auth?.isAuthReady ?? true;
 
-  // Default handlers (no-ops for no-auth version)
   const handleRatePress = useMemo(() => async () => {
-    // Default rate behavior - could be implemented with expo-store-review
-    console.warn("[useSettingsScreenConfig] Rate press handler not implemented in no-auth version");
-  }, []);
-
-  const handleSignOut = useMemo(() => async () => {
-    // No-op in no-auth version
-  }, []);
-
-  const handleDeleteAccount = useMemo(() => async () => {
-    // No-op in no-auth version
-  }, []);
-
-  const handleSignIn = useMemo(() => async () => {
-    // No-op in no-auth version
+    // Default rate behavior - typically handled by app or a separate rating hook
+    console.log("[useSettingsScreenConfig] Rate pressed");
   }, []);
 
   // Use settings config factory
@@ -114,11 +124,11 @@ export const useSettingsScreenConfig = (
       translations,
     };
 
+    // Apply translations to specific features if available
     if (config.subscription && typeof config.subscription === 'object') {
       config.subscription = {
         ...config.subscription,
-        enabled: true,
-        title: translations?.features?.subscription?.title || config.subscription.title || "Subscription",
+        title: translations?.features?.subscription?.title || config.subscription.title,
         description: translations?.features?.subscription?.description || config.subscription.description,
       };
     }
@@ -127,8 +137,7 @@ export const useSettingsScreenConfig = (
       const existingConfig = typeof config.gamification === 'object' ? config.gamification : { enabled: true };
       config.gamification = {
         ...existingConfig,
-        enabled: true,
-        title: translations?.features?.gamification?.title || existingConfig.title || "Your Progress",
+        title: translations?.features?.gamification?.title || existingConfig.title,
         description: translations?.features?.gamification?.description || existingConfig.description,
       };
     }
@@ -137,8 +146,7 @@ export const useSettingsScreenConfig = (
       const existingConfig = typeof config.videoTutorial === 'object' ? config.videoTutorial : { enabled: true };
       config.videoTutorial = {
         ...existingConfig,
-        enabled: true,
-        title: translations?.features?.videoTutorial?.title || existingConfig.title || "Video Tutorials",
+        title: translations?.features?.videoTutorial?.title || existingConfig.title,
         description: translations?.features?.videoTutorial?.description || existingConfig.description,
       };
     }
@@ -146,24 +154,28 @@ export const useSettingsScreenConfig = (
     return config;
   }, [baseSettingsConfig, translations]);
 
-  // Empty user profile (no-auth version)
+  // User profile display configuration
   const userProfile = useMemo(() => createUserProfileDisplay({
-    profileData: null,
-    onSignIn: handleSignIn,
-  }), [handleSignIn]);
-
-  // Minimal account config (no-auth version)
+    profileData: auth?.user ? {
+      displayName: auth.user.displayName,
+      userId: auth.user.userId,
+      isAnonymous: auth.user.isAnonymous,
+      avatarUrl: auth.user.photoURL,
+    } : null,
+    onSignIn: auth?.onSignIn || (() => {}),
+  }), [auth?.user, auth?.onSignIn]);
+
+  // Account screen configuration
   const accountConfig = useMemo(() => createAccountConfig({
-    displayName: undefined,
-    userId: undefined,
-    photoURL: undefined,
-    isAnonymous: true,
-    avatarUrl: undefined,
-    onSignIn: handleSignIn,
-    onLogout: handleSignOut,
-    onDeleteAccount: handleDeleteAccount,
-    translations: undefined,
-  }), [handleSignIn, handleSignOut, handleDeleteAccount]);
+    displayName: auth?.user?.displayName,
+    userId: auth?.user?.userId,
+    photoURL: auth?.user?.photoURL,
+    isAnonymous: auth?.user?.isAnonymous,
+    onSignIn: auth?.onSignIn || (() => {}),
+    onLogout: auth?.onLogout || (async () => {}),
+    onDeleteAccount: auth?.onDeleteAccount || (async () => {}),
+    translations: auth?.accountTranslations,
+  }), [auth?.user, auth?.onSignIn, auth?.onLogout, auth?.onDeleteAccount, auth?.accountTranslations]);
 
   return {
     settingsConfig,

package/src/presentation/utils/config-creators/base-configs.ts

@@ -20,7 +20,6 @@ export const createAppearanceConfig = (
   routeOrOnPress?: string | (() => void),
 ): AppearanceConfig => {
   return createBaseConfig<AppearanceConfig>({
-    icon: "color-palette-outline",
     routeOrOnPress,
   });
 };
@@ -32,7 +31,6 @@ export const createLanguageConfig = (
   routeOrOnPress?: string | (() => void),
 ): LanguageConfig => {
   return createBaseConfig<LanguageConfig>({
-    icon: "globe-outline",
     routeOrOnPress,
   });
 };
@@ -45,7 +43,6 @@ export const createNotificationsConfig = (
 ): NotificationsConfig => {
   return createConfigWithExtensions<NotificationsConfig>(
     {
-      icon: "notifications-outline",
       routeOrOnPress,
       defaultRoute: "Notifications",
     },
@@ -62,7 +59,6 @@ export const createAboutConfig = (
   routeOrOnPress?: string | (() => void),
 ): AboutConfig => {
   return createBaseConfig<AboutConfig>({
-    icon: "information-circle-outline",
     routeOrOnPress,
   });
 };
@@ -74,7 +70,6 @@ export const createLegalConfig = (
   routeOrOnPress?: string | (() => void),
 ): LegalConfig => {
   return createBaseConfig<LegalConfig>({
-    icon: "document-text-outline",
     routeOrOnPress,
   });
 };

package/src/presentation/utils/config-creators/feature-configs.ts

@@ -21,7 +21,6 @@ export const createSubscriptionConfig = (
   routeOrOnPress: keyof SettingsStackParamList | (() => void),
 ): SubscriptionConfig => ({
   enabled: true,
-  icon: "diamond",
   route: typeof routeOrOnPress === "function" ? undefined : routeOrOnPress,
   onPress: typeof routeOrOnPress === "function" ? routeOrOnPress : undefined,
   isPremium,

package/src/presentation/utils/config-creators/support-configs.ts

@@ -17,7 +17,6 @@ export const createFeedbackConfig = (
   onSubmit: (data: FeedbackFormData) => Promise<void>,
 ): FeedbackConfig => ({
   enabled: true,
-  icon: "chatbubble-outline",
   onSubmit,
 });
 
@@ -39,5 +38,4 @@ export const createRatingConfig = (
  */
 export const createFAQConfig = (): FAQConfig => ({
   enabled: true,
-  icon: "help-circle-outline",
 });