@umituz/react-native-settings 5.2.14 → 5.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "5.2.14",
+  "version": "5.2.16",
   "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/appearance/presentation/components/ColorPicker.tsx

@@ -12,6 +12,7 @@ import {
   AtomicText,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
+import { isDev } from "../../../../utils/devUtils";
 
 interface ColorPickerProps {
   label: string;
@@ -31,9 +32,6 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
   // Memoize styles to prevent unnecessary re-creation
   const styles = useMemo(() => getStyles(tokens), [tokens]);
 
-  // Memoize colors array to prevent unnecessary re-renders
-  const colorsMemo = useMemo(() => colors, [colors]);
-
   // Stable callback for color change to prevent infinite re-renders
   const handleColorChange = useCallback((color: string) => {
     try {
@@ -41,7 +39,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
       if (value === color) return;
       onValueChange(color);
     } catch (error) {
-      if (__DEV__) {
+      if (isDev()) {
         console.error('[ColorPicker] Failed to change color:', error);
       }
       // Optionally: Show user feedback about the error
@@ -50,7 +48,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
 
   // Memoize color options to prevent unnecessary re-renders
   const colorOptions = useMemo(() => {
-    return colorsMemo.map((color) => {
+    return colors.map((color) => {
       const isSelected = value === color;
 
       return (
@@ -74,7 +72,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
         </TouchableOpacity>
       );
     });
-  }, [colorsMemo, value, handleColorChange, styles, tokens.colors.textInverse]);
+  }, [colors, value, handleColorChange, styles, tokens.colors.textInverse]);
 
   return (
     <View style={styles.container}>

package/src/domains/faqs/presentation/components/FAQItem.tsx

@@ -26,7 +26,7 @@ export interface FAQItemProps {
     styles?: FAQItemStyles;
 }
 
-export const FAQItemComponent: React.FC<FAQItemProps> = ({
+export const FAQItemComponent: React.FC<FAQItemProps> = React.memo(({
     item,
     isExpanded,
     onToggle,
@@ -115,4 +115,4 @@ export const FAQItemComponent: React.FC<FAQItemProps> = ({
             )}
         </View>
     );
-};
+});

package/src/domains/faqs/presentation/hooks/useFAQSearch.ts

@@ -1,12 +1,14 @@
 /**
  * FAQ Search Hook
- * Handles FAQ search state and filtering
+ * Handles FAQ search state and filtering with debounce
  */
 
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { FAQCategory } from '../../domain/entities/FAQEntity';
 import { FAQSearchService } from '../../domain/services/FAQSearchService';
 
+const SEARCH_DEBOUNCE_MS = 300;
+
 export interface UseFAQSearchResult {
     searchQuery: string;
     setSearchQuery: (query: string) => void;
@@ -16,13 +18,23 @@ export interface UseFAQSearchResult {
 
 export function useFAQSearch(categories: FAQCategory[]): UseFAQSearchResult {
     const [searchQuery, setSearchQuery] = useState('');
+    const [debouncedQuery, setDebouncedQuery] = useState('');
+
+    // Debounce search query
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedQuery(searchQuery);
+        }, SEARCH_DEBOUNCE_MS);
+
+        return () => clearTimeout(timer);
+    }, [searchQuery]);
 
     const filteredCategories = useMemo(
-        () => FAQSearchService.searchCategories(searchQuery, categories),
-        [searchQuery, categories]
+        () => FAQSearchService.searchCategories(debouncedQuery, categories),
+        [debouncedQuery, categories]
     );
 
-    const hasResults = filteredCategories.length > 0 || !searchQuery.trim();
+    const hasResults = filteredCategories.length > 0 || !debouncedQuery.trim();
 
     return {
         searchQuery,

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

@@ -4,8 +4,8 @@
  * Uses design system tokens for theming
  */
 
-import React, { useMemo } from 'react';
-import { View, ScrollView, StyleSheet, ViewStyle, TextStyle, useWindowDimensions } from 'react-native';
+import React, { useMemo, useCallback } from 'react';
+import { View, FlatList, StyleSheet, ViewStyle, TextStyle, useWindowDimensions } from 'react-native';
 import { useAppDesignTokens, ScreenLayout, getContentMaxWidth, NavigationHeader, useAppNavigation } from '@umituz/react-native-design-system';
 import { FAQCategory } from '../../domain/entities/FAQEntity';
 import { useFAQSearch } from '../hooks/useFAQSearch';
@@ -83,7 +83,29 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
     />
   );
 
-  const renderContent = () => {
+  const renderCategory = useCallback(({ item }: { item: FAQCategory }) => (
+    <FAQCategoryComponent
+      category={item}
+      isExpanded={isExpanded}
+      onToggleItem={toggleExpansion}
+      styles={customStyles?.category}
+    />
+  ), [isExpanded, toggleExpansion, customStyles?.category]);
+
+  const keyExtractor = useCallback((item: FAQCategory) => item.id, []);
+
+  const renderListHeader = useCallback(() => (
+    <View style={[styles.header, customStyles?.header]}>
+      <FAQSearchBar
+        value={searchQuery}
+        onChangeText={setSearchQuery}
+        placeholder={searchPlaceholder}
+        styles={customStyles?.searchBar}
+      />
+    </View>
+  ), [searchQuery, setSearchQuery, searchPlaceholder, customStyles?.searchBar, customStyles?.header, styles.header]);
+
+  const renderListEmpty = useCallback(() => {
     if (searchQuery && !hasResults) {
       return (
         <FAQEmptyState
@@ -93,34 +115,31 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
         />
       );
     }
+    return null;
+  }, [searchQuery, hasResults, emptySearchTitle, emptySearchMessage, customStyles?.emptyState]);
 
+  const renderListFooter = useCallback(() => (
+    <View style={{ height: tokens.spacing.xl * 2 }} />
+  ), [tokens.spacing.xl]);
+
+  const renderContent = () => {
     return (
       <View style={{ flex: 1 }}>
-        <View style={[styles.header, customStyles?.header]}>
-          <FAQSearchBar
-            value={searchQuery}
-            onChangeText={setSearchQuery}
-            placeholder={searchPlaceholder}
-            styles={customStyles?.searchBar}
-          />
-        </View>
-
-        <ScrollView
+        <FlatList
+          data={filteredCategories}
+          renderItem={renderCategory}
+          keyExtractor={keyExtractor}
+          ListHeaderComponent={renderListHeader}
+          ListEmptyComponent={renderListEmpty}
+          ListFooterComponent={renderListFooter}
           style={[styles.content, customStyles?.content]}
           contentContainerStyle={{ paddingVertical: tokens.spacing.md }}
           showsVerticalScrollIndicator={false}
-        >
-          {filteredCategories.map((category) => (
-            <FAQCategoryComponent
-              key={category.id}
-              category={category}
-              isExpanded={isExpanded}
-              onToggleItem={toggleExpansion}
-              styles={customStyles?.category}
-            />
-          ))}
-          <View style={{ height: tokens.spacing.xl * 2 }} />
-        </ScrollView>
+          initialNumToRender={5}
+          maxToRenderPerBatch={5}
+          windowSize={10}
+          removeClippedSubviews={true}
+        />
       </View>
     );
   };

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

@@ -67,9 +67,9 @@ export const AchievementsList: React.FC<AchievementsListProps> = ({
       ) : (
         <>
           {/* Unlocked achievements first */}
-          {unlocked.map((achievement, index) => (
+          {unlocked.map((achievement) => (
             <AchievementItem
-              key={`unlocked-${achievement.title}-${index}`}
+              key={`achievement-unlocked-${achievement.id || achievement.title}`}
               {...achievement}
               accentColor={accentColor}
               backgroundColor={cardBackgroundColor}
@@ -79,9 +79,9 @@ export const AchievementsList: React.FC<AchievementsListProps> = ({
           ))}
 
           {/* Locked achievements */}
-          {locked.map((achievement, index) => (
+          {locked.map((achievement) => (
             <AchievementItem
-              key={`locked-${achievement.title}-${index}`}
+              key={`achievement-locked-${achievement.id || achievement.title}`}
               {...achievement}
               accentColor={accentColor}
               backgroundColor={cardBackgroundColor}

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

@@ -38,39 +38,40 @@ export const GamificationScreenWithConfig: React.FC<GamificationConfigProps> = (
     type: a.type
   }));
 
+  const translations = config.translations || {};
   const screenProps: GamificationScreenProps = {
-    title: config.translations.title,
-    statsTitle: config.translations.statsTitle,
-    achievementsTitle: config.translations.achievementsTitle,
-    streakTitle: config.translations.streakTitle,
+    title: translations.title || 'Gamification',
+    statsTitle: translations.statsTitle || 'Stats',
+    achievementsTitle: translations.achievementsTitle || 'Achievements',
+    streakTitle: translations.streakTitle || 'Streak',
     levelProps: {
       level: level.currentLevel,
       points: level.currentPoints,
       pointsToNext: level.pointsToNext,
       progress: level.progress,
-      levelTitle: config.translations.levelTitle,
+      levelTitle: translations.levelTitle || 'Level',
       showPoints: true,
     },
     streakProps: {
       current: streak.current,
       longest: streak.longest,
-      bestLabel: config.translations.bestStreak,
-      daysLabel: config.translations.days,
+      bestLabel: translations.bestStreak || 'Best',
+      daysLabel: translations.days || 'days',
     },
     stats: [
       {
-        label: config.translations.pointsLabel,
+        label: translations.pointsLabel || 'Points',
         value: points,
         icon: "⭐",
       },
       {
-        label: config.translations.totalCompletedLabel,
+        label: translations.totalCompletedLabel || 'Completed',
         value: totalTasksCompleted,
         icon: "✅",
       },
     ],
     achievements: achievementItems,
-    emptyAchievementsText: config.translations.emptyAchievements,
+    emptyAchievementsText: translations.emptyAchievements || 'No achievements yet',
   };
 
   return <GamificationScreenInner {...screenProps} />;

package/src/domains/gamification/hooks/useGamification.ts

@@ -35,7 +35,7 @@ export const useGamification = (
     if (config && !store.isInitialized) {
       store.initialize(config);
     }
-  }, [config, store.isInitialized]);
+  }, [config, store.isInitialized, store.initialize]);
 
   // Calculate level from config
   const level = useMemo((): LevelState => {

package/src/domains/legal/presentation/components/LegalLinks.tsx

@@ -75,10 +75,10 @@ export const LegalLinks: React.FC<LegalLinksProps> = React.memo(
       }
     }, [onTermsPress, termsOfServiceUrl]);
 
-    // Memoize conditional rendering to prevent unnecessary re-renders
-    const showPrivacy = React.useMemo(() => !!(onPrivacyPress || privacyPolicyUrl), [onPrivacyPress, privacyPolicyUrl]);
-    const showTerms = React.useMemo(() => !!(onTermsPress || termsOfServiceUrl), [onTermsPress, termsOfServiceUrl]);
-    const showSeparator = React.useMemo(() => showPrivacy && showTerms, [showPrivacy, showTerms]);
+    // Direct boolean calculations - no need for useMemo overhead
+    const showPrivacy = !!(onPrivacyPress || privacyPolicyUrl);
+    const showTerms = !!(onTermsPress || termsOfServiceUrl);
+    const showSeparator = showPrivacy && showTerms;
 
     return (
       <View style={[styles.container, style]}>

package/src/domains/localization/infrastructure/config/I18nInitializer.ts

@@ -51,8 +51,8 @@ export class I18nInitializer {
         returnEmptyString: false,
         returnNull: false,
       });
-    } catch {
-      // Silent error handling
+    } catch (error) {
+      console.error('[I18nInitializer] Failed to initialize i18n:', languageCode, error);
     }
   }
 

package/src/domains/localization/infrastructure/hooks/useLanguageSelection.ts

@@ -1,22 +1,34 @@
 /**
  * Language Selection Hook
- * Manages language selection state and filtering
+ * Manages language selection state and filtering with debounce
  */
 
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { useLocalization } from './useLocalization';
 import { searchLanguages } from '../config/LanguageQuery';
 import { devError } from '../../../../utils/devUtils';
 
+const SEARCH_DEBOUNCE_MS = 300;
+
 export const useLanguageSelection = () => {
     const { currentLanguage, setLanguage } = useLocalization();
     const [searchQuery, setSearchQuery] = useState('');
+    const [debouncedQuery, setDebouncedQuery] = useState('');
     const [selectedCode, setSelectedCode] = useState(currentLanguage);
 
-    const filteredLanguages = useMemo(() => {
-        return searchLanguages(searchQuery);
+    // Debounce search query
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedQuery(searchQuery);
+        }, SEARCH_DEBOUNCE_MS);
+
+        return () => clearTimeout(timer);
     }, [searchQuery]);
 
+    const filteredLanguages = useMemo(() => {
+        return searchLanguages(debouncedQuery);
+    }, [debouncedQuery]);
+
     const handleLanguageSelect = async (code: string, onComplete?: () => void) => {
         try {
             setSelectedCode(code);

package/src/domains/localization/infrastructure/storage/AsyncStorageWrapper.ts

@@ -11,14 +11,24 @@ export const STORAGE_KEYS = {
 
 export const StorageWrapper = {
   async getString(key: string, defaultValue: string): Promise<string> {
-    const result = await storageRepository.getString(key, defaultValue);
-    if (result.success && result.data !== null) {
-      return result.data;
+    try {
+      const result = await storageRepository.getString(key, defaultValue);
+      if (result.success && result.data !== null) {
+        return result.data;
+      }
+      return defaultValue;
+    } catch (error) {
+      console.error('[StorageWrapper] Failed to get string:', key, error);
+      return defaultValue;
     }
-    return defaultValue;
   },
 
   async setString(key: string, value: string): Promise<void> {
-    await storageRepository.setString(key, value);
+    try {
+      await storageRepository.setString(key, value);
+    } catch (error) {
+      console.error('[StorageWrapper] Failed to set string:', key, error);
+      throw error;
+    }
   },
 };

package/src/domains/localization/infrastructure/storage/LanguageSwitcher.ts

@@ -6,11 +6,10 @@
  * - Persistence
  */
 
-declare const __DEV__: boolean;
-
 import { storageRepository } from '@umituz/react-native-design-system';
 import i18n from '../config/i18n';
 import { languageRepository } from '../repository/LanguageRepository';
+import { isDev } from '../../../../utils/devUtils';
 
 const LANGUAGE_STORAGE_KEY = '@localization:language';
 
@@ -22,27 +21,32 @@ export class LanguageSwitcher {
     languageCode: string;
     isRTL: boolean;
   }> {
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-    }
+    try {
+      if (isDev()) {
+      }
 
-    const language = languageRepository.getLanguageByCode(languageCode);
+      const language = languageRepository.getLanguageByCode(languageCode);
 
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-    }
+      if (isDev()) {
+      }
 
-    await i18n.changeLanguage(languageCode);
+      await i18n.changeLanguage(languageCode);
 
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-    }
+      if (isDev()) {
+      }
 
-    await storageRepository.setString(LANGUAGE_STORAGE_KEY, languageCode);
+      await storageRepository.setString(LANGUAGE_STORAGE_KEY, languageCode);
 
-    if (typeof __DEV__ !== "undefined" && __DEV__) {
-    }
+      if (isDev()) {
+      }
 
-    return {
-      languageCode,
-      isRTL: language?.isRTL ?? false,
-    };
+      return {
+        languageCode,
+        isRTL: language?.isRTL ?? false,
+      };
+    } catch (error) {
+      console.error('[LanguageSwitcher] Failed to switch language:', languageCode, error);
+      throw error;
+    }
   }
 }

package/src/domains/localization/infrastructure/storage/LocalizationStore.ts

@@ -1,58 +1,71 @@
 /**
- * Localization Store Factory
- * Creates and manages localization state with proper separation of concerns
+ * Localization Store
+ * Manages localization state using createStore pattern for consistency
  */
 
-import { create } from "zustand";
+import { createStore, storageService } from "@umituz/react-native-design-system";
 import type { LocalizationState, LocalizationActions, LocalizationGetters } from "./types/LocalizationState";
 import { languageRepository } from "../repository/LanguageRepository";
 import { InitializationManager, LanguageSwitchManager, localizationGetters } from "./localizationStoreUtils";
 
-type LocalizationStoreType = LocalizationState & LocalizationActions & LocalizationGetters;
-
 // Instance-level managers
 const initManager = new InitializationManager();
 const switchManager = new LanguageSwitchManager();
 
-export const useLocalizationStore = create<LocalizationStoreType>((set, get) => ({
-  // State
+const DEFAULT_STATE: LocalizationState = {
   currentLanguage: "en-US",
   isRTL: false,
   isInitialized: false,
   supportedLanguages: languageRepository.getLanguages(),
+};
+
+type LocalizationStoreActions = LocalizationActions & LocalizationGetters;
+
+export const useLocalizationStore = createStore<LocalizationState, LocalizationStoreActions>({
+  name: "localization-storage",
+  initialState: DEFAULT_STATE,
+  persist: true,
+  storage: storageService,
+  version: 1,
+  partialize: (state) => ({
+    currentLanguage: state.currentLanguage,
+    isRTL: state.isRTL,
+    isInitialized: false, // Don't persist initialization state
+    supportedLanguages: state.supportedLanguages,
+  }),
+  actions: (set, get) => ({
+    initialize: async () => {
+      const { isInitialized } = get();
+      await initManager.initialize(isInitialized, set);
+    },
+
+    setLanguage: async (languageCode: string) => {
+      await switchManager.setLanguage(languageCode, set);
+    },
+
+    reset: () => {
+      initManager.reset();
+      switchManager.reset();
+
+      set({
+        currentLanguage: "en-US",
+        isRTL: false,
+        isInitialized: false,
+      });
+    },
+
+    // Getters
+    getCurrentLanguage: () => {
+      const { currentLanguage } = get();
+      return localizationGetters.getCurrentLanguage(currentLanguage);
+    },
+
+    isLanguageSupported: (code: string) => {
+      return localizationGetters.isLanguageSupported(code);
+    },
 
-  // Actions
-  initialize: async () => {
-    const { isInitialized } = get();
-    await initManager.initialize(isInitialized, set);
-  },
-
-  setLanguage: async (languageCode: string) => {
-    await switchManager.setLanguage(languageCode, set);
-  },
-
-  reset: () => {
-    initManager.reset();
-    switchManager.reset();
-
-    set({
-      currentLanguage: "en-US",
-      isRTL: false,
-      isInitialized: false,
-    });
-  },
-
-  // Getters
-  getCurrentLanguage: () => {
-    const { currentLanguage } = get();
-    return localizationGetters.getCurrentLanguage(currentLanguage);
-  },
-
-  isLanguageSupported: (code: string) => {
-    return localizationGetters.isLanguageSupported(code);
-  },
-
-  getSupportedLanguages: () => {
-    return localizationGetters.getSupportedLanguages();
-  },
-}));
+    getSupportedLanguages: () => {
+      return localizationGetters.getSupportedLanguages();
+    },
+  }),
+});

package/src/domains/localization/presentation/screens/LanguageSelectionScreen.tsx

@@ -12,6 +12,7 @@ import {
   NavigationHeader,
   useAppNavigation,
 } from '@umituz/react-native-design-system';
+import { isDev } from '../../../../utils/devUtils';
 import { useLanguageSelection } from '../../infrastructure/hooks/useLanguageSelection';
 import { LanguageItem } from '../components/LanguageItem';
 import type { Language } from '../../infrastructure/storage/types/Language';
@@ -38,14 +39,14 @@ export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = (
   } = useLanguageSelection();
 
   const onSelect = async (code: string) => {
-    if (__DEV__) {
+    if (isDev()) {
     }
     await handleLanguageSelect(code, () => {
-      if (__DEV__) {
+      if (isDev()) {
       }
       navigation.goBack();
     });
-    if (__DEV__) {
+    if (isDev()) {
     }
   };
 
@@ -113,12 +114,21 @@ export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = (
         renderItem={renderItem}
         keyExtractor={item => item.code}
         contentContainerStyle={[
-          styles.listContent, 
+          styles.listContent,
           { paddingBottom: tokens.spacing.xl },
           customStyles?.listContent
         ]}
         showsVerticalScrollIndicator={false}
         keyboardShouldPersistTaps="handled"
+        initialNumToRender={15}
+        maxToRenderPerBatch={10}
+        windowSize={10}
+        removeClippedSubviews={true}
+        getItemLayout={(data, index) => ({
+          length: 64,
+          offset: 64 * index,
+          index,
+        })}
       />
     </ScreenLayout>
   );

package/src/domains/notifications/infrastructure/services/NotificationScheduler.ts

@@ -3,75 +3,95 @@ import type { ScheduleNotificationOptions, ScheduledNotification } from './types
 
 export class NotificationScheduler {
   async scheduleNotification(options: ScheduleNotificationOptions): Promise<string> {
-    const { title, body, data = {}, trigger, sound = true, badge, categoryIdentifier } = options;
+    try {
+      const { title, body, data = {}, trigger, sound = true, badge, categoryIdentifier } = options;
 
-    let notificationTrigger: Notifications.NotificationTriggerInput = null;
+      let notificationTrigger: Notifications.NotificationTriggerInput = null;
 
-    if (trigger.type === 'date') {
-      notificationTrigger = {
-        date: trigger.date,
-        channelId: categoryIdentifier || 'default',
-      };
-    } else if (trigger.type === 'daily') {
-      notificationTrigger = {
-        hour: trigger.hour,
-        minute: trigger.minute,
-        repeats: true,
-        channelId: categoryIdentifier || 'reminders',
-      };
-    } else if (trigger.type === 'weekly') {
-      notificationTrigger = {
-        weekday: trigger.weekday,
-        hour: trigger.hour,
-        minute: trigger.minute,
-        repeats: true,
-        channelId: categoryIdentifier || 'reminders',
-      };
-    } else if (trigger.type === 'monthly') {
-      notificationTrigger = {
-        day: trigger.day,
-        hour: trigger.hour,
-        minute: trigger.minute,
-        repeats: true,
-        channelId: categoryIdentifier || 'reminders',
-      };
-    }
+      if (trigger.type === 'date') {
+        notificationTrigger = {
+          date: trigger.date,
+          channelId: categoryIdentifier || 'default',
+        };
+      } else if (trigger.type === 'daily') {
+        notificationTrigger = {
+          hour: trigger.hour,
+          minute: trigger.minute,
+          repeats: true,
+          channelId: categoryIdentifier || 'reminders',
+        };
+      } else if (trigger.type === 'weekly') {
+        notificationTrigger = {
+          weekday: trigger.weekday,
+          hour: trigger.hour,
+          minute: trigger.minute,
+          repeats: true,
+          channelId: categoryIdentifier || 'reminders',
+        };
+      } else if (trigger.type === 'monthly') {
+        notificationTrigger = {
+          day: trigger.day,
+          hour: trigger.hour,
+          minute: trigger.minute,
+          repeats: true,
+          channelId: categoryIdentifier || 'reminders',
+        };
+      }
 
-    const notificationId = await Notifications.scheduleNotificationAsync({
-      content: {
-        title,
-        body,
-        data,
-        sound: sound === true ? 'default' : sound || undefined,
-        badge,
-        categoryIdentifier,
-        priority: Notifications.AndroidNotificationPriority.HIGH,
-        vibrate: [0, 250, 250, 250],
-      },
-      trigger: notificationTrigger,
-    });
+      const notificationId = await Notifications.scheduleNotificationAsync({
+        content: {
+          title,
+          body,
+          data,
+          sound: sound === true ? 'default' : sound || undefined,
+          badge,
+          categoryIdentifier,
+          priority: Notifications.AndroidNotificationPriority.HIGH,
+          vibrate: [0, 250, 250, 250],
+        },
+        trigger: notificationTrigger,
+      });
 
-    return notificationId;
+      return notificationId;
+    } catch (error) {
+      console.error('Failed to schedule notification:', error);
+      throw new Error(`Notification scheduling failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
   }
 
   async cancelNotification(notificationId: string): Promise<void> {
-    await Notifications.cancelScheduledNotificationAsync(notificationId);
+    try {
+      await Notifications.cancelScheduledNotificationAsync(notificationId);
+    } catch (error) {
+      console.error('Failed to cancel notification:', notificationId, error);
+      // Don't throw - canceling a non-existent notification is not critical
+    }
   }
 
   async cancelAllNotifications(): Promise<void> {
-    await Notifications.cancelAllScheduledNotificationsAsync();
+    try {
+      await Notifications.cancelAllScheduledNotificationsAsync();
+    } catch (error) {
+      console.error('Failed to cancel all notifications:', error);
+      throw new Error(`Failed to cancel notifications: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
   }
 
   async getScheduledNotifications(): Promise<ScheduledNotification[]> {
-    const notifications = await Notifications.getAllScheduledNotificationsAsync();
-    return notifications.map(notification => ({
-      identifier: notification.identifier,
-      content: {
-        title: notification.content.title ?? '',
-        body: notification.content.body ?? '',
-        data: notification.content.data as Record<string, string | number | boolean | null>,
-      },
-      trigger: notification.trigger,
-    }));
+    try {
+      const notifications = await Notifications.getAllScheduledNotificationsAsync();
+      return notifications.map(notification => ({
+        identifier: notification.identifier,
+        content: {
+          title: notification.content.title ?? '',
+          body: notification.content.body ?? '',
+          data: notification.content.data as Record<string, string | number | boolean | null>,
+        },
+        trigger: notification.trigger,
+      }));
+    } catch (error) {
+      console.error('Failed to get scheduled notifications:', error);
+      return []; // Return empty array as fallback
+    }
   }
 }

package/src/domains/notifications/infrastructure/services/NotificationService.ts

@@ -31,6 +31,7 @@ export class NotificationService {
         NotificationManager.configure();
         this.isConfigured = true;
       } catch (error) {
+        console.error('[NotificationService] Failed to configure NotificationManager:', error);
       }
     }
   }

package/src/domains/notifications/infrastructure/utils/triggerBuilder.ts

@@ -10,10 +10,12 @@ export const buildTrigger = (reminder: Reminder): NotificationTrigger => {
 
   switch (frequency) {
     case 'once': {
+      const now = new Date();
       const date = new Date();
       date.setHours(hour, minute, 0, 0);
 
-      if (date <= new Date()) {
+      // If scheduled time has passed today, schedule for tomorrow
+      if (date <= now) {
         date.setDate(date.getDate() + 1);
       }
 

package/src/domains/notifications/quietHours/infrastructure/hooks/useQuietHoursActions.ts

@@ -12,28 +12,37 @@ export const useQuietHoursActions = () => {
   const { updateQuietHours } = usePreferencesStore();
 
   const setQuietHoursEnabled = useCallback(async (enabled: boolean): Promise<void> => {
-    await updateQuietHours({ ...quietHours, enabled });
-  }, [quietHours, updateQuietHours]);
+    // Use getState() to avoid stale closure and race conditions
+    const currentQuietHours = usePreferencesStore.getState().quietHours;
+    await updateQuietHours({ ...currentQuietHours, enabled });
+  }, [updateQuietHours]);
 
   const setStartTime = useCallback(async (hour: number, minute: number): Promise<void> => {
-    await updateQuietHours({ ...quietHours, startHour: hour, startMinute: minute });
-  }, [quietHours, updateQuietHours]);
+    // Use getState() to avoid stale closure and race conditions
+    const currentQuietHours = usePreferencesStore.getState().quietHours;
+    await updateQuietHours({ ...currentQuietHours, startHour: hour, startMinute: minute });
+  }, [updateQuietHours]);
 
   const setEndTime = useCallback(async (hour: number, minute: number): Promise<void> => {
-    await updateQuietHours({ ...quietHours, endHour: hour, endMinute: minute });
-  }, [quietHours, updateQuietHours]);
+    // Use getState() to avoid stale closure and race conditions
+    const currentQuietHours = usePreferencesStore.getState().quietHours;
+    await updateQuietHours({ ...currentQuietHours, endHour: hour, endMinute: minute });
+  }, [updateQuietHours]);
 
   const setQuietHours = useCallback(async (config: QuietHoursConfig): Promise<void> => {
     await updateQuietHours(config);
   }, [updateQuietHours]);
 
   const isInQuietHours = useCallback((): boolean => {
-    if (!quietHours.enabled) return false;
+    // Use getState() to get current quietHours for consistency
+    const currentQuietHours = usePreferencesStore.getState().quietHours;
+
+    if (!currentQuietHours.enabled) return false;
 
     const now = new Date();
     const currentMinutes = now.getHours() * 60 + now.getMinutes();
-    const startMinutes = quietHours.startHour * 60 + quietHours.startMinute;
-    const endMinutes = quietHours.endHour * 60 + quietHours.endMinute;
+    const startMinutes = currentQuietHours.startHour * 60 + currentQuietHours.startMinute;
+    const endMinutes = currentQuietHours.endHour * 60 + currentQuietHours.endMinute;
 
     // Validate time values
     if (startMinutes < 0 || startMinutes >= 1440 || endMinutes < 0 || endMinutes >= 1440) {
@@ -49,7 +58,7 @@ export const useQuietHoursActions = () => {
       // Current time is after start OR before end
       return currentMinutes >= startMinutes || currentMinutes < endMinutes;
     }
-  }, [quietHours]);
+  }, []);
 
   return {
     quietHours,

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

@@ -112,6 +112,15 @@ export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
         ListEmptyComponent={renderEmpty}
         contentContainerStyle={styles.listContent}
         showsVerticalScrollIndicator={false}
+        initialNumToRender={10}
+        maxToRenderPerBatch={5}
+        windowSize={10}
+        removeClippedSubviews={true}
+        getItemLayout={(data, index) => ({
+          length: 88,
+          offset: 88 * index,
+          index,
+        })}
       />
 
       {canAddMore && (

package/src/domains/rating/application/services/RatingService.ts

@@ -40,7 +40,7 @@ export async function trackEvent(eventType: string): Promise<void> {
   try {
     await incrementEventCount(eventType);
   } catch (error) {
-    // Silent error handling
+    console.error('[RatingService] Failed to track event:', eventType, error);
   }
 }
 
@@ -90,7 +90,7 @@ export async function markPromptShown(eventType: string): Promise<void> {
   try {
     await setLastPromptDate(eventType, toISOString());
   } catch (error) {
-    // Silent error handling
+    console.error('[RatingService] Failed to mark prompt shown:', eventType, error);
   }
 }
 
@@ -101,7 +101,7 @@ export async function markRated(): Promise<void> {
   try {
     await setHasRated(true);
   } catch (error) {
-    // Silent error handling
+    console.error('[RatingService] Failed to mark as rated:', error);
   }
 }
 
@@ -112,7 +112,7 @@ export async function markDismissed(): Promise<void> {
   try {
     await setDismissed(true);
   } catch (error) {
-    // Silent error handling
+    console.error('[RatingService] Failed to mark as dismissed:', error);
   }
 }
 
@@ -130,6 +130,6 @@ export async function reset(eventType?: string): Promise<void> {
   try {
     await resetStorage(eventType);
   } catch (error) {
-    // Silent error handling
+    console.error('[RatingService] Failed to reset:', eventType, error);
   }
 }

package/src/domains/rating/infrastructure/storage/RatingStorage.ts

@@ -35,8 +35,8 @@ export async function getEventCount(eventType: string): Promise<number> {
 export async function setEventCount(eventType: string, count: number): Promise<void> {
   try {
     await storageRepository.setString(KEYS.eventCount(eventType), count.toString());
-  } catch {
-    // Silent error handling
+  } catch (error) {
+    console.error('[RatingStorage] Failed to set event count:', eventType, count, error);
   }
 }
 
@@ -67,8 +67,8 @@ export async function getLastPromptDate(eventType: string): Promise<string | nul
 export async function setLastPromptDate(eventType: string, date: string): Promise<void> {
   try {
     await storageRepository.setString(KEYS.lastPrompt(eventType), date);
-  } catch {
-    // Silent error handling
+  } catch (error) {
+    console.error('[RatingStorage] Failed to set last prompt date:', eventType, date, error);
   }
 }
 
@@ -90,8 +90,8 @@ export async function getHasRated(): Promise<boolean> {
 export async function setHasRated(value: boolean): Promise<void> {
   try {
     await storageRepository.setString(KEYS.hasRated, value.toString());
-  } catch {
-    // Silent error handling
+  } catch (error) {
+    console.error('[RatingStorage] Failed to set has rated:', value, error);
   }
 }
 
@@ -113,8 +113,8 @@ export async function getDismissed(): Promise<boolean> {
 export async function setDismissed(value: boolean): Promise<void> {
   try {
     await storageRepository.setString(KEYS.dismissed, value.toString());
-  } catch {
-    // Silent error handling
+  } catch (error) {
+    console.error('[RatingStorage] Failed to set dismissed:', value, error);
   }
 }
 
@@ -154,7 +154,7 @@ export async function reset(eventType?: string): Promise<void> {
         ratingKeys.map((key) => storageRepository.removeItem(key))
       );
     }
-  } catch {
-    // Silent error handling
+  } catch (error) {
+    console.error('[RatingStorage] Failed to reset rating data:', eventType, error);
   }
 }

package/src/domains/rating/presentation/components/StarRating.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { View, StyleSheet, TouchableOpacity, ViewStyle } from "react-native";
 import { useAppDesignTokens, AtomicIcon } from "@umituz/react-native-design-system";
 
@@ -27,6 +27,11 @@ export const StarRating: React.FC<StarRatingProps> = ({
     const styles = getStyles(tokens);
     const [internalRating, setInternalRating] = useState(rating);
 
+    // Sync internal state with rating prop changes
+    useEffect(() => {
+        setInternalRating(rating);
+    }, [rating]);
+
     const filledColor = activeColor || tokens.colors.warning;
     const emptyColor = inactiveColor || tokens.colors.borderLight;
     

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

@@ -110,6 +110,10 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> = React.m
               horizontal
               showsHorizontalScrollIndicator={false}
               contentContainerStyle={styles.horizontalList}
+              initialNumToRender={3}
+              maxToRenderPerBatch={2}
+              windowSize={5}
+              removeClippedSubviews={true}
             />
           </View>
         )}
@@ -128,6 +132,10 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> = React.m
           showsVerticalScrollIndicator={false}
           contentContainerStyle={styles.verticalList}
           ListHeaderComponent={ListHeader}
+          initialNumToRender={8}
+          maxToRenderPerBatch={5}
+          windowSize={10}
+          removeClippedSubviews={true}
         />
       </ScreenLayout>
     );

package/src/infrastructure/repositories/SettingsRepository.ts

@@ -6,6 +6,7 @@
 
 import { storageRepository, StorageKey, createUserKey } from '@umituz/react-native-design-system';
 import type { ISettingsRepository, UserSettings, SettingsResult } from '../../application/ports/ISettingsRepository';
+import { TEXT_LENGTH_LIMITS } from '../utils/constants/textLimits';
 
 /**
  * Validates userId to prevent key injection attacks
@@ -19,7 +20,7 @@ const validateUserId = (userId: string): void => {
         throw new Error('Invalid userId: contains invalid characters');
     }
     // Limit length to prevent DoS attacks
-    if (userId.length > 128) {
+    if (userId.length > TEXT_LENGTH_LIMITS.USER_ID) {
         throw new Error('Invalid userId: exceeds maximum length');
     }
 };

package/src/infrastructure/utils/async/retryAndTimeout.ts

@@ -49,9 +49,17 @@ export const withTimeout = async <T>(
   timeoutMs: number,
   timeoutMessage: string = "Operation timed out"
 ): Promise<T> => {
+  let timeoutId: NodeJS.Timeout | undefined;
+
   const timeoutPromise = new Promise<never>((_, reject) => {
-    setTimeout(() => reject(new Error(timeoutMessage)), timeoutMs);
+    timeoutId = setTimeout(() => reject(new Error(timeoutMessage)), timeoutMs);
   });
 
-  return Promise.race([operation, timeoutPromise]);
+  try {
+    return await Promise.race([operation, timeoutPromise]);
+  } finally {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+  }
 };

package/src/infrastructure/utils/constants/textLimits.ts

@@ -0,0 +1,23 @@
+/**
+ * Text Length Limits
+ * Standardized text length constraints used across the application
+ */
+
+export const TEXT_LENGTH_LIMITS = {
+  /** Short titles and labels (100 characters) */
+  TITLE_SHORT: 100,
+
+  /** Standard titles (200 characters) */
+  TITLE: 200,
+
+  /** Descriptions and short text (500 characters) */
+  DESCRIPTION: 500,
+
+  /** Long text and body content (1000 characters) */
+  BODY: 1000,
+
+  /** User ID maximum length (128 characters) */
+  USER_ID: 128,
+} as const;
+
+export type TextLengthLimit = typeof TEXT_LENGTH_LIMITS[keyof typeof TEXT_LENGTH_LIMITS];

package/src/infrastructure/utils/sanitizers.ts

@@ -4,6 +4,8 @@
  * Provides sanitization functions for user input and props.
  */
 
+import { TEXT_LENGTH_LIMITS } from './constants/textLimits';
+
 /**
  * Sanitize string by trimming and limiting length
  */
@@ -16,14 +18,14 @@ export function sanitizeString(str: string | undefined, maxLength: number): stri
  * Sanitize title prop
  */
 export function sanitizeTitle(title: string): string {
-  return sanitizeString(title, 200) || "";
+  return sanitizeString(title, TEXT_LENGTH_LIMITS.TITLE) || "";
 }
 
 /**
  * Sanitize description prop
  */
 export function sanitizeDescription(description: string | undefined): string | undefined {
-  return sanitizeString(description || "", 500);
+  return sanitizeString(description || "", TEXT_LENGTH_LIMITS.DESCRIPTION);
 }
 
 /**

package/src/infrastructure/utils/styleTokens.ts

@@ -55,6 +55,19 @@ export const OPACITY = {
   icon: 0.6,
 } as const;
 
+/**
+ * Alpha/Transparency values for withAlpha() usage
+ * Used with design system's withAlpha(color, alpha) function
+ */
+export const ALPHA_VALUES = {
+  subtle: 0.1,      // Very subtle tint
+  light: 0.15,      // Light background tint
+  medium: 0.2,      // Medium background
+  strong: 0.3,      // Strong background
+  visible: 0.5,     // Clearly visible
+  prominent: 0.8,   // Almost opaque
+} as const;
+
 /**
  * Icon size tokens
  */

package/src/infrastructure/utils/validation/formValidators.ts

@@ -5,6 +5,7 @@
 
 import type { ValidationResult } from "./core";
 import { validateRating } from "./numericValidators";
+import { TEXT_LENGTH_LIMITS } from "../constants/textLimits";
 
 /**
  * Feedback form validation
@@ -30,8 +31,8 @@ export const validateFeedbackForm = (data: {
     return { isValid: false, error: "Description must be at least 10 characters" };
   }
 
-  if (data.description.length > 1000) {
-    return { isValid: false, error: "Description must be less than 1000 characters" };
+  if (data.description.length > TEXT_LENGTH_LIMITS.BODY) {
+    return { isValid: false, error: `Description must be less than ${TEXT_LENGTH_LIMITS.BODY} characters` };
   }
 
   return { isValid: true };

package/src/presentation/components/ErrorBoundary/index.ts

@@ -7,3 +7,6 @@ export type {
   SettingsErrorBoundaryProps,
   SettingsErrorBoundaryState,
 } from './SettingsErrorBoundary';
+
+export { withErrorBoundary } from './withErrorBoundary';
+export type { WithErrorBoundaryOptions } from './withErrorBoundary';

package/src/presentation/components/ErrorBoundary/withErrorBoundary.tsx

@@ -0,0 +1,45 @@
+/**
+ * withErrorBoundary HOC
+ * Wraps screens with SettingsErrorBoundary for error handling
+ */
+
+import React from 'react';
+import { SettingsErrorBoundary } from './SettingsErrorBoundary';
+
+export interface WithErrorBoundaryOptions {
+  domainName: string;
+  fallback?: React.ReactNode;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+/**
+ * Higher-Order Component to wrap screens with ErrorBoundary
+ *
+ * @example
+ * ```tsx
+ * export const AppearanceScreen = withErrorBoundary(
+ *   AppearanceScreenComponent,
+ *   { domainName: 'Appearance' }
+ * );
+ * ```
+ */
+export function withErrorBoundary<P extends object>(
+  Component: React.ComponentType<P>,
+  options: WithErrorBoundaryOptions
+): React.FC<P> {
+  const WrappedComponent: React.FC<P> = (props) => {
+    return (
+      <SettingsErrorBoundary
+        domainName={options.domainName}
+        fallback={options.fallback}
+        onError={options.onError}
+      >
+        <Component {...props} />
+      </SettingsErrorBoundary>
+    );
+  };
+
+  WrappedComponent.displayName = `withErrorBoundary(${Component.displayName || Component.name || 'Component'})`;
+
+  return WrappedComponent;
+}

package/src/presentation/components/SettingsItemCard.tsx

@@ -7,6 +7,7 @@ import {
 } from "@umituz/react-native-design-system";
 import { validateTitle, validateDescription, validateSwitchProps } from "../../infrastructure/utils/validators";
 import { sanitizeTitle, sanitizeDescription } from "../../infrastructure/utils/sanitizers";
+import { TEXT_LENGTH_LIMITS } from "../../infrastructure/utils/constants/textLimits";
 import { SettingsItemCardRightElement } from "./settings/SettingsItemCardRightElement";
 import { SettingsItemCardContent } from "./settings/SettingsItemCardContent";
 import { SettingsItemCardSection } from "./settings/SettingsItemCardSection";
@@ -54,7 +55,7 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
   // Sanitize props (before hooks)
   const sanitizedTitle = sanitizeTitle(title);
   const sanitizedDescription = sanitizeDescription(description);
-  const sanitizedSectionTitle = sectionTitle?.trim().slice(0, 100);
+  const sanitizedSectionTitle = sectionTitle?.trim().slice(0, TEXT_LENGTH_LIMITS.TITLE_SHORT);
 
   const defaultIconBg = iconBgColor || withAlpha(colors.primary, 0.15);
   const defaultIconColor = iconColor || colors.primary;

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

@@ -20,17 +20,44 @@ export const useNavigationHandlers = (
   legalUrls: LegalUrls,
   aboutTranslations?: AboutConfig["texts"]
 ): NavigationHandlersResult => {
-  const handlePrivacyPress = useCallback(() => {
-    Linking.openURL(legalUrls.privacy);
+  const handlePrivacyPress = useCallback(async () => {
+    try {
+      const canOpen = await Linking.canOpenURL(legalUrls.privacy);
+      if (canOpen) {
+        await Linking.openURL(legalUrls.privacy);
+      } else {
+        console.warn('Cannot open privacy policy URL:', legalUrls.privacy);
+      }
+    } catch (error) {
+      console.error('Failed to open privacy policy:', error);
+    }
   }, [legalUrls.privacy]);
 
-  const handleTermsPress = useCallback(() => {
-    Linking.openURL(legalUrls.terms);
+  const handleTermsPress = useCallback(async () => {
+    try {
+      const canOpen = await Linking.canOpenURL(legalUrls.terms);
+      if (canOpen) {
+        await Linking.openURL(legalUrls.terms);
+      } else {
+        console.warn('Cannot open terms of service URL:', legalUrls.terms);
+      }
+    } catch (error) {
+      console.error('Failed to open terms of service:', error);
+    }
   }, [legalUrls.terms]);
 
-  const handleEulaPress = useCallback(() => {
+  const handleEulaPress = useCallback(async () => {
     if (legalUrls.eula) {
-      Linking.openURL(legalUrls.eula);
+      try {
+        const canOpen = await Linking.canOpenURL(legalUrls.eula);
+        if (canOpen) {
+          await Linking.openURL(legalUrls.eula);
+        } else {
+          console.warn('Cannot open EULA URL:', legalUrls.eula);
+        }
+      } catch (error) {
+        console.error('Failed to open EULA:', error);
+      }
     }
   }, [legalUrls.eula]);