@umituz/react-native-settings 4.21.19 → 4.21.21

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -6,15 +6,10 @@
  */
 
 import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { useAppDesignTokens, StackNavigator, type StackScreen, type StackNavigatorConfig } from "@umituz/react-native-design-system";
 import { useLocalization, LanguageSelectionScreen } from "@umituz/react-native-localization";
 import { NotificationSettingsScreen } from "../../domains/notifications";
 import { AccountScreen } from "@umituz/react-native-auth";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-
-// ...
-
-
 import { AppearanceScreen } from "../screens/AppearanceScreen";
 import { FAQScreen } from "../../domains/faqs";
 import { useNavigationHandlers } from "./hooks";
@@ -31,8 +26,6 @@ import {
 import type { SettingsStackParamList, SettingsStackNavigatorProps } from "./types";
 import { GamificationScreenWrapper } from "../../domains/gamification";
 
-const Stack = createStackNavigator<SettingsStackParamList>();
-
 export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
   appInfo,
   legalUrls,
@@ -70,6 +63,7 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
     }),
     [tokens, t]
   );
+
   const notificationTranslations = React.useMemo(() => createNotificationTranslations(t), [t]);
   const quietHoursTranslations = React.useMemo(() => createQuietHoursTranslations(t), [t]);
   const legalScreenProps = React.useMemo(
@@ -77,13 +71,12 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
     [t, handlePrivacyPress, handleTermsPress, handleEulaPress]
   );
 
