@umituz/react-native-settings 4.21.17 → 4.21.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.21.17",
+  "version": "4.21.19",
   "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/domains/appearance/presentation/screens/AppearanceScreen.tsx

@@ -6,7 +6,13 @@
  */
 
 import React, { useMemo, useCallback } from "react";
-import { ScreenLayout, useAppDesignTokens } from "@umituz/react-native-design-system";
+// @ts-ignore - Optional peer dependency
+import { useNavigation } from "@react-navigation/native";
+import { 
+  ScreenLayout, 
+  useAppDesignTokens,
+  NavigationHeader
+} from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import { useAppearance, useAppearanceActions } from "../../hooks";
 import {
@@ -33,6 +39,7 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
   showColorsSection = true,
   showPreviewSection = true,
 }) => {
+  const navigation = useNavigation();
   const tokens = useAppDesignTokens();
   const { t } = useLocalization();
   const { themeMode } = useAppearance();
@@ -152,7 +159,15 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
   ]);
 
   return (
-    <ScreenLayout hideScrollIndicator>
+    <ScreenLayout 
+      hideScrollIndicator
+      header={
+        <NavigationHeader 
+          title={t("settings.appearance.title")} 
+          onBackPress={() => navigation.goBack()} 
+        />
+      }
+    >
       {headerComponentMemo}
       {themeSectionMemo}
       {colorsSectionMemo}

package/src/domains/notifications/presentation/screens/NotificationSettingsScreen.tsx

@@ -5,7 +5,16 @@
 
 import React from 'react';
 import { View } from 'react-native';
-import { AtomicCard, ScreenLayout, AtomicSpinner } from '@umituz/react-native-design-system';
+// @ts-ignore - Optional peer dependency
+import { useNavigation } from '@react-navigation/native';
+import { 
+  AtomicCard, 
+  ScreenLayout, 
+  AtomicSpinner,
+  NavigationHeader,
+  useAppDesignTokens
+} from '@umituz/react-native-design-system';
+import { useLocalization } from '@umituz/react-native-localization';
 import { QuietHoursCard } from '../../quietHours/presentation/components/QuietHoursCard';
 import { SettingRow } from '../components/SettingRow';
 import { RemindersNavRow } from '../components/RemindersNavRow';
@@ -15,7 +24,6 @@ import { useReminders } from '../../reminders/infrastructure/storage/RemindersSt
 import { useQuietHoursActions } from '../../quietHours/infrastructure/hooks/useQuietHoursActions';
 import type { NotificationSettingsTranslations, QuietHoursTranslations } from '../../infrastructure/services/types';
 import { createStyles } from './NotificationSettingsScreen.styles';
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
 // @ts-ignore - Optional peer dependency
 import DateTimePicker from '@react-native-community/datetimepicker';
 
@@ -30,7 +38,9 @@ export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProp
   quietHoursTranslations,
   onHapticFeedback,
 }) => {
+  const navigation = useNavigation();
   const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
   const styles = createStyles(tokens);
   const reminders = useReminders();
   const { setStartTime, setEndTime } = useQuietHoursActions();
@@ -55,16 +65,33 @@ export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProp
     // Navigate to reminders screen when implemented
   };
 
+  const headerTitle = translations.screenTitle || t("settings.notifications.title");
+
   if (isLoading) {
     return (
-      <ScreenLayout>
+      <ScreenLayout
+        header={
+          <NavigationHeader 
+            title={headerTitle} 
+            onBackPress={() => navigation.goBack()} 
+          />
+        }
+      >
         <AtomicSpinner size="lg" color="primary" fullContainer />
       </ScreenLayout>
     );
   }
 
   return (
-    <ScreenLayout hideScrollIndicator>
+    <ScreenLayout 
+      hideScrollIndicator
+      header={
+        <NavigationHeader 
+          title={headerTitle} 
+          onBackPress={() => navigation.goBack()} 
+        />
+      }
+    >
       <View style={styles.container}>
         <AtomicCard style={styles.card}>
           <SettingRow

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -99,7 +99,7 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
       <Stack.Screen
         name="Appearance"
         component={AppearanceScreen}
-        options={{ headerTitle: t("settings.appearance.title") }}
+        options={{ headerShown: false }}
       />
 
       <Stack.Screen name="About" options={{ headerTitle: t("settings.about.title") }}>
@@ -112,7 +112,7 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
 
       <Stack.Screen
         name="Notifications"
-        options={{ headerTitle: t("settings.notifications.title") }}
+        options={{ headerShown: false }}
       >
         {() => (
           <NotificationSettingsScreen
@@ -166,10 +166,11 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
 
       <Stack.Screen
         name="LanguageSelection"
-        options={{ headerTitle: t("settings.language.title") }}
+        options={{ headerShown: false }}
       >
         {() => (
           <LanguageSelectionScreen
+            headerTitle={t("settings.language.title")}
             searchPlaceholder={t("settings.languageSelection.searchPlaceholder")}
           />
         )}

package/src/presentation/screens/SettingsScreen.tsx

@@ -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,6 +70,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   onClose,
   featureOptions,
   devSettings,
+  gamificationConfig,
 }) => {
   const navigation = useNavigation();
   const tokens = useAppDesignTokens();
@@ -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 { useNavigation } from "@react-navigation/native";
+import { SettingsItemCard } from "../../components/SettingsItemCard";
+import type { IconName } from "@umituz/react-native-design-system";
+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 = useNavigation();
+  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/SubscriptionSettingsItem.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+// @ts-ignore - Optional peer dependency
+import { useNavigation } from "@react-navigation/native";
+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 = 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}
+    />
+  );
+};

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

@@ -0,0 +1,28 @@
+import React from "react";
+// @ts-ignore - Optional peer dependency
+import { useNavigation } from "@react-navigation/native";
+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 = 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}
+    />
+  );
+};

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,
+  GamificationConfig,
 } from "./UserFeatureConfig";
 
 /**
@@ -130,6 +131,12 @@ export interface SettingsConfig {
    */
   wallet?: FeatureVisibility | WalletConfig;
 
+  /**
+   * Gamification settings configuration
+   * @default false
+   */
+  gamification?: FeatureVisibility | GamificationConfig;
+
   /**
    * 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 Configuration
+ */
+export interface GamificationConfig {
+  /** 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/utils/normalizeConfig.ts

@@ -17,6 +17,7 @@ import type {
   FAQConfig,
   SubscriptionConfig,
   WalletConfig,
+  GamificationConfig,
   SettingsConfig,
 } from "../types";
 
@@ -69,6 +70,10 @@ export interface NormalizedConfig {
     enabled: boolean;
     config?: WalletConfig;
   };
+  gamification: {
+    enabled: boolean;
+    config?: GamificationConfig;
+  };
 }
 
 /**
@@ -115,5 +120,6 @@ export function normalizeSettingsConfig(
     faqs: normalizeConfigValue(config?.faqs, false),
     subscription: normalizeConfigValue(config?.subscription, false),
     wallet: normalizeConfigValue(config?.wallet, false),
+    gamification: normalizeConfigValue(config?.gamification, false),
   };
 }