@umituz/react-native-settings 4.21.8 → 4.21.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.21.8",
+  "version": "4.21.10",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -10,7 +10,7 @@ import { createStackNavigator } from "@react-navigation/stack";
 import { useLocalization, LanguageSelectionScreen } from "@umituz/react-native-localization";
 import { NotificationSettingsScreen } from "@umituz/react-native-notifications";
 import { AccountScreen } from "@umituz/react-native-auth";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, createScreenOptions } from "@umituz/react-native-design-system";
 import { AppearanceScreen } from "../screens/AppearanceScreen";
 import { FAQScreen } from "../../domains/faqs";
 import { useNavigationHandlers } from "./hooks";
@@ -23,16 +23,6 @@ import {
   createNotificationTranslations,
   createQuietHoursTranslations,
   createLegalScreenProps,
-  createScreenOptions,
-  createAppearanceScreenOptions,
-  createAboutScreenOptions,
-  createLegalScreenOptions,
-  createNotificationsScreenOptions,
-  createFAQScreenOptions,
-  createLanguageSelectionScreenOptions,
-  createGamificationScreenOptions,
-  createAccountScreenOptions,
-  createSettingsMainScreenOptions,
 } from "./utils";
 import type { SettingsStackParamList, SettingsStackNavigatorProps } from "./types";
 import { GamificationScreenWrapper } from "../../domains/gamification";
@@ -58,7 +48,18 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
   const { handlePrivacyPress, handleTermsPress, handleEulaPress, aboutConfig } =
     useNavigationHandlers(appInfo, legalUrls);
 