-  return (
-    <Stack.Navigator screenOptions={screenOptions}>
-      <Stack.Screen
-        name="SettingsMain"
-        options={showHeader ? { headerTitle: t("settings.title") } : { headerShown: false }}
-      >
-        {() => (
+  const screens = React.useMemo(() => {
+    const list: StackScreen<any>[] = [
+      {
+        name: "SettingsMain",
+        options: showHeader ? { headerTitle: t("settings.title") } : { headerShown: false },
+        children: () => (
           <SettingsScreenWrapper
             config={config}
             appVersion={appInfo.version}
@@ -93,94 +86,113 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
             customSections={customSections}
             showHeader={showHeader}
           />
-        )}
-      </Stack.Screen>
-
-      <Stack.Screen
-        name="Appearance"
-        component={AppearanceScreen}
-        options={{ headerShown: false }}
-      />
-
-      <Stack.Screen name="About" options={{ headerTitle: t("settings.about.title") }}>
-        {() => <AboutScreenWrapper config={aboutConfig} />}
-      </Stack.Screen>
-
-      <Stack.Screen name="Legal" options={{ headerTitle: t("settings.legal.title") }}>
-        {() => <LegalScreenWrapper {...legalScreenProps} />}
-      </Stack.Screen>
-
-      <Stack.Screen
-        name="Notifications"
-        options={{ headerShown: false }}
-      >
-        {() => (
+        ),
+      },
+      {
+        name: "Appearance",
+        component: AppearanceScreen,
+        options: { headerShown: false },
+      },
+      {
+        name: "About",
+        options: { headerTitle: t("settings.about.title") },
+        children: () => <AboutScreenWrapper config={aboutConfig} />,
+      },
+      {
+        name: "Legal",
+        options: { headerTitle: t("settings.legal.title") },
+        children: () => <LegalScreenWrapper {...legalScreenProps} />,
+      },
+      {
+        name: "Notifications",
+        options: { headerShown: false },
+        children: () => (
           <NotificationSettingsScreen
             translations={notificationTranslations}
             quietHoursTranslations={quietHoursTranslations}
           />
-        )}
-      </Stack.Screen>
-
-      {faqData && faqData.categories.length > 0 && (
-        <Stack.Screen name="FAQ" options={{ headerTitle: t("settings.faqs.title") }}>
-          {() => (
-            <FAQScreen
-              categories={faqData.categories}
-              searchPlaceholder={t("settings.faqs.searchPlaceholder")}
-              emptySearchTitle={t("settings.faqs.emptySearchTitle")}
-              emptySearchMessage={t("settings.faqs.emptySearchMessage")}
-              headerTitle={t("settings.faqs.headerTitle")}
-            />
-          )}
-        </Stack.Screen>
-      )}
-
-      {additionalScreens.map((screen) =>
-        screen.children ? (
-          <Stack.Screen
-            key={screen.name}
-            name={screen.name as keyof SettingsStackParamList}
-            options={screen.options}
-          >
-            {screen.children}
-          </Stack.Screen>
-        ) : screen.component ? (
-          <Stack.Screen
-            key={screen.name}
-            name={screen.name as keyof SettingsStackParamList}
-            component={screen.component}
-            options={screen.options}
-          />
-        ) : null
-      )}
-
-      {gamificationConfig?.enabled && (
-        <Stack.Screen
-          name="Gamification"
-          options={{ headerTitle: t("settings.gamification.title") }}
-        >
-          {() => <GamificationScreenWrapper config={gamificationConfig} />}
-        </Stack.Screen>
-      )}
-
-      <Stack.Screen
-        name="LanguageSelection"
-        options={{ headerShown: false }}
-      >
-        {() => (
-          <LanguageSelectionScreen
-            headerTitle={t("settings.language.title")}
-            searchPlaceholder={t("settings.languageSelection.searchPlaceholder")}
+        ),
+      },
+    ];
+
+    if (faqData && faqData.categories.length > 0) {
+      list.push({
+        name: "FAQ",
+        options: { headerTitle: t("settings.faqs.title") },
+        children: () => (
+          <FAQScreen
+            categories={faqData.categories}
+            searchPlaceholder={t("settings.faqs.searchPlaceholder")}
+            emptySearchTitle={t("settings.faqs.emptySearchTitle")}
+            emptySearchMessage={t("settings.faqs.emptySearchMessage")}
+            headerTitle={t("settings.faqs.headerTitle")}
           />
-        )}
-      </Stack.Screen>
-
-      {accountConfig && (
-        <Stack.Screen name="Account" options={{ headerTitle: t("settings.account.title") }}>
-          {() => <AccountScreen config={accountConfig} />}
-        </Stack.Screen>
-      )}
-    </Stack.Navigator>
-  );
+        ),
+      });
+    }
+
+    // Add additional screens
+    additionalScreens.forEach((screen) => {
+      list.push({
+        name: screen.name as keyof SettingsStackParamList,
+        component: screen.component as any,
+        children: screen.children as any,
+        options: screen.options as any,
+      });
+    });
+
+    if (gamificationConfig?.enabled) {
+      list.push({
+        name: "Gamification",
+        options: { headerTitle: t("settings.gamification.title") },
+        children: () => <GamificationScreenWrapper config={gamificationConfig} />,
+      });
+    }
+
+    list.push({
+      name: "LanguageSelection",
+      options: { headerShown: false },
+      children: () => (
+        <LanguageSelectionScreen
+          headerTitle={t("settings.language.title")}
+          searchPlaceholder={t("settings.languageSelection.searchPlaceholder")}
+        />
+      ),
+    });
+
+    if (accountConfig) {
+      list.push({
+        name: "Account",
+        options: { headerTitle: t("settings.account.title") },
+        children: () => <AccountScreen config={accountConfig} />,
+      });
+    }
+
+    return list;
+  }, [
+    t,
+    showHeader,
+    config,
+    appInfo.version,
+    showUserProfile,
+    userProfile,
+    devSettings,
+    customSections,
+    aboutConfig,
+    legalScreenProps,
+    notificationTranslations,
+    quietHoursTranslations,
+    faqData,
+    additionalScreens,
+    gamificationConfig,
+    accountConfig,
+  ]);
+
+  const navigatorConfig: StackNavigatorConfig<SettingsStackParamList> = {
+    initialRouteName: "SettingsMain",
+    screenOptions: screenOptions as any,
+    screens,
+  };
+
+  return <StackNavigator<any> config={navigatorConfig as any} />;
 };

