@umituz/react-native-settings 4.23.82 → 4.23.84

package/src/domains/notifications/reminders/presentation/components/ReminderForm.styles.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+import type { useAppDesignTokens } from '@umituz/react-native-design-system';
+
+export const createReminderFormStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      padding: 16,
+      backgroundColor: tokens.colors.surface,
+    },
+    section: { marginBottom: 20 },
+    label: { color: tokens.colors.textPrimary, marginBottom: 8 },
+    input: {
+      backgroundColor: tokens.colors.surfaceSecondary,
+      borderRadius: 8,
+      padding: 12,
+      fontSize: 16,
+      color: tokens.colors.textPrimary,
+    },
+    multilineInput: { minHeight: 80, textAlignVertical: 'top' },
+    buttonRow: { flexDirection: 'row', gap: 12, marginTop: 24 },
+  });

package/src/domains/notifications/reminders/presentation/components/ReminderForm.tsx

@@ -11,44 +11,20 @@ import { TimePresetSelector } from './TimePresetSelector';
 import { FrequencySelector } from './FrequencySelector';
 import { WeekdaySelector } from './WeekdaySelector';
 import { FormButton } from './FormButton';
+import { 
+  DEFAULT_HOUR, 
+  DEFAULT_MINUTE, 
+  DEFAULT_WEEKDAY, 
+  MAX_TITLE_LENGTH, 
+  MAX_BODY_LENGTH, 
+  VALID_HOUR_RANGE, 
+  VALID_MINUTE_RANGE, 
+  VALID_WEEKDAY_RANGE,
+  type ReminderFormProps,
+} from './ReminderForm.constants';
+import { createReminderFormStyles as createStyles } from './ReminderForm.styles';
 import { DEFAULT_TIME_PRESETS, FREQUENCY_OPTIONS } from '../../infrastructure/config/reminderPresets';
