@umituz/react-native-settings 4.23.82 → 4.23.83

package/package.json

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

package/src/domains/disclaimer/presentation/screens/DisclaimerScreen.tsx

@@ -14,7 +14,13 @@
 
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { useAppDesignTokens, withAlpha, ScreenLayout } from '@umituz/react-native-design-system';
+import { 
+  useAppDesignTokens, 
+  withAlpha, 
+  ScreenLayout, 
+  useAppNavigation, 
+  NavigationHeader 
+} from '@umituz/react-native-design-system';
 import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import type { IconName } from '@umituz/react-native-design-system';
 import { useLocalization } from '../../../localization';
@@ -46,12 +52,20 @@ export const DisclaimerScreen: React.FC<DisclaimerScreenProps> = ({
   const displayTitle = title || t(titleKey);
   const displayContent = content || t(contentKey);
 
+  const navigation = useAppNavigation();
+
   return (
     <ScreenLayout
       scrollable={true}
       edges={['bottom']}
       contentContainerStyle={styles.scrollContent}
       hideScrollIndicator={false}
+      header={
+        <NavigationHeader
+          title={displayTitle}
+          onBackPress={() => navigation.goBack()}
+        />
+      }
     >
       {/* Icon Header */}
       <View style={styles.iconHeader}>

package/src/domains/faqs/presentation/screens/FAQScreen.tsx

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from 'react';
 import { View, ScrollView, StyleSheet, ViewStyle, TextStyle, useWindowDimensions } from 'react-native';
-import { useAppDesignTokens, AtomicText, ScreenLayout, getContentMaxWidth } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText, ScreenLayout, getContentMaxWidth, NavigationHeader, useAppNavigation } from '@umituz/react-native-design-system';
 import { FAQCategory } from '../../domain/entities/FAQEntity';
 import { useFAQSearch } from '../hooks/useFAQSearch';
 import { useFAQExpansion } from '../hooks/useFAQExpansion';
@@ -45,6 +45,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
   renderHeader,
   styles: customStyles,
 }) => {
+  const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
   const { width: windowWidth } = useWindowDimensions();
   const contentMaxWidth = useMemo(() => getContentMaxWidth(windowWidth), [windowWidth]);
@@ -67,6 +68,21 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
     [tokens]
   );
 
+  const handleBack = () => {
+    if (onBack) {
+      onBack();
+    } else {
+      navigation.goBack();
+    }
+  };
+
+  const header = renderHeader ? renderHeader({ onBack: handleBack }) : (
+    <NavigationHeader
+      title={headerTitle}
+      onBackPress={handleBack}
+    />
+  );
+
   const renderContent = () => {
     if (searchQuery && !hasResults) {
       return (
@@ -81,13 +97,6 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
     return (
       <View style={{ flex: 1 }}>
         <View style={[styles.header, customStyles?.header]}>
-          <AtomicText
-            type="headlineMedium"
-            color="textPrimary"
-            style={{ marginBottom: tokens.spacing.md, fontWeight: '700' }}
-          >
-            {headerTitle}
-          </AtomicText>
           <FAQSearchBar
             value={searchQuery}
             onChangeText={setSearchQuery}
@@ -116,23 +125,16 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
     );
   };
 
-  if (renderHeader && onBack) {
-    return (
-      <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
-        <View style={[styles.container, customStyles?.container]}>
-          <View style={{ alignSelf: 'center', width: '100%', maxWidth: contentMaxWidth }}>
-            {renderHeader({ onBack })}
-          </View>
-          {renderContent()}
-        </View>
-      </View>
-    );
-  }
-
   return (
-    <ScreenLayout edges={['bottom']} scrollable={false}>
+    <ScreenLayout 
+      edges={['bottom']} 
+      scrollable={false}
+      header={header}
+    >
       <View style={[styles.container, customStyles?.container]}>
-        {renderContent()}
+        <View style={{ alignSelf: 'center', width: '100%', maxWidth: contentMaxWidth, flex: 1 }}>
+          {renderContent()}
+        </View>
       </View>
     </ScreenLayout>
   );

package/src/domains/feedback/presentation/components/FeedbackForm.styles.ts

@@ -0,0 +1,51 @@
+import { StyleSheet } from "react-native";
+import type { useAppDesignTokens } from "@umituz/react-native-design-system";
+
+export const getFeedbackFormStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: {
+        width: "100%",
+    },
+    typeContainer: {
+        marginBottom: 24,
+    },
+    typeScroll: {
+        gap: 8,
+    },
+    typeButton: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 20,
+        borderWidth: 1,
+        gap: 6,
+    },
+    ratingContainer: {
+        alignItems: "center",
+        marginBottom: 24,
+    },
+    stars: {
+        flexDirection: "row",
+        gap: 8,
+    },
+    starButton: {
+        padding: 4,
+    },
+    inputContainer: {
+        marginBottom: 24,
+    },
+    textArea: {
+        textAlignVertical: "top",
+        minHeight: 120,
+        borderWidth: 1,
+        borderRadius: 8,
+        padding: 12,
+    },
+    errorText: {
+        marginTop: 8,
+    },
+    submitButton: {
+        width: "100%",
+    },
+});

