@umituz/react-native-settings 4.21.18 → 4.21.20

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";
@@ -51,6 +51,8 @@ export interface SettingsScreenProps {
   };
   /** Dev settings (only shown in __DEV__ mode) */
   devSettings?: DevSettingsProps;
+  /** Gamification configuration */
+  gamificationConfig?: import("../../domains/gamification").GamificationSettingsConfig;
   /** Show header (default: true) */
   showHeader?: boolean;
 }
@@ -68,8 +70,9 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   onClose,
   featureOptions,
   devSettings,
+  gamificationConfig,
 }) => {
-  const navigation = useNavigation();
+  const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
 
   const normalizedConfig = normalizeSettingsConfig(config);
@@ -94,6 +97,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
           customSections={customSections}
           showCloseButton={showCloseButton}
           devSettings={devSettings}
+          gamificationConfig={gamificationConfig}
         />
       </SettingsErrorBoundary>
     </ScreenLayout>

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

@@ -0,0 +1,48 @@
+import React from "react";
+// @ts-ignore - Optional peer dependency
+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 {
+  config: any;
+  gamificationConfig?: any;
+  t: (key: string) => string;
+}
+
+export const GamificationSettingsItem: React.FC<GamificationSettingsItemProps> = ({ 
+  config, 
+  gamificationConfig, 
+  t 
+}) => {
+  const navigation = useAppNavigation();
+  const { level } = useGamification(gamificationConfig);
+  
+  const handlePress = () => {
+    if (config.route) {
+      navigation.navigate(config.route as never);
+    } else {
+      navigation.navigate("Gamification" as never);
+    }
+  };
+  
+  const icon = (config.icon || "trophy-outline") as IconName;
+  const title = config.title || t("settings.gamification.title");
+  
+  // Dynamic description showing current level and points
+  const description = config.description || 
+    t("settings.gamification.description")
+      .replace("{level}", level.currentLevel.toString())
+      .replace("{points}", level.currentPoints.toString());
+
+  return (
+    <SettingsItemCard
+      title={title}
+      description={description}
+      icon={icon}
+      onPress={handlePress}
+      sectionTitle={config.sectionTitle}
+    />
+  );
+};

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

@@ -1,6 +1,5 @@
 import React, { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
-import { useNavigation } from "@react-navigation/native";
 import { useLocalization } from "@umituz/react-native-localization";
 import { SettingsFooter } from "../../components/SettingsFooter";
 import { SettingsSection } from "../../components/SettingsSection";
@@ -10,49 +9,14 @@ import { ProfileSectionLoader } from "./sections/ProfileSectionLoader";
 import { FeatureSettingsSection } from "./sections/FeatureSettingsSection";
 import { IdentitySettingsSection } from "./sections/IdentitySettingsSection";
 import { SupportSettingsSection } from "./sections/SupportSettingsSection";
-import { SettingsItemCard } from "../../components/SettingsItemCard";
-import type { IconName } from "@umituz/react-native-design-system";
 import { CustomSettingsList } from "./sections/CustomSettingsList";
 import type { NormalizedConfig } from "../utils/normalizeConfig";
-import type { CustomSettingsSection, WalletConfig } from "../types";
-
-const WalletSettingsItem: React.FC<{ config: WalletConfig; t: (key: string) => string }> = ({ config, t }) => {
-  const navigation = useNavigation();
-  const handlePress = () => {
-    if (config.route) {
-      navigation.navigate(config.route as never);
-    }
-  };
-  return (
-    <SettingsItemCard
-      title={config.title || t("wallet.title")}
-      description={config.description || t("wallet.description")}
-      icon={(config.icon || "wallet") as IconName}
-      onPress={handlePress}
-      sectionTitle={config.sectionTitle}
-    />
-  );
-};
+import type { CustomSettingsSection } from "../types";
 
-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}
-    />
-  );
-};
+// Extracted Item Components
+import { SubscriptionSettingsItem } from "./SubscriptionSettingsItem";
+import { WalletSettingsItem } from "./WalletSettingsItem";
+import { GamificationSettingsItem } from "./GamificationSettingsItem";
 
 interface SettingsContentProps {
   normalizedConfig: NormalizedConfig;
@@ -70,6 +34,7 @@ interface SettingsContentProps {
     faqs: boolean;
     subscription: boolean;
     wallet: boolean;
+    gamification: boolean;
   };
   showUserProfile?: boolean;
   userProfile?: any;
@@ -79,6 +44,7 @@ interface SettingsContentProps {
   customSections?: CustomSettingsSection[];
   showCloseButton?: boolean;
   devSettings?: DevSettingsProps;
+  gamificationConfig?: import("../../../domains/gamification").GamificationSettingsConfig;
 }
 
 export const SettingsContent: React.FC<SettingsContentProps> = ({
@@ -93,6 +59,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
   customSections = [],
   showCloseButton = false,
   devSettings,
+  gamificationConfig,
 }) => {
   const { t } = useLocalization();
 
@@ -108,6 +75,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
     features.faqs ||
     features.subscription ||
     features.wallet ||
+    features.gamification ||
     customSections.length > 0,
     [features, customSections.length]
   );
@@ -129,6 +97,14 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
         />
       )}
 