-import type { Reminder, ReminderFrequency, CreateReminderInput, TimePreset } from '../../../infrastructure/services/types';
-
-// Constants for magic numbers
-const DEFAULT_HOUR = 9;
-const DEFAULT_MINUTE = 0;
-const DEFAULT_WEEKDAY = 2; // Tuesday
-const MAX_TITLE_LENGTH = 100;
-const MAX_BODY_LENGTH = 500;
-
-// Validation constants
-const VALID_HOUR_RANGE = { min: 0, max: 23 } as const;
-const VALID_MINUTE_RANGE = { min: 0, max: 59 } as const;
-const VALID_WEEKDAY_RANGE = { min: 0, max: 6 } as const;
-
-export interface ReminderFormTranslations {
-  titleLabel: string;
-  titlePlaceholder: string;
-  bodyLabel: string;
-  bodyPlaceholder: string;
-  timeLabel: string;
-  frequencyLabel: string;
-  weekdayLabel: string;
-  saveButton: string;
-  cancelButton: string;
-  customTimeLabel: string;
-  getPresetLabel: (key: string) => string;
-  getFrequencyLabel: (key: string) => string;
-  getWeekdayLabel: (key: string) => string;
-}
-
-export interface ReminderFormProps {
-  initialData?: Reminder;
-  translations: ReminderFormTranslations;
-  onSave: (data: CreateReminderInput) => void;
-  onCancel: () => void;
-  timePresets?: TimePreset[];
-}
+import type { ReminderFrequency, TimePreset } from '../../../infrastructure/services/types';
 
 export const ReminderForm: React.FC<ReminderFormProps> = ({
   initialData,
@@ -207,23 +183,3 @@ export const ReminderForm: React.FC<ReminderFormProps> = ({
     </ScrollView>
   );
 };
-
-const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
-  StyleSheet.create({
-    container: {
-      flex: 1,
-      padding: 16,
-      backgroundColor: tokens.colors.surface,
-    },
-    section: { marginBottom: 20 },
-    label: { color: tokens.colors.textPrimary, marginBottom: 8 },
-    input: {
-      backgroundColor: tokens.colors.surfaceSecondary,
-      borderRadius: 8,
-      padding: 12,
-      fontSize: 16,
-      color: tokens.colors.textPrimary,
-    },
-    multilineInput: { minHeight: 80, textAlignVertical: 'top' },
-    buttonRow: { flexDirection: 'row', gap: 12, marginTop: 24 },
-  });

package/src/domains/notifications/reminders/presentation/screens/ReminderListScreen.tsx

@@ -5,8 +5,15 @@
 
 import React, { useMemo, useCallback } from 'react';
 import { View, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
-import { AtomicText, AtomicIcon, AtomicSpinner } from '@umituz/react-native-design-system';
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { 
+  AtomicText, 
+  AtomicIcon, 
+  AtomicSpinner, 
+  ScreenLayout, 
+  NavigationHeader, 
+  useAppNavigation,
+  useAppDesignTokens
+} from '@umituz/react-native-design-system';
 import { ReminderItem } from '../components/ReminderItem';
 import { useReminders, useRemindersLoading } from '../../infrastructure/storage/RemindersStore';
 import { useReminderActions } from '../../infrastructure/hooks/useReminderActions';
@@ -25,6 +32,7 @@ export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
   onEditPress,
   maxReminders = 20,
 }) => {
+  const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
   const styles = useMemo(() => createStyles(tokens), [tokens]);
 
@@ -69,32 +77,39 @@ export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
 
   const keyExtractor = useCallback((item: Reminder) => item.id, []);
 
+  const header = (
+    <NavigationHeader
+      title={translations.screenTitle}
+      onBackPress={() => navigation.goBack()}
+    />
+  );
+
   if (isLoading) {
     return (
-      <View style={[styles.loadingContainer, { backgroundColor: tokens.colors.surface }]}>
+      <ScreenLayout header={header}>
         <AtomicSpinner size="lg" color="primary" fullContainer />
-      </View>
+      </ScreenLayout>
     );
   }
 
   return (
-    <View style={{ flex: 1 }}>
+    <ScreenLayout header={header}>
       <FlatList
         data={reminders}
         renderItem={renderItem}
         keyExtractor={keyExtractor}
         ListEmptyComponent={renderEmpty}
-        contentContainerStyle={[styles.listContent, { backgroundColor: tokens.colors.surface }]}
+        contentContainerStyle={styles.listContent}
         showsVerticalScrollIndicator={false}
       />
 
       {canAddMore && (
         <TouchableOpacity style={styles.fab} onPress={onAddPress} activeOpacity={0.8}>
-          <AtomicIcon name="add" size="md" color="onSurface" />
+          <AtomicIcon name="add" size="md" color="onPrimary" />
           <AtomicText type="bodyMedium" style={styles.fabText}>{translations.addButtonLabel}</AtomicText>
         </TouchableOpacity>
       )}
-    </View>
+    </ScreenLayout>
   );
 };
 
@@ -102,7 +117,7 @@ const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
     listContent: { padding: 16, paddingBottom: 100, flexGrow: 1 },
-    emptyContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 32 },
+    emptyContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 32, paddingTop: 100 },
     emptyIconContainer: {
       width: 80,
       height: 80,
@@ -127,5 +142,5 @@ const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       justifyContent: 'center',
       gap: 8,
     },
-    fabText: { color: tokens.colors.surface, fontWeight: '600' },
+    fabText: { color: tokens.colors.onPrimary, fontWeight: '600' },
   });

package/src/domains/video-tutorials/presentation/components/VideoTutorialCard.tsx

@@ -44,18 +44,19 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
           style={[styles.thumbnail, horizontal && styles.horizontalThumbnail]}
           resizeMode="cover"
         />