package/src/domains/feedback/presentation/components/FeedbackForm.tsx

@@ -8,6 +8,8 @@ import { View, StyleSheet, TouchableOpacity, ScrollView, TextInput } from "react
 import { useAppDesignTokens, AtomicText, AtomicButton, AtomicIcon } from "@umituz/react-native-design-system";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
 
+import { getFeedbackFormStyles as getStyles } from "./FeedbackForm.styles";
+
 export interface FeedbackFormProps {
     onSubmit: (data: { type: FeedbackType; rating: FeedbackRating; description: string; title: string }) => Promise<void>;
     texts: {
@@ -151,6 +153,7 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
                             color: tokens.colors.textPrimary,
                             backgroundColor: tokens.colors.surface,
                             borderColor: error ? tokens.colors.error : tokens.colors.border,
+                            fontSize: tokens.typography.bodyMedium.fontSize,
                         }
                     ]}
                 />
@@ -176,52 +179,3 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
     );
 };
 
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
-  StyleSheet.create({
-    container: {
-        width: "100%",
-    },
-    typeContainer: {
-        marginBottom: 24,
-    },
-    typeScroll: {
-        gap: 8,
-    },
-    typeButton: {
-        flexDirection: "row",
-        alignItems: "center",
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        borderRadius: 20,
-        borderWidth: 1,
-        gap: 6,
-    },
-    ratingContainer: {
-        alignItems: "center",
-        marginBottom: 24,
-    },
-    stars: {
-        flexDirection: "row",
-        gap: 8,
-    },
-    starButton: {
-        padding: 4,
-    },
-    inputContainer: {
-        marginBottom: 24,
-    },
-    textArea: {
-        textAlignVertical: "top",
-        minHeight: 120,
-        borderWidth: 1,
-        borderRadius: 8,
-        padding: 12,
-        fontSize: tokens.typography.bodyMedium.fontSize,
-    },
-    errorText: {
-        marginTop: 8,
-    },
-    submitButton: {
-        width: "100%",
-    },
-});

package/src/domains/gamification/components/GamificationScreen/GamificationScreen.tsx

@@ -6,10 +6,9 @@
 
 import React from "react";
 import { View, ScrollView } from "react-native";
-import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, ScreenLayout, NavigationHeader, useAppNavigation } from "@umituz/react-native-design-system";
 import { LevelProgress } from "../LevelProgress";
 import { StreakDisplay } from "../StreakDisplay";
-import { Header } from "./Header";
 import { StatsGrid } from "./StatsGrid";
 import { AchievementsList } from "./AchievementsList";
 import { styles } from "./styles";