-  const screenOptions = React.useMemo(() => createScreenOptions(tokens, t), [tokens, t]);
+  const screenOptions = React.useMemo(
+    () =>
+      createScreenOptions({
+        colors: {
+          surface: tokens.colors.surface,
+          textPrimary: tokens.colors.textPrimary,
+          borderLight: tokens.colors.borderLight,
+        },
+        backTitle: t("settings.title"),
+      }),
+    [tokens, t]
+  );
   const notificationTranslations = React.useMemo(() => createNotificationTranslations(t), [t]);
   const quietHoursTranslations = React.useMemo(() => createQuietHoursTranslations(t), [t]);
   const legalScreenProps = React.useMemo(
@@ -70,7 +71,7 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
     <Stack.Navigator screenOptions={screenOptions}>
       <Stack.Screen
         name="SettingsMain"
-        options={showHeader ? createSettingsMainScreenOptions(t) : { headerShown: false }}
+        options={showHeader ? { headerTitle: t("settings.title") } : { headerShown: false }}
       >
         {() => (
           <SettingsScreenWrapper
@@ -88,26 +89,20 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
       <Stack.Screen
         name="Appearance"
         component={AppearanceScreen}
-        options={createAppearanceScreenOptions(t)}
+        options={{ headerTitle: t("settings.appearance.title") }}
       />
 
-      <Stack.Screen
-        name="About"
-        options={createAboutScreenOptions(t)}
-      >
+      <Stack.Screen name="About" options={{ headerTitle: t("settings.about.title") }}>
         {() => <AboutScreenWrapper config={aboutConfig} />}
       </Stack.Screen>
 
-      <Stack.Screen
-        name="Legal"
-        options={createLegalScreenOptions(t)}
-      >
+      <Stack.Screen name="Legal" options={{ headerTitle: t("settings.legal.title") }}>
         {() => <LegalScreenWrapper {...legalScreenProps} />}
       </Stack.Screen>
 
       <Stack.Screen
         name="Notifications"
-        options={createNotificationsScreenOptions(t)}
+        options={{ headerTitle: t("settings.notifications.title") }}
       >
         {() => (
           <NotificationSettingsScreen
@@ -118,7 +113,7 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
       </Stack.Screen>
 
       {faqData && faqData.categories.length > 0 && (
-        <Stack.Screen name="FAQ" options={createFAQScreenOptions(t)}>
+        <Stack.Screen name="FAQ" options={{ headerTitle: t("settings.faqs.title") }}>
           {() => (
             <FAQScreen
               categories={faqData.categories}
@@ -153,7 +148,7 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
       {gamificationConfig?.enabled && (
         <Stack.Screen
           name="Gamification"
-          options={createGamificationScreenOptions(t)}
+          options={{ headerTitle: t("settings.gamification.title") }}
         >
           {() => <GamificationScreenWrapper config={gamificationConfig} />}
         </Stack.Screen>
@@ -161,7 +156,7 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
 
       <Stack.Screen
         name="LanguageSelection"
-        options={createLanguageSelectionScreenOptions(t)}
+        options={{ headerTitle: t("settings.language.title") }}
       >
         {() => (
           <LanguageSelectionScreen
@@ -171,10 +166,7 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
       </Stack.Screen>
 
       {accountConfig && (
-        <Stack.Screen
-          name="Account"
-          options={createAccountScreenOptions(t)}
-        >
+        <Stack.Screen name="Account" options={{ headerTitle: t("settings.account.title") }}>
           {() => <AccountScreen config={accountConfig} />}
         </Stack.Screen>
       )}

package/src/presentation/navigation/utils/index.ts

@@ -2,4 +2,3 @@
  * Navigation Utilities
  */
 export * from './navigationTranslations';
-export * from './navigationScreenOptions';

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

@@ -34,6 +34,26 @@ const WalletSettingsItem: React.FC<{ config: WalletConfig; t: (key: string) => s
   );
 };
 
+const SubscriptionSettingsItem: React.FC<{ config: any; t: (key: string) => string }> = ({ config, t }) => {
+  const navigation = useNavigation();
+  const handlePress = () => {
+    if (config.route) {
+      navigation.navigate(config.route as never);
+    } else if (config.onPress) {
+      config.onPress();
+    }
+  };
+  return (
+    <SettingsItemCard
+      title={config.title || t("settings.subscription.title")}
+      description={config.description || t("settings.subscription.description")}
+      icon={(config.icon || "star") as IconName}
+      onPress={handlePress}
+      sectionTitle={config.sectionTitle}
+    />
+  );
+};
+
 interface SettingsContentProps {
   normalizedConfig: NormalizedConfig;
   config?: any;
@@ -98,14 +118,8 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
 
       <CustomSettingsList customSections={customSections} />
 
-      {features.subscription && normalizedConfig.subscription.config?.onPress && (
-        <SettingsItemCard
-          title={normalizedConfig.subscription.config.title || t("settings.subscription.title")}
-          description={normalizedConfig.subscription.config.description || t("settings.subscription.description")}
-          icon={(normalizedConfig.subscription.config.icon || "star") as IconName}
-          onPress={normalizedConfig.subscription.config.onPress}
-          sectionTitle={normalizedConfig.subscription.config.sectionTitle}
-        />
+      {features.subscription && (normalizedConfig.subscription.config?.route || normalizedConfig.subscription.config?.onPress) && (
+        <SubscriptionSettingsItem config={normalizedConfig.subscription.config} t={t} />
       )}
 
       {features.wallet && normalizedConfig.wallet.config?.route && (

package/src/presentation/screens/types/UserFeatureConfig.ts

@@ -112,7 +112,9 @@ export interface SubscriptionConfig {
   icon?: string;
   /** Custom section title for grouping */
   sectionTitle?: string;
-  /** Handler to open subscription screen */
+  /** Navigation route for subscription screen (preferred over onPress) */
+  route?: string;
+  /** Handler to open subscription screen (use route instead for stack navigation) */
   onPress?: () => void;
   /** Whether user is premium (to show active status) */
   isPremium?: boolean;

package/src/presentation/utils/configCreators.ts

@@ -130,11 +130,13 @@ export const createFAQConfig = (
 
 /**
  * Create subscription configuration
+ * @param route - Navigation route name (preferred for stack navigation)
+ * @param onPress - Callback function (use route instead when possible)
  */
 export const createSubscriptionConfig = (
   t: TranslationFunction,
   isPremium: boolean,
-  onPress: () => void,
+  routeOrOnPress: string | (() => void),
 ): SubscriptionConfig => ({
   enabled: true,
   title: t("settings.subscription.title"),
@@ -143,6 +145,7 @@ export const createSubscriptionConfig = (
     : t("settings.subscription.description"),
   icon: "diamond",
   sectionTitle: t("settings.sections.subscription").toUpperCase(),
-  onPress,
+  route: typeof routeOrOnPress === "string" ? routeOrOnPress : undefined,
+  onPress: typeof routeOrOnPress === "function" ? routeOrOnPress : undefined,
   isPremium,
 });

package/src/presentation/navigation/utils/navigationScreenOptions.ts

@@ -1,82 +0,0 @@
-/**
- * Navigation Screen Options Utility
- * Creates screen options for settings navigation
- */
-
-import type { DesignTokens } from "@umituz/react-native-design-system";
-
-type TranslationFunction = (key: string) => string;
-
-export const createScreenOptions = (tokens: DesignTokens, t: TranslationFunction) => ({
-  headerStyle: {
-    backgroundColor: tokens.colors.surface,
-    borderBottomColor: tokens.colors.borderLight,
-    borderBottomWidth: 1,
-  },
-  headerTitleStyle: {
-    fontSize: 18,
-    fontWeight: "600" as const,
-    color: tokens.colors.textPrimary,
-  },
-  headerTintColor: tokens.colors.textPrimary,
-  headerBackTitle: t("settings.title"),
-  headerBackTitleStyle: {
-    fontSize: 16,
-    color: tokens.colors.textPrimary,
-  },
-});
-
-export const createAppearanceScreenOptions = (t: any) => ({
-  headerShown: true,
-  headerTitle: t("settings.appearance.title"),
-  headerTitleAlign: "center" as const,
-});
-
-export const createAboutScreenOptions = (t: any) => ({
-  headerShown: true,
-  headerTitle: t("settings.about.title"),
-  headerTitleAlign: "center" as const,
-});
-
-export const createLegalScreenOptions = (t: any) => ({
-  headerShown: true,
-  headerTitle: t("settings.legal.title"),
-  headerTitleAlign: "center" as const,
-});
-
-export const createNotificationsScreenOptions = (t: any) => ({
-  headerShown: true,
-  headerTitle: t("settings.notifications.title"),
-  headerTitleAlign: "center" as const,
-});
-
-export const createFAQScreenOptions = (t: any) => ({
-  headerShown: true,
-  headerTitle: t("settings.faqs.title"),
-  headerTitleAlign: "center" as const,
-});
-
-export const createLanguageSelectionScreenOptions = (t: any) => ({
-  headerShown: true,
-  headerTitle: t("settings.language.title"),
-  headerTitleAlign: "center" as const,
-});
-
-export const createGamificationScreenOptions = (t: any) => ({
-  headerShown: true,
-  headerTitle: t("settings.gamification.title"),
-  headerTitleAlign: "center" as const,
-});
-
-export const createAccountScreenOptions = (t: any) => ({
-  headerShown: true,
-  headerTitle: t("settings.account.title"),
-  headerTitleAlign: "center" as const,
-});
-
-export const createSettingsMainScreenOptions = (t: any) => ({
-  headerShown: true,
-  headerTitle: t("settings.title"),
-  headerTitleAlign: "center" as const,
-});
-