@umituz/react-native-notifications 1.3.2 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-notifications",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "Offline-first local notifications system for React Native apps using expo-notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/infrastructure/services/NotificationManager.ts

@@ -56,6 +56,8 @@ export class NotificationManager {
         shouldShowAlert: true,
         shouldPlaySound: true,
         shouldSetBadge: true,
+        shouldShowBanner: true,
+        shouldShowList: true,
       }),
     });
 

package/src/infrastructure/storage/RemindersStore.ts

@@ -25,6 +25,7 @@ interface RemindersState {
 }
 
 interface RemindersActions {
+  initialize: () => Promise<void>;
   loadReminders: () => Promise<void>;
   addReminder: (reminder: Reminder) => Promise<void>;
   updateReminder: (id: string, updates: Partial<Reminder>) => Promise<void>;
@@ -44,8 +45,8 @@ type RemindersStore = RemindersState & RemindersActions;
 
 const DEFAULT_PREFERENCES: NotificationPreferences = {
   enabled: false,
-  sound: false,
-  vibration: false,
+  sound: true,
+  vibration: true,
   quietHours: {
     enabled: false,
     startHour: 22,
@@ -65,13 +66,34 @@ export const useRemindersStore = create<RemindersStore>((set, get) => ({
   isLoading: true,
   isInitialized: false,
 
+  initialize: async () => {
+    try {
+      const [remindersData, preferencesData] = await Promise.all([
+        AsyncStorage.getItem(STORAGE_KEYS.REMINDERS),
+        AsyncStorage.getItem(STORAGE_KEYS.PREFERENCES)
+      ]);
+
+      const reminders = remindersData ? JSON.parse(remindersData) : [];
+      let preferences = DEFAULT_PREFERENCES;
+
+      if (preferencesData) {
+        const parsed = JSON.parse(preferencesData);
+        preferences = { ...DEFAULT_PREFERENCES, ...parsed };
+      }
+
+      set({ reminders, preferences, isLoading: false, isInitialized: true });
+    } catch {
+      set({ reminders: [], preferences: DEFAULT_PREFERENCES, isLoading: false, isInitialized: true });
+    }
+  },
+
   loadReminders: async () => {
     try {
       const data = await AsyncStorage.getItem(STORAGE_KEYS.REMINDERS);
       const reminders = data ? JSON.parse(data) : [];
-      set({ reminders, isLoading: false, isInitialized: true });
+      set({ reminders });
     } catch {
-      set({ reminders: [], isLoading: false, isInitialized: true });
+      set({ reminders: [] });
     }
   },
 

package/src/presentation/components/FrequencySelector.tsx

@@ -40,7 +40,7 @@ export const FrequencySelector: React.FC<FrequencySelectorProps> = ({
             <AtomicIcon
               name={option.iconName}
               size="sm"
-              color={isSelected ? 'surface' : 'textSecondary'}
+              color={isSelected ? 'onSurface' : 'secondary'}
             />
             <AtomicText type="bodySmall" style={isSelected ? styles.selectedText : styles.text}>
               {getLabel(option.labelKey)}

package/src/presentation/components/NotificationsSection.tsx

@@ -89,7 +89,7 @@ export const NotificationsSection: React.FC<NotificationsSectionProps> = ({
             thumbColor={tokens.colors.surface}
           />
         ) : (
-          <AtomicIcon name="chevron-forward" size="md" color="textSecondary" />
+          <AtomicIcon name="chevron-forward" size="md" color="secondary" />
         )}
       </TouchableOpacity>
     </View>

package/src/presentation/components/QuietHoursCard.tsx

@@ -5,7 +5,8 @@
 
 import React, { useMemo } from 'react';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
-import { AtomicText, AtomicIcon, AtomicSwitch, AtomicCard } from '@umituz/react-native-design-system';
+import { AtomicText, AtomicIcon, AtomicCard } from '@umituz/react-native-design-system';
+import { Switch } from 'react-native';
 import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
 import type { QuietHoursConfig, QuietHoursTranslations } from '../../infrastructure/services/types';
 
@@ -41,7 +42,12 @@ export const QuietHoursCard: React.FC<QuietHoursCardProps> = ({
           <AtomicText type="bodyLarge">{translations.title}</AtomicText>
           <AtomicText type="bodySmall" style={styles.description}>{translations.description}</AtomicText>
         </View>
-        <AtomicSwitch value={config.enabled} onValueChange={onToggle} />
+        <Switch
+          value={config.enabled}
+          onValueChange={onToggle}
+          trackColor={{ false: tokens.colors.surfaceSecondary, true: tokens.colors.primary }}
+          thumbColor={tokens.colors.surface}
+        />
       </View>
 
       {config.enabled && (
@@ -54,7 +60,7 @@ export const QuietHoursCard: React.FC<QuietHoursCardProps> = ({
           </TouchableOpacity>
 
           <View style={styles.timeSeparator}>
-            <AtomicIcon name="arrow-forward" size="sm" color="textSecondary" />
+            <AtomicIcon name="arrow-forward" size="sm" color="secondary" />
           </View>
 
           <TouchableOpacity style={styles.timeButton} onPress={onEndTimePress} activeOpacity={0.7}>

package/src/presentation/components/ReminderItem.tsx

@@ -5,7 +5,8 @@
 
 import React, { useMemo } from 'react';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
-import { AtomicText, AtomicIcon, AtomicSwitch } from '@umituz/react-native-design-system';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { Switch } from 'react-native';
 import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
 import type { Reminder, ReminderFrequency } from '../../infrastructure/services/types';
 
@@ -65,7 +66,7 @@ export const ReminderItem: React.FC<ReminderItemProps> = ({
           <AtomicIcon
             name={getFrequencyIcon(reminder.frequency)}
             size="md"
-            color={reminder.enabled ? 'primary' : 'textSecondary'}
+            color={reminder.enabled ? 'primary' : 'secondary'}
           />
         </View>
         <View style={styles.textContainer}>
@@ -87,7 +88,12 @@ export const ReminderItem: React.FC<ReminderItemProps> = ({
         <TouchableOpacity style={styles.deleteButton} onPress={() => onDelete(reminder.id)}>
           <AtomicIcon name="trash" size="sm" color="error" />
         </TouchableOpacity>
-        <AtomicSwitch value={reminder.enabled} onValueChange={() => onToggle(reminder.id)} />
+        <Switch
+          value={reminder.enabled}
+          onValueChange={() => onToggle(reminder.id)}
+          trackColor={{ false: tokens.colors.surfaceSecondary, true: tokens.colors.primary }}
+          thumbColor={tokens.colors.surface}
+        />
       </View>
     </View>
   );

package/src/presentation/components/TimePresetSelector.tsx

@@ -51,7 +51,7 @@ export const TimePresetSelector: React.FC<TimePresetSelectorProps> = ({
             <AtomicIcon
               name={preset.iconName}
               size="md"
-              color={isSelected ? 'surface' : 'textSecondary'}
+              color={isSelected ? 'onSurface' : 'secondary'}
             />
             <AtomicText type="bodySmall" style={isSelected ? styles.selectedText : styles.text}>
               {getPresetLabel(preset.labelKey)}
@@ -68,7 +68,7 @@ export const TimePresetSelector: React.FC<TimePresetSelectorProps> = ({
         onPress={onSelectCustom}
         activeOpacity={0.7}
       >
-        <AtomicIcon name="time" size="md" color={isCustomSelected ? 'surface' : 'textSecondary'} />
+        <AtomicIcon name="time" size="md" color={isCustomSelected ? 'onSurface' : 'secondary'} />
         <AtomicText type="bodySmall" style={isCustomSelected ? styles.selectedText : styles.text}>
           {customLabel}
         </AtomicText>

package/src/presentation/screens/NotificationSettingsScreen.tsx

@@ -5,7 +5,8 @@
 
 import React, { useEffect, useMemo, useCallback } from 'react';
 import { View, StyleSheet, ActivityIndicator, ScrollView, TouchableOpacity } from 'react-native';
-import { AtomicText, AtomicIcon, AtomicSwitch, AtomicCard, ScreenLayout } from '@umituz/react-native-design-system';
+import { AtomicText, AtomicIcon, AtomicCard, ScreenLayout } from '@umituz/react-native-design-system';
+import { Switch } from 'react-native';
 import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
 import { QuietHoursCard } from '../components/QuietHoursCard';
 import { useRemindersStore, useNotificationPreferences, useQuietHours, useReminders } from '../../infrastructure/storage/RemindersStore';
@@ -33,11 +34,11 @@ export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProp
   const preferences = useNotificationPreferences();
   const quietHours = useQuietHours();
   const reminders = useReminders();
-  const { loadPreferences, updatePreferences, updateQuietHours, isLoading } = useRemindersStore();
+  const { initialize, updatePreferences, updateQuietHours, isLoading } = useRemindersStore();
 
   useEffect(() => {
-    loadPreferences();
-  }, [loadPreferences]);
+    initialize();
+  }, [initialize]);
 
   const handleMasterToggle = useCallback(async (value: boolean) => {
     if (value) {
@@ -122,7 +123,7 @@ export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProp
                     <AtomicText type="bodySmall" style={styles.badgeText}>{reminders.length}</AtomicText>
                   </View>
                 )}
-                <AtomicIcon name="chevron-forward" size="md" color="textSecondary" />
+                <AtomicIcon name="chevron-forward" size="md" color="secondary" />
               </TouchableOpacity>
             </AtomicCard>
 
@@ -160,7 +161,12 @@ const SettingRow: React.FC<SettingRowProps> = ({ iconName, title, description, v
         <AtomicText type="bodyLarge">{title}</AtomicText>
         <AtomicText type="bodySmall" style={styles.description}>{description}</AtomicText>
       </View>
-      <AtomicSwitch value={value} onValueChange={onToggle} />
+      <Switch
+        value={value}
+        onValueChange={onToggle}
+        trackColor={{ false: tokens.colors.surfaceSecondary, true: tokens.colors.primary }}
+        thumbColor={tokens.colors.surface}
+      />
     </View>
   );
 };

package/src/presentation/screens/NotificationsScreen.tsx

@@ -7,7 +7,8 @@
 
 import React, { useMemo } from 'react';
 import { View, StyleSheet, ActivityIndicator } from 'react-native';
-import { AtomicIcon, AtomicSwitch, AtomicCard, AtomicText, ScreenLayout, STATIC_TOKENS } from '@umituz/react-native-design-system';
+import { AtomicIcon, AtomicCard, AtomicText, ScreenLayout, STATIC_TOKENS } from '@umituz/react-native-design-system';
+import { Switch } from 'react-native';
 import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
 import { useNotificationSettings } from '../../infrastructure/hooks/useNotificationSettings';
 import type { DesignTokens } from '@umituz/react-native-design-system';
@@ -38,8 +39,8 @@ export const NotificationsScreen: React.FC<NotificationsScreenProps> = ({
       <ScreenLayout testID={testID}>
         <View style={styles.loadingContainer}>
           <ActivityIndicator size="large" color={tokens.colors.primary} />
-          <AtomicText 
-            type="bodyMedium" 
+          <AtomicText
+            type="bodyMedium"
             style={{ color: tokens.colors.textSecondary, marginTop: STATIC_TOKENS.spacing.md }}
           >
             {translations.loadingText || 'Loading...'}
@@ -64,9 +65,11 @@ export const NotificationsScreen: React.FC<NotificationsScreenProps> = ({
               {translations.description}
             </AtomicText>
           </View>
-          <AtomicSwitch
+          <Switch
             value={notificationsEnabled}
             onValueChange={setNotificationsEnabled}
+            trackColor={{ false: tokens.colors.surfaceSecondary, true: tokens.colors.primary }}
+            thumbColor={tokens.colors.surface}
             testID="notifications-toggle"
           />
         </View>

package/src/presentation/screens/ReminderListScreen.tsx

@@ -65,7 +65,7 @@ export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
   const renderEmpty = useCallback(() => (
     <View style={styles.emptyContainer}>
       <View style={styles.emptyIconContainer}>
-        <AtomicIcon name="notifications-off" size="xl" color="textSecondary" />
+        <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>
@@ -97,7 +97,7 @@ export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
 
       {canAddMore && (
         <TouchableOpacity style={styles.fab} onPress={onAddPress} activeOpacity={0.8}>
-          <AtomicIcon name="add" size="md" color="surface" />
+          <AtomicIcon name="add" size="md" color="onSurface" />
           <AtomicText type="bodyMedium" style={styles.fabText}>{translations.addButtonLabel}</AtomicText>
         </TouchableOpacity>
       )}