@@ -39,6 +38,7 @@ export const GamificationScreenInner: React.FC<GamificationScreenProps> = ({
   subtextColor,
   headerComponent,
 }) => {
+  const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
 
   // Use tokens for fallbacks
@@ -48,75 +48,72 @@ export const GamificationScreenInner: React.FC<GamificationScreenProps> = ({
   const finalTextColor = textColor || tokens.colors.textPrimary;
   const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
 
+  const header = (
+    <NavigationHeader
+      title={title}
+      onBackPress={() => navigation.goBack()}
+    />
+  );
+
   return (
-    <View style={[styles.container, { backgroundColor: finalBackgroundColor }, containerStyle]}>
+    <ScreenLayout
+      header={header}
+      contentContainerStyle={styles.scrollContent}
+      hideScrollIndicator={false}
+    >
       {headerComponent}
 
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-      >
-        {/* Header */}
-        <Header
-          title={title}
-          headerStyle={headerStyle}
-          titleStyle={titleStyle}
+      {/* Level Progress */}
+      <View style={styles.section}>
+        <LevelProgress
+          {...levelProps}
+          primaryColor={finalAccentColor}
+          backgroundColor={finalCardBackgroundColor}
           textColor={finalTextColor}
+          subtextColor={finalSubtextColor}
         />
+      </View>
 
-        {/* Level Progress */}
+      {/* Streak (if provided) */}
+      {streakProps && (
         <View style={styles.section}>
-          <LevelProgress
-            {...levelProps}
+          <AtomicText
+            style={[styles.sectionTitle, { color: finalTextColor }, sectionTitleStyle]}
+          >
+            {streakTitle}
+          </AtomicText>
+          <StreakDisplay
+            {...streakProps}
             primaryColor={finalAccentColor}
             backgroundColor={finalCardBackgroundColor}
             textColor={finalTextColor}
             subtextColor={finalSubtextColor}
           />
         </View>
+      )}
 
-        {/* Streak (if provided) */}
-        {streakProps && (
-          <View style={styles.section}>
-            <AtomicText
-              style={[styles.sectionTitle, { color: finalTextColor }, sectionTitleStyle]}
-            >
-              {streakTitle}
-            </AtomicText>
-            <StreakDisplay
-              {...streakProps}
-              primaryColor={finalAccentColor}
-              backgroundColor={finalCardBackgroundColor}
-              textColor={finalTextColor}
-              subtextColor={finalSubtextColor}
-            />
-          </View>
-        )}
-
-        {/* Stats Grid */}
-        <StatsGrid
-          statsTitle={statsTitle}
-          stats={stats}
-          accentColor={finalAccentColor}
-          cardBackgroundColor={finalCardBackgroundColor}
-          textColor={finalTextColor}
-          subtextColor={finalSubtextColor}
-          sectionTitleStyle={sectionTitleStyle}
-        />
+      {/* Stats Grid */}
+      <StatsGrid
+        statsTitle={statsTitle}
+        stats={stats}
+        accentColor={finalAccentColor}
+        cardBackgroundColor={finalCardBackgroundColor}
+        textColor={finalTextColor}
+        subtextColor={finalSubtextColor}
+        sectionTitleStyle={sectionTitleStyle}
+      />
 
-        {/* Achievements */}
-        <AchievementsList
-          achievementsTitle={achievementsTitle}
-          achievements={achievements}
-          emptyAchievementsText={emptyAchievementsText}
-          accentColor={finalAccentColor}
-          cardBackgroundColor={finalCardBackgroundColor}
-          textColor={finalTextColor}
-          subtextColor={finalSubtextColor}
-          sectionTitleStyle={sectionTitleStyle}
-        />
-      </ScrollView>
-    </View>
+      {/* Achievements */}
+      <AchievementsList
+        achievementsTitle={achievementsTitle}
+        achievements={achievements}
+        emptyAchievementsText={emptyAchievementsText}
+        accentColor={finalAccentColor}
+        cardBackgroundColor={finalCardBackgroundColor}
+        textColor={finalTextColor}
+        subtextColor={finalSubtextColor}
+        sectionTitleStyle={sectionTitleStyle}
+      />
+    </ScreenLayout>
   );
 };

package/src/domains/legal/presentation/screens/LegalContentScreen.tsx

@@ -9,6 +9,7 @@ import { AtomicText, AtomicButton } from "@umituz/react-native-design-system";
 import { UrlHandlerService } from "../../domain/services/UrlHandlerService";
 import { ContentValidationService } from "../../domain/services/ContentValidationService";
 import { StyleCacheService } from "../../domain/services/StyleCacheService";
+import { useAppNavigation, NavigationHeader } from "@umituz/react-native-design-system";
 
 export interface LegalContentScreenProps {
   content?: string;
@@ -34,6 +35,7 @@ export const LegalContentScreen: React.FC<LegalContentScreenProps> = React.memo(
   createStyles,
 }) => {
   const tokens = useAppDesignTokens();
+  const navigation = useAppNavigation();
 
   const styles = React.useMemo(() => {
     const cacheKey = StyleCacheService.createTokenCacheKey(tokens);
@@ -101,17 +103,15 @@ export const LegalContentScreen: React.FC<LegalContentScreenProps> = React.memo(
       testID={testID}
       scrollable={true}
       hideScrollIndicator={false}
+      header={
+        <NavigationHeader
+          title={title}
+          onBackPress={() => navigation.goBack()}
+        />
+      }
       contentContainerStyle={styles.scrollContent}
     >
       <View style={styles.content}>
-        <AtomicText
-          type="headlineLarge"
-          color="primary"
-          style={styles.title}
-        >
-          {title}
-        </AtomicText>
-
         {contentSection}
       </View>
     </ScreenLayout>

package/src/domains/legal/presentation/screens/LegalScreen.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from "react";
-import { ScreenLayout } from "@umituz/react-native-design-system";
+import { ScreenLayout, NavigationHeader, useAppNavigation } from "@umituz/react-native-design-system";
 import { LegalScreenHeader } from "../components/LegalScreenHeader";
 import { LegalDocumentsList } from "../components/LegalDocumentsList";
 
@@ -45,10 +45,21 @@ export const LegalScreen: React.FC<LegalScreenProps> = React.memo((props) => {
     testID = "legal-screen",
   } = props;
 
+  const navigation = useAppNavigation();
+
   return (
-    <ScreenLayout testID={testID} hideScrollIndicator>
+    <ScreenLayout
+      testID={testID}
+      hideScrollIndicator
+      header={
+        <NavigationHeader
+          title={title || ""}
+          onBackPress={() => navigation.goBack()}
+        />
+      }
+    >
       <LegalScreenHeader title={title} description={description} />
-      
+
       <LegalDocumentsList
         documentsHeader={documentsHeader}
         privacyTitle={privacyTitle}

package/src/domains/notifications/index.ts

@@ -110,7 +110,7 @@ export { ReminderItem } from './reminders/presentation/components/ReminderItem';
 export type { ReminderItemProps, ReminderItemTranslations } from './reminders/presentation/components/ReminderItem';
 
 export { ReminderForm } from './reminders/presentation/components/ReminderForm';
-export type { ReminderFormProps, ReminderFormTranslations } from './reminders/presentation/components/ReminderForm';
+export type { ReminderFormProps, ReminderFormTranslations } from './reminders/presentation/components/ReminderForm.constants';
 
 export { FormButton } from './reminders/presentation/components/FormButton';
 export type { FormButtonProps } from './reminders/presentation/components/FormButton';

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

@@ -7,11 +7,21 @@
 
 import React, { useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { AtomicIcon, AtomicCard, AtomicText, ScreenLayout, BASE_TOKENS, AtomicSpinner, type IconColor } from '@umituz/react-native-design-system';
+import { 
+  AtomicIcon, 
+  AtomicCard, 
+  AtomicText, 
+  ScreenLayout, 
+  BASE_TOKENS, 
+  AtomicSpinner, 
+  type IconColor, 
+  NavigationHeader, 
+  useAppNavigation,
+  useAppDesignTokens,
+  type DesignTokens
+} from '@umituz/react-native-design-system';
 import { Switch } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
 import { useNotificationSettings } from '../../infrastructure/hooks/useNotificationSettings';
-import type { DesignTokens } from '@umituz/react-native-design-system';
 
 export interface NotificationsScreenProps {
   translations: {
@@ -30,13 +40,21 @@ export const NotificationsScreen: React.FC<NotificationsScreenProps> = ({
   iconColor = 'primary',
   testID = 'notifications-screen',
 }) => {
+  const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
   const styles = useMemo(() => getStyles(tokens), [tokens]);
   const { notificationsEnabled, setNotificationsEnabled, isLoading } = useNotificationSettings();
 
+  const header = (
+    <NavigationHeader
+      title={translations.title}
+      onBackPress={() => navigation.goBack()}
+    />
+  );
+
   if (isLoading) {
     return (
-      <ScreenLayout testID={testID}>
+      <ScreenLayout testID={testID} header={header}>
         <AtomicSpinner
           size="lg"
           color="primary"
@@ -48,34 +66,43 @@ export const NotificationsScreen: React.FC<NotificationsScreenProps> = ({
   }
 
   return (
-    <ScreenLayout testID={testID} hideScrollIndicator>
-      <AtomicCard style={styles.card}>
-        <View style={styles.settingItem}>
-          <View style={styles.iconContainer}>
-            <AtomicIcon name={iconName} size="lg" color={iconColor as IconColor} />
+    <ScreenLayout 
+      testID={testID} 
+      hideScrollIndicator 
+      header={header}
+    >
+      <View style={styles.content}>
+        <AtomicCard style={styles.card}>
+          <View style={styles.settingItem}>
+            <View style={styles.iconContainer}>
+              <AtomicIcon name={iconName} size="lg" color={iconColor as IconColor} />
+            </View>
+            <View style={styles.textContainer}>
+              <AtomicText type="bodyLarge" style={{ color: tokens.colors.textPrimary }}>
+                {translations.title}
+              </AtomicText>
+              <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary, marginTop: BASE_TOKENS.spacing.xs }}>
+                {translations.description}
+              </AtomicText>
+            </View>
+            <Switch
+              value={notificationsEnabled}
+              onValueChange={setNotificationsEnabled}
+              trackColor={{ false: tokens.colors.surfaceSecondary, true: tokens.colors.primary }}
+              thumbColor={tokens.colors.surface}
+              testID="notifications-toggle"
+            />
           </View>
-          <View style={styles.textContainer}>
-            <AtomicText type="bodyLarge" style={{ color: tokens.colors.textPrimary }}>
-              {translations.title}
-            </AtomicText>
-            <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary, marginTop: BASE_TOKENS.spacing.xs }}>
-              {translations.description}
-            </AtomicText>
-          </View>
-          <Switch
-            value={notificationsEnabled}
-            onValueChange={setNotificationsEnabled}
-            trackColor={{ false: tokens.colors.surfaceSecondary, true: tokens.colors.primary }}
-            thumbColor={tokens.colors.surface}
-            testID="notifications-toggle"
-          />
-        </View>
-      </AtomicCard>
+        </AtomicCard>
+      </View>
     </ScreenLayout>
   );
 };
 
 const getStyles = (tokens: DesignTokens) => StyleSheet.create({
+  content: {
+    padding: BASE_TOKENS.spacing.md,
+  },
   loadingContainer: {
     flex: 1,
     justifyContent: 'center',

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

@@ -0,0 +1,35 @@
+import type { Reminder, ReminderFrequency, CreateReminderInput, TimePreset } from '../../../infrastructure/services/types';
+
+export const DEFAULT_HOUR = 9;
+export const DEFAULT_MINUTE = 0;
+export const DEFAULT_WEEKDAY = 2; // Tuesday
+export const MAX_TITLE_LENGTH = 100;
+export const MAX_BODY_LENGTH = 500;
+
+export const VALID_HOUR_RANGE = { min: 0, max: 23 } as const;
+export const VALID_MINUTE_RANGE = { min: 0, max: 59 } as const;
+export 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[];
+}

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/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";
@@ -67,23 +69,32 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> = React.m
       [handleTutorialPress]
     );
 
+    const navigation = useAppNavigation();
+
     if (isLoading) return <AtomicSpinner size="lg" fullContainer />;
 
     const hasFeatured = featuredTutorials && featuredTutorials.length > 0;
     const hasTutorials = tutorials && tutorials.length > 0;
 
+    const header = (
+      <NavigationHeader
+        title={title}
+        onBackPress={() => navigation.goBack()}
+      />
+    );
+
     if (!hasTutorials && !hasFeatured) {
       return (
-        <View style={styles.emptyContainer}>
-          <AtomicText color="secondary" type="bodyLarge">{emptyMessage}</AtomicText>
-        </View>
+        <ScreenLayout header={header} edges={["bottom"]}>
+          <View style={styles.emptyContainer}>
+            <AtomicText color="secondary" type="bodyLarge">{emptyMessage}</AtomicText>
+          </View>
+        </ScreenLayout>
       );
     }
 
     return (
-      <ScreenLayout scrollable={false} edges={["top", "bottom"]}>
-        <AtomicText style={styles.title}>{title}</AtomicText>
-
+      <ScreenLayout header={header} scrollable={false} edges={["bottom"]}>
         {hasFeatured && (
           <View style={styles.section}>
             <AtomicText color="secondary" style={styles.sectionTitle}>{featuredTitle}</AtomicText>

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

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

@@ -0,0 +1,163 @@
+import React, { useMemo } from 'react';
+import type { StackScreen } from "@umituz/react-native-design-system";
+import { LanguageSelectionScreen } from "../../../domains/localization";
+import { NotificationSettingsScreen } from "../../../domains/notifications";
+import { AccountScreen } from "@umituz/react-native-auth";
+import { SettingsScreen } from "../../screens/SettingsScreen";
+import { AppearanceScreen } from "../../screens/AppearanceScreen";
+import { FAQScreen } from "../../../domains/faqs";
+import { AboutScreen } from "../../../domains/about";
+import { LegalScreen } from "../../../domains/legal";
+import { GamificationScreen } from "../../../domains/gamification";
+import type { SettingsStackNavigatorProps, AdditionalScreen } from "../types";
+
+export interface UseSettingsScreensProps extends SettingsStackNavigatorProps {
+  aboutConfig: any;
+  legalProps: any;
+  notificationTranslations: any;
+  quietHoursTranslations: any;
+  t: (key: string) => string;
+}
+
+export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[] => {
+  const {
+    appInfo,
+    config,
+    showUserProfile,
+    userProfile,
+    devSettings,
+    customSections,
+    showHeader,
+    showCloseButton,
+    onClose,
+    aboutConfig,
+    legalProps,
+    notificationTranslations,
+    quietHoursTranslations,
+    faqData,
+    additionalScreens,
+    gamificationConfig,
+    accountConfig,
+    t,
+  } = props;
+
+  return useMemo(() => {
+    const baseScreens: StackScreen[] = [
+      {
+        name: "SettingsMain",
+        options: { headerShown: false },
+        children: () => React.createElement(SettingsScreen, {
+          config,
+          appVersion: appInfo.version,
+          showUserProfile,
+          userProfile,
+          devSettings,
+          customSections,
+          showHeader,
+          showCloseButton,
+          onClose,
+        }),
+      },
+      {
+        name: "Appearance",
+        component: AppearanceScreen as any,
+        options: { headerShown: false },
+      },
+      {
+        name: "About",
+        options: { headerShown: false },
+        children: () => React.createElement(AboutScreen, { config: aboutConfig }),
+      },
+      {
+        name: "Legal",
+        options: { headerShown: false },
+        children: () => React.createElement(LegalScreen, legalProps),
+      },
+      {
+        name: "Notifications",
+        options: { headerShown: false },
+        children: () => React.createElement(NotificationSettingsScreen, {
+          translations: notificationTranslations,
+          quietHoursTranslations,
+        }),
+      },
+    ];
+
+    const faqScreen: StackScreen | null = (faqData && faqData.categories?.length > 0)
+      ? {
+          name: "FAQ",
+          options: { headerShown: false },
+          children: () => React.createElement(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;
+
+    const additionalStackScreens: StackScreen[] = (additionalScreens || []).map((screen: AdditionalScreen): StackScreen => {
+      const stackScreen: any = { name: screen.name };
+      if (screen.component) stackScreen.component = screen.component;
+      if (screen.children) stackScreen.children = screen.children;
+      if (screen.options) stackScreen.options = screen.options;
+      return stackScreen as StackScreen;
+    });
+
+    const gamificationScreen: StackScreen | null = gamificationConfig?.enabled
+      ? {
+          name: "Gamification",
+          options: { headerShown: false },
+          children: () => React.createElement(GamificationScreen, { config: gamificationConfig }),
+        }
+      : null;
+
+    const languageScreen: StackScreen = {
+      name: "LanguageSelection",
+      options: { headerShown: false },
+      children: () => React.createElement(LanguageSelectionScreen, {
+        headerTitle: t("settings.language.title"),
+        searchPlaceholder: t("settings.languageSelection.searchPlaceholder"),
+      }),
+    };
+
+    const accountScreen: StackScreen | null = accountConfig
+      ? {
+          name: "Account",
+          options: { headerShown: false },
+          children: () => React.createElement(AccountScreen, { config: accountConfig }),
+        }
+      : null;
+
+    const allScreens: StackScreen[] = [
+      ...baseScreens,
+      ...(faqScreen ? [faqScreen] : []),
+      ...additionalStackScreens,
+      ...(gamificationScreen ? [gamificationScreen] : []),
+      languageScreen,
+      ...(accountScreen ? [accountScreen] : []),
+    ];
+
+    return allScreens;
+  }, [
+    t,
+    showHeader,
+    showCloseButton,
+    onClose,
+    config,
+    appInfo.version,
+    showUserProfile,
+    userProfile,
+    devSettings,
+    customSections,
+    aboutConfig,
+    legalProps,
+    notificationTranslations,
+    quietHoursTranslations,
+    faqData,
+    additionalScreens,
+    gamificationConfig,
+    accountConfig,
+  ]);
+};

package/src/presentation/screens/SettingsScreen.tsx

@@ -6,7 +6,6 @@
 import React from "react";
 import {
   ScreenLayout,
-  useAppNavigation,
 } from "@umituz/react-native-design-system";
 import { useSettingsScreen } from "./hooks/useSettingsScreen";
 import { SettingsHeader } from "./components/SettingsHeader";

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

@@ -1,8 +1,5 @@
-/**
- * Settings Header Component
- * Handles close button functionality
- */
-
+import React from "react";
+import { Pressable } from "react-native";
 import { useAppDesignTokens, AtomicIcon, useAppNavigation, NavigationHeader } from "@umituz/react-native-design-system";
 import { useLocalization } from "../../../domains/localization";
 

package/src/utils/appUtils.ts

@@ -16,6 +16,13 @@ export function getAppVersion(): string {
   return version;
 }
 
+/**
+ * Gets the current build number from Expo constants
+ */
+export function getBuildNumber(): string | undefined {
+  return Constants.expoConfig?.ios?.buildNumber ?? Constants.expoConfig?.android?.versionCode?.toString();
+}
+
 /**
  * Validates if the current platform is supported
  */