-        <View style={[styles.durationBadge, { backgroundColor: "rgba(0,0,0,0.7)" }]}>
-          <AtomicText style={styles.durationText}>{formatDuration(tutorial.duration)}</AtomicText>
+        <View style={styles.durationBadge}>
+          <AtomicText type="labelSmall" style={styles.durationText}>{formatDuration(tutorial.duration)}</AtomicText>
         </View>
         {tutorial.featured && (
           <View style={[styles.featuredBadge, { backgroundColor: tokens.colors.primary }]}>
-            <AtomicText style={[styles.featuredText, { color: tokens.colors.onPrimary }]}>Featured</AtomicText>
+            <AtomicText type="labelSmall" style={[styles.featuredText, { color: tokens.colors.onPrimary }]}>Featured</AtomicText>
           </View>
         )}
       </View>
 
       <View style={styles.content}>
         <AtomicText
+          type={horizontal ? "titleMedium" : "titleLarge"}
           style={[styles.title, horizontal && styles.horizontalTitle]}
           numberOfLines={2}
         >
@@ -63,6 +64,8 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
         </AtomicText>
 
         <AtomicText
+          type={horizontal ? "bodySmall" : "bodyMedium"}
+          color="textSecondary"
           style={[styles.description, horizontal && styles.horizontalDescription]}
           numberOfLines={horizontal ? 2 : 3}
         >
@@ -70,10 +73,10 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
         </AtomicText>
 
         <View style={styles.metadata}>
-          <AtomicText style={styles.category}>
+          <AtomicText type="labelSmall" color="textTertiary" style={styles.category}>
             {tutorial.category.replace("-", " ")}
           </AtomicText>
-          <AtomicText style={styles.difficulty}>
+          <AtomicText type="labelSmall" color="textSecondary" style={styles.difficulty}>
             {tutorial.difficulty}
           </AtomicText>
         </View>
@@ -88,16 +91,16 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) => StyleSheet.
   imageContainer: { position: "relative" },
   thumbnail: { width: "100%", height: 180 },
   horizontalThumbnail: { height: 140 },
-  durationBadge: { position: "absolute", bottom: 8, right: 8, paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4 },
-  durationText: { color: tokens.colors.textInverse, fontSize: 12, fontWeight: "500" },
+  durationBadge: { position: "absolute", bottom: 8, right: 8, paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, backgroundColor: "rgba(0,0,0,0.7)" },
+  durationText: { color: tokens.colors.textInverse },
   featuredBadge: { position: "absolute", top: 8, left: 8, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 4 },
-  featuredText: { fontSize: 11, fontWeight: "600" },
+  featuredText: { fontWeight: "600" },
   content: { padding: 12 },
-  title: { fontSize: tokens.typography.titleMedium.fontSize, fontWeight: "600", marginBottom: 6, color: tokens.colors.textPrimary },
-  horizontalTitle: { fontSize: tokens.typography.bodyLarge.fontSize },
-  description: { fontSize: tokens.typography.bodyMedium.fontSize, lineHeight: 20, marginBottom: 8, color: tokens.colors.textSecondary },
-  horizontalDescription: { fontSize: tokens.typography.bodySmall.fontSize, lineHeight: 16, marginBottom: 6 },
+  title: { fontWeight: "600", marginBottom: 6, color: tokens.colors.textPrimary },
+  horizontalTitle: {},
+  description: { marginBottom: 8 },
+  horizontalDescription: { marginBottom: 6 },
   metadata: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
-  category: { fontSize: 12, textTransform: "capitalize", fontWeight: "500", color: tokens.colors.textTertiary },
-  difficulty: { fontSize: 12, textTransform: "capitalize", fontWeight: "500", color: tokens.colors.textSecondary },
+  category: { textTransform: "capitalize", fontWeight: "500" },
+  difficulty: { textTransform: "capitalize", fontWeight: "500" },
 });

package/src/domains/video-tutorials/presentation/screens/VideoTutorialsScreen.tsx

@@ -18,6 +18,8 @@ import {
   ScreenLayout,
   AtomicSpinner,
   AtomicText,
+  useAppNavigation,
+  NavigationHeader,
 } from "@umituz/react-native-design-system";
 import type { DesignTokens } from "@umituz/react-native-design-system";
 import type { VideoTutorial } from "../../types";