+      {features.gamification && (
+        <GamificationSettingsItem
+          config={normalizedConfig.gamification.config || {}}
+          gamificationConfig={gamificationConfig}
+          t={t}
+        />
+      )}
+
       <FeatureSettingsSection normalizedConfig={normalizedConfig} features={features} />
 
       <IdentitySettingsSection normalizedConfig={normalizedConfig} features={features} />

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

@@ -0,0 +1,30 @@
+import React from "react";
+// @ts-ignore - Optional peer dependency
+import { useAppNavigation } from "@umituz/react-native-design-system";
+import { SettingsItemCard } from "../../components/SettingsItemCard";
+import type { IconName } from "@umituz/react-native-design-system";
+
+export interface SubscriptionSettingsItemProps {
+  config: any;
+  t: (key: string) => string;
+}
+
+export const SubscriptionSettingsItem: React.FC<SubscriptionSettingsItemProps> = ({ config, t }) => {
+  const navigation = useAppNavigation();
+  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}
+    />
+  );
+};

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

@@ -0,0 +1,28 @@
+import React from "react";
+// @ts-ignore - Optional peer dependency
+import { useAppNavigation } from "@umituz/react-native-design-system";
+import { SettingsItemCard } from "../../components/SettingsItemCard";
+import type { IconName } from "@umituz/react-native-design-system";
+
+export interface WalletSettingsItemProps {
+  config: any;
+  t: (key: string) => string;
+}
+
+export const WalletSettingsItem: React.FC<WalletSettingsItemProps> = ({ config, t }) => {
+  const navigation = useAppNavigation();
+  const handlePress = () => {
+    if (config.route) {
+      navigation.navigate(config.route as never);
+    }
+  };
+  return (
+    <SettingsItemCard
+      title={config.title || t("wallet.title")}
+      description={config.description || t("wallet.description")}
+      icon={(config.icon || "wallet") as IconName}
+      onPress={handlePress}
+      sectionTitle={config.sectionTitle}
+    />
+  );
+};

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/hooks/useFeatureDetection.ts

@@ -60,6 +60,7 @@ export function useFeatureDetection(
       faqs,
       subscription,
       wallet,
+      gamification,
     } = normalizedConfig;
 
     const notificationServiceAvailable = !!options?.notificationServiceAvailable;
@@ -114,6 +115,7 @@ export function useFeatureDetection(
       faqs: faqs.enabled,
       subscription: subscription.enabled,
       wallet: wallet.enabled,
+      gamification: gamification.enabled,
     };
   }, [normalizedConfig, navigation, options]);
 }

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

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

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

@@ -139,3 +139,24 @@ export interface WalletConfig {
   /** Current balance to display */
   balance?: number;
 }
+
+/**
+ * Gamification Settings Item Configuration
+ */
+export interface GamificationItemConfig {
+  /** Show gamification section */
+  enabled?: FeatureVisibility;
+  /** Custom title for the gamification section */
+  title?: string;
+  /** Custom label for the gamification item */
+  description?: string;
+  /** Custom icon name (Ionicons) */
+  icon?: string;
+  /** Custom section title for grouping */
+  sectionTitle?: string;
+  /** Navigation route for gamification screen */
+  route?: string;
+  /** Achievements to display */
+  achievementsCount?: number;
+}
+

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";