@umituz/react-native-notifications 1.3.12 → 1.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-notifications",
-  "version": "1.3.12",
+  "version": "1.3.14",
   "description": "Offline-first local notifications system for React Native apps using expo-notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -29,7 +29,9 @@
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-design-system-atoms": "latest",
     "@umituz/react-native-design-system-theme": "latest",
+    "@umituz/react-native-haptics": "latest",
     "expo-device": ">=6.0.0",
+    "expo-haptics": ">=15.0.0",
     "expo-linear-gradient": ">=14.0.0",
     "expo-notifications": ">=0.28.0",
     "react": ">=18.2.0",

package/src/presentation/components/SettingRow.tsx

@@ -3,7 +3,7 @@
  * Reusable toggle row for settings
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { View, StyleSheet, Switch } from 'react-native';
 import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
@@ -14,6 +14,7 @@ export interface SettingRowProps {
     description: string;
     value: boolean;
     onToggle: (value: boolean) => void;
+    onHapticFeedback?: () => void;
 }
 
 export const SettingRow: React.FC<SettingRowProps> = ({
@@ -21,11 +22,17 @@ export const SettingRow: React.FC<SettingRowProps> = ({
     title,
     description,
     value,
-    onToggle
+    onToggle,
+    onHapticFeedback,
 }) => {
     const tokens = useAppDesignTokens();
     const styles = useMemo(() => createStyles(tokens), [tokens]);
 
+    const handleToggle = useCallback((newValue: boolean) => {
+        onHapticFeedback?.();
+        onToggle(newValue);
+    }, [onToggle, onHapticFeedback]);
+
     return (
         <View style={styles.container}>
             <View style={styles.iconContainer}>
@@ -41,7 +48,7 @@ export const SettingRow: React.FC<SettingRowProps> = ({
             </View>
             <Switch
                 value={value}
-                onValueChange={onToggle}
+                onValueChange={handleToggle}
                 trackColor={{
                     false: tokens.colors.surfaceSecondary,
                     true: tokens.colors.primary

package/src/presentation/screens/NotificationSettingsScreen.tsx

@@ -19,6 +19,7 @@ export interface NotificationSettingsScreenProps {
   onRemindersPress: () => void;
   onStartTimePress: () => void;
   onEndTimePress: () => void;
+  onHapticFeedback?: () => void;
 }
 
 export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProps> = ({
@@ -27,6 +28,7 @@ export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProp
   onRemindersPress,
   onStartTimePress,
   onEndTimePress,
+  onHapticFeedback,
 }) => {
   const tokens = useAppDesignTokens();
   const styles = useMemo(() => createStyles(tokens), [tokens]);
@@ -62,6 +64,7 @@ export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProp
             description={translations.masterToggleDescription}
             value={preferences.enabled}
             onToggle={handleMasterToggle}
+            onHapticFeedback={onHapticFeedback}
           />
         </AtomicCard>
 
@@ -74,6 +77,7 @@ export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProp
                 description={translations.soundDescription}
                 value={preferences.sound}
                 onToggle={handleSoundToggle}
+                onHapticFeedback={onHapticFeedback}
               />
               <View style={styles.divider} />
               <SettingRow
@@ -82,6 +86,7 @@ export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProp
                 description={translations.vibrationDescription}
                 value={preferences.vibration}
                 onToggle={handleVibrationToggle}
+                onHapticFeedback={onHapticFeedback}
               />
             </AtomicCard>
 

package/src/presentation/screens/ReminderListScreen.tsx

@@ -5,7 +5,7 @@
 
 import React, { useEffect, useMemo, useCallback } from 'react';
 import { View, FlatList, StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native';
-import { AtomicText, AtomicIcon, ScreenLayout } from '@umituz/react-native-design-system';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
 import { ReminderItem } from '../components/ReminderItem';
 import { useRemindersStore, useReminders, useRemindersLoading } from '../../infrastructure/storage/RemindersStore';
@@ -76,16 +76,14 @@ export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
 
   if (isLoading) {
     return (
-      <ScreenLayout>
-        <View style={styles.loadingContainer}>
-          <ActivityIndicator size="large" color={tokens.colors.primary} />
-        </View>
-      </ScreenLayout>
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color={tokens.colors.primary} />
+      </View>
     );
   }
 
   return (
-    <ScreenLayout hideScrollIndicator>
+    <View style={{ flex: 1 }}>
       <FlatList
         data={reminders}
         renderItem={renderItem}
@@ -101,7 +99,7 @@ export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
           <AtomicText type="bodyMedium" style={styles.fabText}>{translations.addButtonLabel}</AtomicText>
         </TouchableOpacity>
       )}
-    </ScreenLayout>
+    </View>
   );
 };