package/src/presentation/screens/SettingsScreen.tsx

@@ -5,10 +5,10 @@
 
 import React from "react";
 import { View, StatusBar, StyleSheet } from "react-native";
-import { useNavigation } from "@react-navigation/native";
 import {
   useAppDesignTokens,
   ScreenLayout,
+  useAppNavigation,
 } from "@umituz/react-native-design-system";
 import { SettingsHeader } from "./components/SettingsHeader";
 import { SettingsContent } from "./components/SettingsContent";
@@ -72,7 +72,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   devSettings,
   gamificationConfig,
 }) => {
-  const navigation = useNavigation();
+  const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
 
   const normalizedConfig = normalizeSettingsConfig(config);

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

@@ -1,8 +1,8 @@
 import React from "react";
 // @ts-ignore - Optional peer dependency
-import { useNavigation } from "@react-navigation/native";
-import { SettingsItemCard } from "../../components/SettingsItemCard";
+import { useAppNavigation } from "@umituz/react-native-design-system";
 import type { IconName } from "@umituz/react-native-design-system";
+import { SettingsItemCard } from "../../components/SettingsItemCard";
 import { useGamification } from "../../../domains/gamification";
 
 export interface GamificationSettingsItemProps {
@@ -16,7 +16,7 @@ export const GamificationSettingsItem: React.FC<GamificationSettingsItemProps> =
   gamificationConfig, 
   t 
 }) => {
-  const navigation = useNavigation();
+  const navigation = useAppNavigation();
   const { level } = useGamification(gamificationConfig);
   
   const handlePress = () => {

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

@@ -5,8 +5,7 @@
 
 import React from "react";
 import { View, Pressable, StyleSheet } from "react-native";
-import { useNavigation } from "@react-navigation/native";
-import { useAppDesignTokens, AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicIcon, AtomicText, useAppNavigation } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 
 interface SettingsHeaderProps {
@@ -18,7 +17,7 @@ export const SettingsHeader: React.FC<SettingsHeaderProps> = ({
   showCloseButton = false,
   onClose,
 }) => {
-  const navigation = useNavigation();
+  const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
   const { t } = useLocalization();
 

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

@@ -1,6 +1,6 @@
 import React from "react";
 // @ts-ignore - Optional peer dependency
-import { useNavigation } from "@react-navigation/native";
+import { useAppNavigation } from "@umituz/react-native-design-system";
 import { SettingsItemCard } from "../../components/SettingsItemCard";
 import type { IconName } from "@umituz/react-native-design-system";
 
@@ -10,7 +10,7 @@ export interface SubscriptionSettingsItemProps {
 }
 
 export const SubscriptionSettingsItem: React.FC<SubscriptionSettingsItemProps> = ({ config, t }) => {
-  const navigation = useNavigation();
+  const navigation = useAppNavigation();
   const handlePress = () => {
     if (config.route) {
       navigation.navigate(config.route as never);

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

@@ -1,6 +1,6 @@
 import React from "react";
 // @ts-ignore - Optional peer dependency
-import { useNavigation } from "@react-navigation/native";
+import { useAppNavigation } from "@umituz/react-native-design-system";
 import { SettingsItemCard } from "../../components/SettingsItemCard";
 import type { IconName } from "@umituz/react-native-design-system";
 
@@ -10,7 +10,7 @@ export interface WalletSettingsItemProps {
 }
 
 export const WalletSettingsItem: React.FC<WalletSettingsItemProps> = ({ config, t }) => {
-  const navigation = useNavigation();
+  const navigation = useAppNavigation();
   const handlePress = () => {
     if (config.route) {
       navigation.navigate(config.route as never);

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { useNavigation } from "@react-navigation/native";
+import { useAppNavigation } from "@umituz/react-native-design-system";
 import { AppearanceSection } from "../../../../domains/appearance/presentation/components/AppearanceSection";
 import { NotificationsSection } from "../../../../domains/notifications";
 import { useLocalization, getLanguageByCode } from "@umituz/react-native-localization";
@@ -20,7 +20,7 @@ export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
   features,
 }) => {
   const { t, currentLanguage } = useLocalization();
-  const navigation = useNavigation();
+  const navigation = useAppNavigation();
 
   const handleLanguagePress = () => {
     const route = normalizedConfig.language.config?.route || "LanguageSelection";

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

@@ -1,8 +1,8 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { useNavigation } from "@react-navigation/native";
 import { ProfileSection } from "@umituz/react-native-auth";
 import { useLocalization } from "@umituz/react-native-localization";
+import { useAppNavigation } from "@umituz/react-native-design-system";
 
 export interface ProfileSectionLoaderProps {
     userProfile?: {
@@ -19,7 +19,7 @@ export interface ProfileSectionLoaderProps {
 
 export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = ({ userProfile }) => {
     const { t } = useLocalization();
-    const navigation = useNavigation<any>();
+    const navigation = useAppNavigation();
 
     if (!userProfile) return null;
 

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

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
-import { useNavigation } from "@react-navigation/native";
 import { useLocalization } from "@umituz/react-native-localization";
+import { useAppNavigation } from "@umituz/react-native-design-system";
 import { SupportSection } from "../../../../domains/feedback/presentation/components/SupportSection";
 import { SettingsSection } from "../../../components/SettingsSection";
 import { SettingsItemCard } from "../../../components/SettingsItemCard";
@@ -15,7 +15,7 @@ export const SupportSettingsSection: React.FC<SupportSettingsSectionProps> = ({
     normalizedConfig,
 }) => {
     const { t } = useLocalization();
-    const navigation = useNavigation();
+    const navigation = useAppNavigation();
 
     const handleFAQPress = useCallback(() => {
         navigation.navigate("FAQ" as never);

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

@@ -20,7 +20,7 @@ import type {
   CloudSyncConfig,
   SubscriptionConfig,
   WalletConfig,
-  GamificationConfig,
+  GamificationItemConfig,
 } from "./UserFeatureConfig";
 
 /**
@@ -135,7 +135,7 @@ export interface SettingsConfig {
    * Gamification settings configuration
    * @default false
    */
-  gamification?: FeatureVisibility | GamificationConfig;
+  gamification?: FeatureVisibility | GamificationItemConfig;
 
   /**
    * Custom empty state text when no settings are available

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

@@ -141,9 +141,9 @@ export interface WalletConfig {
 }
 
 /**
- * Gamification Settings Configuration
+ * Gamification Settings Item Configuration
  */
-export interface GamificationConfig {
+export interface GamificationItemConfig {
   /** Show gamification section */
   enabled?: FeatureVisibility;
   /** Custom title for the gamification section */

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

@@ -20,6 +20,8 @@ export type {
   CloudSyncConfig,
   SubscriptionConfig,
   WalletConfig,
+  GamificationItemConfig,
 } from "./UserFeatureConfig";
+export type { GamificationSettingsConfig as GamificationConfig } from "../../../domains/gamification";
 export type { SettingsConfig } from "./SettingsConfig";
 export type { CustomSettingsSection } from "./CustomSection";

package/src/presentation/screens/utils/normalizeConfig.ts

@@ -17,7 +17,7 @@ import type {
   FAQConfig,
   SubscriptionConfig,
   WalletConfig,
-  GamificationConfig,
+  GamificationItemConfig,
   SettingsConfig,
 } from "../types";
 
@@ -72,7 +72,7 @@ export interface NormalizedConfig {
   };
   gamification: {
     enabled: boolean;
-    config?: GamificationConfig;
+    config?: GamificationItemConfig;
   };
 }