@@ -46,6 +48,7 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> = React.m
     onTutorialPress,
   }) => {
     const tokens = useAppDesignTokens();
+    const navigation = useAppNavigation();
     const styles = getStyles(tokens);
 
     const handleTutorialPress = React.useCallback(
@@ -67,26 +70,39 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> = React.m
       [handleTutorialPress]
     );
 
-    if (isLoading) return <AtomicSpinner size="lg" fullContainer />;
-
     const hasFeatured = featuredTutorials && featuredTutorials.length > 0;
     const hasTutorials = tutorials && tutorials.length > 0;
 
-    if (!hasTutorials && !hasFeatured) {
+    const header = (
+      <NavigationHeader
+        title={title}
+        onBackPress={() => navigation.goBack()}
+      />
+    );
+
+    if (isLoading) {
       return (
-        <View style={styles.emptyContainer}>
-          <AtomicText color="secondary" type="bodyLarge">{emptyMessage}</AtomicText>
-        </View>
+        <ScreenLayout header={header}>
+          <AtomicSpinner size="lg" fullContainer color="primary" />
+        </ScreenLayout>
       );
     }
 
-    return (
-      <ScreenLayout scrollable={false} edges={["top", "bottom"]}>
-        <AtomicText style={styles.title}>{title}</AtomicText>
+    if (!hasTutorials && !hasFeatured) {
+      return (
+        <ScreenLayout header={header}>
+          <View style={styles.emptyContainer}>
+            <AtomicText color="textSecondary" type="bodyLarge" style={{ textAlign: 'center' }}>{emptyMessage}</AtomicText>
+          </View>
+        </ScreenLayout>
+      );
+    }
 
+    const ListHeader = () => (
+      <>
         {hasFeatured && (
           <View style={styles.section}>
-            <AtomicText color="secondary" style={styles.sectionTitle}>{featuredTitle}</AtomicText>
+            <AtomicText color="textSecondary" type="titleLarge" style={styles.sectionTitle}>{featuredTitle}</AtomicText>
             <FlatList
               data={featuredTutorials}
               renderItem={renderFeaturedItem}
@@ -97,38 +113,47 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> = React.m
             />
           </View>
         )}
-
         {hasTutorials && (
-          <View style={styles.section}>
-            <AtomicText color="secondary" style={styles.sectionTitle}>{allTutorialsTitle}</AtomicText>
-            <FlatList
-              data={tutorials}
-              renderItem={renderTutorialItem}
-              keyExtractor={(item) => item.id}
-              showsVerticalScrollIndicator={false}
-              contentContainerStyle={styles.verticalList}
-            />
-          </View>
+          <AtomicText color="textSecondary" type="titleLarge" style={styles.sectionTitle}>{allTutorialsTitle}</AtomicText>
         )}
+      </>
+    );
+
+    return (
+      <ScreenLayout header={header} scrollable={false}>
+        <FlatList
+          data={tutorials}
+          renderItem={renderTutorialItem}
+          keyExtractor={(item) => item.id}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.verticalList}
+          ListHeaderComponent={ListHeader}
+        />
       </ScreenLayout>
     );
   }
 );
 
 const getStyles = (tokens: DesignTokens) => StyleSheet.create({
-  title: {
-    fontSize: tokens.typography.headlineLarge.fontSize,
-    color: tokens.colors.textPrimary,
-    fontWeight: "600",
-    marginBottom: 24,
+  section: {
+    marginBottom: tokens.spacing.lg,
   },
-  section: { marginBottom: 24 },
   sectionTitle: {
-    fontSize: tokens.typography.titleLarge.fontSize,
-    fontWeight: "500",
-    marginBottom: 12,
+    fontWeight: "600",
+    marginBottom: tokens.spacing.sm,
+    paddingHorizontal: tokens.spacing.md,
+  },
+  horizontalList: {
+    paddingHorizontal: tokens.spacing.md,
+  },
+  verticalList: {
+    paddingBottom: tokens.spacing.xl,
+    paddingHorizontal: tokens.spacing.md,
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: tokens.spacing.lg,
   },
-  horizontalList: { paddingRight: 16 },
-  verticalList: { paddingBottom: 16 },
-  emptyContainer: { flex: 1, justifyContent: "center", alignItems: "center", padding: 20 },
 });

package/src/presentation/components/SettingsFooter.tsx

@@ -13,9 +13,9 @@ export const SettingsFooter: React.FC<SettingsFooterProps> = ({
   appVersion,
   versionLabel,
 }) => {
-  const displayText = versionText || (appVersion && versionLabel
-    ? `${versionLabel} ${appVersion}`
-    : appVersion);
+  const displayText = versionText || (appVersion 
+    ? (versionLabel ? `${versionLabel} ${appVersion}` : `Version ${appVersion}`)
+    : undefined);
 
   if (!displayText) return null;
 

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -6,7 +6,12 @@
  */
 
 import React from "react";
-import { useAppDesignTokens, StackNavigator, type StackScreen, type StackNavigatorConfig } from "@umituz/react-native-design-system";
+import {
+  useAppDesignTokens,
+  StackNavigator,
+  type StackScreen,
+  type StackNavigatorConfig,
+} from "@umituz/react-native-design-system";
 import { useLocalization, LanguageSelectionScreen } from "../../domains/localization";
 import { NotificationSettingsScreen } from "../../domains/notifications";
 import { AccountScreen } from "@umituz/react-native-auth";
@@ -16,30 +21,31 @@ import { FAQScreen } from "../../domains/faqs";
 import { AboutScreen } from "../../domains/about";
 import { LegalScreen } from "../../domains/legal";
 import { GamificationScreen } from "../../domains/gamification";
-import { useNavigationHandlers } from "./hooks";
+import { useNavigationHandlers, useSettingsScreens } from "./hooks";
 import {
   createNotificationTranslations,
   createQuietHoursTranslations,
   createLegalScreenProps,
 } from "./utils";
-import type { SettingsStackParamList, SettingsStackNavigatorProps, AdditionalScreen } from "./types";
+import type { SettingsStackParamList, SettingsStackNavigatorProps } from "./types";
 
-export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
-  appInfo,
-  legalUrls,
-  faqData,
-  config = {},
-  showUserProfile = false,
-  userProfile,
-  accountConfig,
-  additionalScreens = [],
-  devSettings,
-  customSections = [],
-  showHeader = true,
-  showCloseButton = false,
-  onClose,
-  gamificationConfig,
-}) => {
+export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = (props) => {
+  const {
+    appInfo,
+    legalUrls,
+    faqData,
+    config = {},
+    showUserProfile = false,
+    userProfile,
+    accountConfig,
+    additionalScreens = [],
+    devSettings,
+    customSections = [],
+    showHeader = true,
+    showCloseButton = false,
+    onClose,
+    gamificationConfig,
+  } = props;
   const tokens = useAppDesignTokens();
   const { t } = useLocalization();
   const { handlePrivacyPress, handleTermsPress, handleEulaPress, aboutConfig } =
@@ -47,21 +53,9 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
 
   const screenOptions = React.useMemo(
     () => ({
-      headerStyle: {
-        backgroundColor: tokens.colors.surface,
-        borderBottomColor: tokens.colors.borderLight,
-        borderBottomWidth: 1,
-        elevation: 0,
-        shadowOpacity: 0,
-      },
-      headerTintColor: tokens.colors.textPrimary,
-      headerTitleStyle: {
-        color: tokens.colors.textPrimary,
-        fontWeight: "600" as const,
-      },
-      headerBackTitle: t("settings.title"),
+      headerShown: false,
     }),
-    [tokens, t]
+    []
   );
 
   const notificationTranslations = React.useMemo(() => createNotificationTranslations(t), [t]);
@@ -71,150 +65,14 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
     [t, handlePrivacyPress, handleTermsPress, handleEulaPress]
   );
 
-  const screens = React.useMemo(() => {
-    const baseScreens: StackScreen[] = [
-      {
-        name: "SettingsMain",
-        options: { headerShown: false },
-        children: () => (
-          <SettingsScreen
-            config={config}
-            appVersion={appInfo.version}
-            showUserProfile={showUserProfile}
-            userProfile={userProfile}
-            devSettings={devSettings}
-            customSections={customSections}
-            showHeader={showHeader}
-            showCloseButton={showCloseButton}
-            onClose={onClose}
-          />
-        ),
-      },
-      {
-        name: "Appearance",
-        component: AppearanceScreen,
-        options: { headerShown: false },
-      },
-      {
-        name: "About",
-        options: { headerTitle: t("settings.about.title") },
-        children: () => <AboutScreen config={aboutConfig} />,
-      },
-      {
-        name: "Legal",
-        options: { headerTitle: t("settings.legal.title") },
-        children: () => <LegalScreen {...legalScreenProps} />,
-      },
-      {
-        name: "Notifications",
-        options: { headerShown: false },
-        children: () => (
-          <NotificationSettingsScreen
-            translations={notificationTranslations}
-            quietHoursTranslations={quietHoursTranslations}
-          />
-        ),
-      },
-    ];
-
-    // FAQ screen - conditionally add
-    const faqScreen: StackScreen | null = (faqData && faqData.categories.length > 0)
-      ? {
-          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")}
-            />
-          ),
-        }
-      : null;
-
-    // Additional screens - map to StackScreen format
-    const additionalStackScreens: StackScreen[] = (additionalScreens as readonly AdditionalScreen[]).map((screen: AdditionalScreen): StackScreen => {
-      // Create base screen object
-      const stackScreen: Record<string, unknown> = {
-        name: screen.name,
-      };
-
-      // Conditionally add properties
-      if (screen.component) {
-        stackScreen.component = screen.component;
-      }
-      if (screen.children) {
-        stackScreen.children = screen.children;
-      }
-      if (screen.options) {
-        stackScreen.options = screen.options;
-      }
-
-      // Type assertion to StackScreen
-      return stackScreen as unknown as StackScreen;
-    });
-
-    // Gamification screen - conditionally add
-    const gamificationScreen: StackScreen | null = gamificationConfig?.enabled
-      ? {
-          name: "Gamification",
-          options: { headerTitle: t("settings.gamification.title") },
-          children: () => <GamificationScreen config={gamificationConfig} />,
-        }
-      : null;
-
-    // Language selection screen
-    const languageScreen: StackScreen = {
-      name: "LanguageSelection",
-      options: { headerShown: false },
-      children: () => (
-        <LanguageSelectionScreen
-          headerTitle={t("settings.language.title")}
-          searchPlaceholder={t("settings.languageSelection.searchPlaceholder")}
-        />
-      ),
-    };
-
-    // Account screen - conditionally add
-    const accountScreen: StackScreen | null = accountConfig
-      ? {
-          name: "Account",
-          options: { headerTitle: t("settings.account.title") },
-          children: () => <AccountScreen config={accountConfig} />,
-        }
-      : null;
-
-    // Compose final list using spread operator (immutable)
-    return [
-      ...baseScreens,
-      ...(faqScreen ? [faqScreen] : []),
-      ...additionalStackScreens,
-      ...(gamificationScreen ? [gamificationScreen] : []),
-      languageScreen,
-      ...(accountScreen ? [accountScreen] : []),
-    ];
-  }, [
-    t,
-    showHeader,
-    showCloseButton,
-    onClose,
-    config,
-    appInfo.version,
-    showUserProfile,
-    userProfile,
-    devSettings,
-    customSections,
+  const screens = useSettingsScreens({
+    ...props,
     aboutConfig,
-    legalScreenProps,
+    legalProps: legalScreenProps,
     notificationTranslations,
     quietHoursTranslations,
-    faqData,
-    additionalScreens,
-    gamificationConfig,
-    accountConfig,
-  ]);
+    t,
+  });
 
   const navigatorConfig: StackNavigatorConfig<SettingsStackParamList> = {
     initialRouteName: "SettingsMain",

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

@@ -3,3 +3,4 @@
  */
 
 export { useNavigationHandlers } from "./useNavigationHandlers";
+export { useSettingsScreens } from "./useSettingsScreens";