@umituz/react-native-settings 4.21.11 → 4.21.13

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

@@ -0,0 +1,169 @@
+/**
+ * ReminderForm Component
+ * Form for creating and editing reminders
+ */
+
+import React, { useState, useMemo, useCallback } from 'react';
+import { View, TextInput, StyleSheet, ScrollView } from 'react-native';
+import { AtomicText } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { TimePresetSelector } from './TimePresetSelector';
+import { FrequencySelector } from './FrequencySelector';
+import { WeekdaySelector } from './WeekdaySelector';
+import { FormButton } from './FormButton';
+import { DEFAULT_TIME_PRESETS, FREQUENCY_OPTIONS } from '../../infrastructure/config/reminderPresets';
+import type { Reminder, ReminderFrequency, CreateReminderInput, TimePreset } from '../../../infrastructure/services/types';
+
+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[];
+}
+
+export const ReminderForm: React.FC<ReminderFormProps> = ({
+  initialData,
+  translations,
+  onSave,
+  onCancel,
+  timePresets = DEFAULT_TIME_PRESETS,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const [title, setTitle] = useState(initialData?.title || '');
+  const [body, setBody] = useState(initialData?.body || '');
+  const [frequency, setFrequency] = useState<ReminderFrequency>(initialData?.frequency || 'daily');
+  const [selectedPresetId, setSelectedPresetId] = useState<string | undefined>(initialData?.timePresetId);
+  const [hour, setHour] = useState(initialData?.hour ?? 9);
+  const [minute, setMinute] = useState(initialData?.minute ?? 0);
+  const [weekday, setWeekday] = useState(initialData?.weekday ?? 2);
+  const [isCustomTime, setIsCustomTime] = useState(!initialData?.timePresetId);
+
+  const handlePresetSelect = useCallback((preset: TimePreset) => {
+    setSelectedPresetId(preset.id);
+    setHour(preset.hour);
+    setMinute(preset.minute);
+    setIsCustomTime(false);
+  }, []);
+
+  const handleCustomSelect = useCallback(() => {
+    setSelectedPresetId(undefined);
+    setIsCustomTime(true);
+  }, []);
+
+  const handleSave = useCallback(() => {
+    if (!title.trim()) return;
+    onSave({
+      title: title.trim(),
+      body: body.trim(),
+      frequency,
+      timePresetId: isCustomTime ? undefined : selectedPresetId,
+      hour,
+      minute,
+      weekday: frequency === 'weekly' ? weekday : undefined,
+      dayOfMonth: frequency === 'monthly' ? 1 : undefined,
+    });
+  }, [title, body, frequency, selectedPresetId, hour, minute, weekday, isCustomTime, onSave]);
+
+  return (
+    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+      <View style={styles.section}>
+        <AtomicText type="bodyMedium" style={styles.label}>{translations.titleLabel}</AtomicText>
+        <TextInput
+          style={styles.input}
+          value={title}
+          onChangeText={setTitle}
+          placeholder={translations.titlePlaceholder}
+          placeholderTextColor={tokens.colors.textSecondary}
+        />
+      </View>
+
+      <View style={styles.section}>
+        <AtomicText type="bodyMedium" style={styles.label}>{translations.bodyLabel}</AtomicText>
+        <TextInput
+          style={[styles.input, styles.multilineInput]}
+          value={body}
+          onChangeText={setBody}
+          placeholder={translations.bodyPlaceholder}
+          placeholderTextColor={tokens.colors.textSecondary}
+          multiline
+          numberOfLines={3}
+        />
+      </View>
+
+      <View style={styles.section}>
+        <AtomicText type="bodyMedium" style={styles.label}>{translations.frequencyLabel}</AtomicText>
+        <FrequencySelector
+          options={FREQUENCY_OPTIONS}
+          selectedFrequency={frequency}
+          onSelect={setFrequency}
+          getLabel={translations.getFrequencyLabel}
+        />
+      </View>
+
+      <View style={styles.section}>
+        <AtomicText type="bodyMedium" style={styles.label}>{translations.timeLabel}</AtomicText>
+        <TimePresetSelector
+          presets={timePresets}
+          selectedPresetId={selectedPresetId}
+          customTime={isCustomTime ? { hour, minute } : undefined}
+          onSelectPreset={handlePresetSelect}
+          onSelectCustom={handleCustomSelect}
+          getPresetLabel={translations.getPresetLabel}
+          customLabel={translations.customTimeLabel}
+          isCustomSelected={isCustomTime}
+        />
+      </View>
+
+      {frequency === 'weekly' && (
+        <View style={styles.section}>
+          <AtomicText type="bodyMedium" style={styles.label}>{translations.weekdayLabel}</AtomicText>
+          <WeekdaySelector selectedWeekday={weekday} onSelect={setWeekday} getLabel={translations.getWeekdayLabel} />
+        </View>
+      )}
+
+      <View style={styles.buttonRow}>
+        <FormButton label={translations.cancelButton} onPress={onCancel} variant="secondary" />
+        <FormButton label={translations.saveButton} onPress={handleSave} disabled={!title.trim()} />
+      </View>
+    </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/components/ReminderItem.tsx

@@ -0,0 +1,130 @@
+/**
+ * ReminderItem Component
+ * Displays a single reminder with toggle and actions
+ */
+
+import React, { useMemo } from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { Switch } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import type { Reminder, ReminderFrequency } from '../../../infrastructure/services/types';
+
+export interface ReminderItemTranslations {
+  frequencyOnce: string;
+  frequencyDaily: string;
+  frequencyWeekly: string;
+  frequencyMonthly: string;
+}
+
+export interface ReminderItemProps {
+  reminder: Reminder;
+  translations: ReminderItemTranslations;
+  onToggle: (id: string) => void;
+  onEdit: (reminder: Reminder) => void;
+  onDelete: (id: string) => void;
+}
+
+const formatTime = (hour: number, minute: number): string => {
+  return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+};
+
+const getFrequencyIcon = (frequency: ReminderFrequency): string => {
+  const icons: Record<ReminderFrequency, string> = {
+    once: 'calendar',
+    daily: 'repeat',
+    weekly: 'calendar',
+    monthly: 'calendar',
+  };
+  return icons[frequency] || 'notifications';
+};
+
+export const ReminderItem: React.FC<ReminderItemProps> = ({
+  reminder,
+  translations,
+  onToggle,
+  onEdit,
+  onDelete,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const getFrequencyLabel = (frequency: ReminderFrequency): string => {
+    const labels: Record<ReminderFrequency, string> = {
+      once: translations.frequencyOnce,
+      daily: translations.frequencyDaily,
+      weekly: translations.frequencyWeekly,
+      monthly: translations.frequencyMonthly,
+    };
+    return labels[frequency] || '';
+  };
+
+  return (
+    <View style={[styles.container, !reminder.enabled ? styles.disabled : undefined]}>
+      <TouchableOpacity style={styles.content} onPress={() => onEdit(reminder)} activeOpacity={0.7}>
+        <View style={styles.iconContainer}>
+          <AtomicIcon
+            name={getFrequencyIcon(reminder.frequency)}
+            size="md"
+            color={reminder.enabled ? 'primary' : 'secondary'}
+          />
+        </View>
+        <View style={styles.textContainer}>
+          <AtomicText type="bodyLarge" style={!reminder.enabled ? styles.disabledText : undefined}>
+            {reminder.title}
+          </AtomicText>
+          <View style={styles.metaRow}>
+            <AtomicText type="bodySmall" style={styles.time}>
+              {formatTime(reminder.hour, reminder.minute)}
+            </AtomicText>
+            <AtomicText type="bodySmall" style={styles.frequency}>
+              {getFrequencyLabel(reminder.frequency)}
+            </AtomicText>
+          </View>
+        </View>
+      </TouchableOpacity>
+
+      <View style={styles.actions}>
+        <TouchableOpacity style={styles.deleteButton} onPress={() => onDelete(reminder.id)}>
+          <AtomicIcon name="trash" size="sm" color="error" />
+        </TouchableOpacity>
+        <Switch
+          value={reminder.enabled}
+          onValueChange={() => onToggle(reminder.id)}
+          trackColor={{ false: tokens.colors.surfaceSecondary, true: tokens.colors.primary }}
+          thumbColor={tokens.colors.surface}
+        />
+      </View>
+    </View>
+  );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 16,
+      backgroundColor: tokens.colors.surface,
+      borderRadius: 12,
+      marginBottom: 8,
+    },
+    disabled: { opacity: 0.6 },
+    content: { flex: 1, flexDirection: 'row', alignItems: 'center' },
+    iconContainer: {
+      width: 44,
+      height: 44,
+      borderRadius: 22,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: 12,
+    },
+    textContainer: { flex: 1 },
+    disabledText: { color: tokens.colors.textSecondary },
+    metaRow: { flexDirection: 'row', alignItems: 'center', gap: 8, marginTop: 4 },
+    time: { color: tokens.colors.primary, fontWeight: '600' },
+    frequency: { color: tokens.colors.textSecondary },
+    actions: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+    deleteButton: { padding: 4 },
+  });

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

@@ -0,0 +1,100 @@
+/**
+ * TimePresetSelector Component
+ * Allows selection of preset times or custom time
+ */
+
+import React, { useMemo } from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import type { TimePreset } from '../../../infrastructure/services/types';
+
+export interface TimePresetSelectorProps {
+  presets: TimePreset[];
+  selectedPresetId?: string;
+  customTime?: { hour: number; minute: number };
+  onSelectPreset: (preset: TimePreset) => void;
+  onSelectCustom: () => void;
+  getPresetLabel: (labelKey: string) => string;
+  customLabel: string;
+  isCustomSelected: boolean;
+}
+
+const formatTime = (hour: number, minute: number): string => {
+  return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+};
+
+export const TimePresetSelector: React.FC<TimePresetSelectorProps> = ({
+  presets,
+  selectedPresetId,
+  customTime,
+  onSelectPreset,
+  onSelectCustom,
+  getPresetLabel,
+  customLabel,
+  isCustomSelected,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  return (
+    <View style={styles.container}>
+      {presets.map(preset => {
+        const isSelected = selectedPresetId === preset.id && !isCustomSelected;
+        return (
+          <TouchableOpacity
+            key={preset.id}
+            style={[styles.button, isSelected ? styles.selectedButton : undefined]}
+            onPress={() => onSelectPreset(preset)}
+            activeOpacity={0.7}
+          >
+            <AtomicIcon
+              name={preset.iconName}
+              size="md"
+              color={isSelected ? 'onSurface' : 'secondary'}
+            />
+            <AtomicText type="bodySmall" style={isSelected ? styles.selectedText : styles.text}>
+              {getPresetLabel(preset.labelKey)}
+            </AtomicText>
+            <AtomicText type="bodySmall" style={isSelected ? styles.selectedText : styles.subText}>
+              {formatTime(preset.hour, preset.minute)}
+            </AtomicText>
+          </TouchableOpacity>
+        );
+      })}
+
+      <TouchableOpacity
+        style={[styles.button, isCustomSelected ? styles.selectedButton : undefined]}
+        onPress={onSelectCustom}
+        activeOpacity={0.7}
+      >
+        <AtomicIcon name="time" size="md" color={isCustomSelected ? 'onSurface' : 'secondary'} />
+        <AtomicText type="bodySmall" style={isCustomSelected ? styles.selectedText : styles.text}>
+          {customLabel}
+        </AtomicText>
+        {customTime ? (
+          <AtomicText type="bodySmall" style={isCustomSelected ? styles.selectedText : styles.subText}>
+            {formatTime(customTime.hour, customTime.minute)}
+          </AtomicText>
+        ) : null}
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+    button: {
+      paddingVertical: 8,
+      paddingHorizontal: 12,
+      borderRadius: 8,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      alignItems: 'center',
+      minWidth: 72,
+    },
+    selectedButton: { backgroundColor: tokens.colors.primary },
+    text: { color: tokens.colors.textSecondary, marginTop: 4 },
+    subText: { color: tokens.colors.textSecondary, marginTop: 2, opacity: 0.7 },
+    selectedText: { color: tokens.colors.surface, marginTop: 4 },
+  });

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

@@ -0,0 +1,61 @@
+/**
+ * WeekdaySelector Component
+ * Allows selection of a weekday for weekly reminders
+ */
+
+import React, { useMemo } from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { AtomicText } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { WEEKDAY_OPTIONS } from '../../infrastructure/config/reminderPresets';
+
+export interface WeekdaySelectorProps {
+  selectedWeekday: number;
+  onSelect: (weekday: number) => void;
+  getLabel: (key: string) => string;
+}
+
+export const WeekdaySelector: React.FC<WeekdaySelectorProps> = ({
+  selectedWeekday,
+  onSelect,
+  getLabel,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  return (
+    <View style={styles.container}>
+      {WEEKDAY_OPTIONS.map(option => {
+        const isSelected = selectedWeekday === option.id;
+        return (
+          <TouchableOpacity
+            key={option.id}
+            style={[styles.button, isSelected ? styles.selectedButton : undefined]}
+            onPress={() => onSelect(option.id)}
+            activeOpacity={0.7}
+          >
+            <AtomicText type="bodySmall" style={isSelected ? styles.selectedText : styles.text}>
+              {getLabel(option.shortLabelKey)}
+            </AtomicText>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: { flexDirection: 'row', justifyContent: 'space-between', gap: 4 },
+    button: {
+      flex: 1,
+      paddingVertical: 10,
+      paddingHorizontal: 4,
+      borderRadius: 8,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      alignItems: 'center',
+    },
+    selectedButton: { backgroundColor: tokens.colors.primary },
+    text: { color: tokens.colors.textSecondary, fontWeight: '500' },
+    selectedText: { color: tokens.colors.surface, fontWeight: '500' },
+  });

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

@@ -0,0 +1,131 @@
+/**
+ * ReminderListScreen
+ * Displays list of reminders with add, edit, delete functionality
+ */
+
+import React, { useEffect, 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 { ReminderItem } from '../components/ReminderItem';
+import { useRemindersStore, useReminders, useRemindersLoading } from '../../infrastructure/storage/RemindersStore';
+import { useReminderActions } from '../../infrastructure/hooks/useReminderActions';
+import type { Reminder, ReminderTranslations } from '../../../infrastructure/services/types';
+
+export interface ReminderListScreenProps {
+  translations: ReminderTranslations;
+  onAddPress: () => void;
+  onEditPress: (reminder: Reminder) => void;
+  maxReminders?: number;
+}
+
+export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
+  translations,
+  onAddPress,
+  onEditPress,
+  maxReminders = 20,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const reminders = useReminders();
+  const isLoading = useRemindersLoading();
+  const { toggleReminderEnabled, removeReminder } = useReminderActions();
+
+  const handleToggle = useCallback(async (id: string) => {
+    await toggleReminderEnabled(id);
+  }, [toggleReminderEnabled]);
+
+  const handleDelete = useCallback(async (id: string) => {
+    await removeReminder(id);
+  }, [removeReminder]);
+
+  const canAddMore = reminders.length < maxReminders;
+
+  const renderItem = useCallback(({ item }: { item: Reminder }) => (
+    <ReminderItem
+      reminder={item}
+      translations={{
+        frequencyOnce: translations.frequencyOnce,
+        frequencyDaily: translations.frequencyDaily,
+        frequencyWeekly: translations.frequencyWeekly,
+        frequencyMonthly: translations.frequencyMonthly,
+      }}
+      onToggle={handleToggle}
+      onEdit={onEditPress}
+      onDelete={handleDelete}
+    />
+  ), [translations, handleToggle, onEditPress, handleDelete]);
+
+  const renderEmpty = useCallback(() => (
+    <View style={styles.emptyContainer}>
+      <View style={styles.emptyIconContainer}>
+        <AtomicIcon name="notifications-off" size="xl" color="secondary" />
+      </View>
+      <AtomicText type="bodyLarge" style={styles.emptyTitle}>{translations.emptyTitle}</AtomicText>
+      <AtomicText type="bodySmall" style={styles.emptyDescription}>{translations.emptyDescription}</AtomicText>
+    </View>
+  ), [translations, styles]);
+
+  const keyExtractor = useCallback((item: Reminder) => item.id, []);
+
+  if (isLoading) {
+    return (
+      <View style={[styles.loadingContainer, { backgroundColor: tokens.colors.surface }]}>
+        <AtomicSpinner size="lg" color="primary" fullContainer />
+      </View>
+    );
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <FlatList
+        data={reminders}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        ListEmptyComponent={renderEmpty}
+        contentContainerStyle={[styles.listContent, { backgroundColor: tokens.colors.surface }]}
+        showsVerticalScrollIndicator={false}
+      />
+
+      {canAddMore && (
+        <TouchableOpacity style={styles.fab} onPress={onAddPress} activeOpacity={0.8}>
+          <AtomicIcon name="add" size="md" color="onSurface" />
+          <AtomicText type="bodyMedium" style={styles.fabText}>{translations.addButtonLabel}</AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+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 },
+    emptyIconContainer: {
+      width: 80,
+      height: 80,
+      borderRadius: 40,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginBottom: 16,
+    },
+    emptyTitle: { color: tokens.colors.textPrimary, textAlign: 'center', marginBottom: 8 },
+    emptyDescription: { color: tokens.colors.textSecondary, textAlign: 'center' },
+    fab: {
+      position: 'absolute',
+      bottom: 24,
+      left: 16,
+      right: 16,
+      backgroundColor: tokens.colors.primary,
+      borderRadius: 12,
+      paddingVertical: 14,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 8,
+    },
+    fabText: { color: tokens.colors.surface, fontWeight: '600' },
+  });

package/src/index.ts

@@ -128,6 +128,9 @@ export * from "./domains/gamification";
 // PRESENTATION LAYER - Config Creator Utilities
 // =============================================================================
 
+// Notifications Domain
+export * from "./domains/notifications";
+
 export {
   createAppearanceConfig,
   createLanguageConfig,

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -8,9 +8,13 @@
 import React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import { useLocalization, LanguageSelectionScreen } from "@umituz/react-native-localization";
-import { NotificationSettingsScreen } from "@umituz/react-native-notifications";
+import { NotificationSettingsScreen } from "@notifications";
 import { AccountScreen } from "@umituz/react-native-auth";
-import { useAppDesignTokens, createScreenOptions } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+
+// ...
+
+
 import { AppearanceScreen } from "../screens/AppearanceScreen";
 import { FAQScreen } from "../../domains/faqs";
 import { useNavigationHandlers } from "./hooks";
@@ -49,15 +53,21 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
     useNavigationHandlers(appInfo, legalUrls);
 
   const screenOptions = React.useMemo(
-    () =>
-      createScreenOptions({
-        colors: {
-          surface: tokens.colors.surface,
-          textPrimary: tokens.colors.textPrimary,
-          borderLight: tokens.colors.borderLight,
-        },
-        backTitle: t("settings.title"),
-      }),
+    () => ({
+      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"),
+    }),
     [tokens, t]
   );
   const notificationTranslations = React.useMemo(() => createNotificationTranslations(t), [t]);

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { useNavigation } from "@react-navigation/native";
 import { AppearanceSection } from "../../../../domains/appearance/presentation/components/AppearanceSection";
-import { NotificationsSection } from "@umituz/react-native-notifications";
+import { NotificationsSection } from "@notifications";
 import { useLocalization, getLanguageByCode } from "@umituz/react-native-localization";
 import { SettingsItemCard } from "../../../components/SettingsItemCard";
 import type { NormalizedConfig } from "../../utils/normalizeConfig";