@umituz/react-native-settings 5.3.62 → 5.3.63

package/package.json

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