@umituz/react-native-settings 4.23.67 → 4.23.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.23.67",
+  "version": "4.23.69",
   "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",
@@ -81,6 +81,7 @@
     "@umituz/react-native-sentry": "*",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-native": "^5.0.0",
     "expo-apple-authentication": "^8.0.8",
     "expo-auth-session": "^5.0.0",

package/src/domains/about/presentation/hooks/useAboutInfo.ts

@@ -9,7 +9,6 @@ import { AboutRepository } from '../../infrastructure/repositories/AboutReposito
 import type { UseAboutInfoOptions, UseAboutInfoReturn } from './useAboutInfo.types';
 import {
   setErrorIfMounted,
-  setLoadingIfMounted,
   initializeAppInfo,
   updateAppInfoConfig,
   updateAppInfoPartial,

package/src/domains/appearance/data/colorPalettes.ts

@@ -86,9 +86,4 @@ export const generateColorPalette = (
     name: "custom",
     colors,
   };
-};
-
-// Legacy exports for backward compatibility
-export const PRIMARY_COLORS = DEFAULT_PRIMARY_COLORS.colors;
-export const SECONDARY_COLORS = DEFAULT_SECONDARY_COLORS.colors;
-export const ACCENT_COLORS = DEFAULT_ACCENT_COLORS.colors;
+};

package/src/domains/appearance/hooks/useAppearance.ts

@@ -1,15 +1,17 @@
-import { useTheme, type ThemeMode, type CustomThemeColors } from "@umituz/react-native-design-system";
+import { useTheme, type ThemeMode as BaseThemeMode, type CustomThemeColors } from "@umituz/react-native-design-system";
+import type { ThemeMode } from "../types";
 
 export const useAppearance = () => {
   const { themeMode, customColors, defaultColors, isInitialized, setThemeMode, setCustomColors, resetToDefaults } = useTheme();
 
   return {
-    themeMode,
+    themeMode: themeMode as ThemeMode,
     customColors,
     defaultColors,
     isLoading: !isInitialized,
     setThemeMode: (mode: ThemeMode) => {
-      void setThemeMode(mode);
+      // Cast to base ThemeMode since design system doesn't support 'auto'
+      void setThemeMode(mode as BaseThemeMode);
     },
     setCustomColors: (colors: CustomThemeColors) => {
       void setCustomColors(colors);

package/src/domains/appearance/hooks/useAppearanceActions.ts

@@ -1,6 +1,7 @@
 import { useState, useCallback, useEffect, useRef } from "react";
 import { useAppearance } from "./useAppearance";
-import type { CustomThemeColors, ThemeMode } from "@umituz/react-native-design-system";
+import type { CustomThemeColors } from "@umituz/react-native-design-system";
+import type { ThemeMode } from "../types";
 
 export const useAppearanceActions = () => {
   const { themeMode, customColors, setThemeMode, setCustomColors, reset } = useAppearance();

package/src/domains/appearance/index.ts

@@ -5,5 +5,6 @@
 
 export * from './presentation/screens/AppearanceScreen';
 export * from './presentation/components';
-export * from './hooks';
+export { useAppearance } from './hooks/useAppearance';
+export { useAppearanceActions } from './hooks/useAppearanceActions';
 export * from './types';

package/src/domains/appearance/presentation/components/ColorPicker.tsx

@@ -49,7 +49,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
 
   // Memoize color options to prevent unnecessary re-renders
   const colorOptions = useMemo(() => {
-    return colorsMemo.map((color, index) => {
+    return colorsMemo.map((color) => {
       const isSelected = value === color;
 
       return (

package/src/domains/appearance/presentation/screens/AppearanceScreen.tsx

@@ -13,7 +13,8 @@ import {
   useAppNavigation
 } from "@umituz/react-native-design-system";
 import { useLocalization } from "../../../localization";
-import { useAppearance, useAppearanceActions } from "../../hooks";
+import { useAppearance } from "../../hooks/useAppearance";
+import { useAppearanceActions } from "../../hooks/useAppearanceActions";
 import {
   AppearanceHeader,
   ThemeModeSection,

package/src/domains/appearance/types/index.ts

@@ -5,11 +5,14 @@
  */
 
 import type {
-  ThemeMode,
+  ThemeMode as BaseThemeMode,
   CustomThemeColors,
 } from "@umituz/react-native-design-system";
 
-export type { ThemeMode, CustomThemeColors };
+// Extended theme mode to support 'auto' option
+export type ThemeMode = BaseThemeMode | 'auto';
+
+export type { CustomThemeColors };
 
 export interface AppearanceSettings {
   themeMode: ThemeMode;

package/src/domains/disclaimer/presentation/components/DisclaimerModal.tsx

@@ -69,7 +69,7 @@ export const DisclaimerModal: React.FC<DisclaimerModalProps> = ({
 };
 
 
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+const getStyles = (_tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     modalContainer: {
       flex: 1,

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

@@ -7,7 +7,6 @@ import React, { useState } from "react";
 import { View, StyleSheet, TouchableOpacity, ScrollView, TextInput } from "react-native";
 import { useAppDesignTokens, AtomicText, AtomicButton, AtomicIcon } from "@umituz/react-native-design-system";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
-import { useFeedbackForm } from "../hooks/useFeedbackForm";
 
 export interface FeedbackFormProps {
     onSubmit: (data: { type: FeedbackType; rating: FeedbackRating; description: string; title: string }) => Promise<void>;
@@ -35,16 +34,38 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
     const [rating, setRating] = useState<FeedbackRating>(5);
     const [description, setDescription] = useState("");
     const [title, setTitle] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const [isSubmittingLocal, setIsSubmittingLocal] = useState(false);
 
     const handleSubmit = async () => {
-        if (!description.trim()) return;
+        // Validate input
+        if (!description.trim()) {
+            setError("Please provide a description");
+            return;
+        }
 
-        await onSubmit({
-            type: selectedType,
-            rating,
-            description,
-            title: title || texts.defaultTitle(selectedType),
-        });
+        setIsSubmittingLocal(true);
+        setError(null);
+
+        try {
+            await onSubmit({
+                type: selectedType,
+                rating,
+                description,
+                title: title || texts.defaultTitle(selectedType),
+            });
+
+            // Clear form on success
+            setDescription("");
+            setTitle("");
+            setRating(5);
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "Failed to submit feedback";
+            setError(errorMessage);
+            console.error("[FeedbackForm] Submission error:", err);
+        } finally {
+            setIsSubmittingLocal(false);
+        }
     };
 
     const renderRating = () => (
@@ -116,7 +137,10 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
             <View style={styles.inputContainer}>
                 <TextInput
                     value={description}
-                    onChangeText={setDescription}
+                    onChangeText={(text) => {
+                        setDescription(text);
+                        setError(null); // Clear error on input
+                    }}
                     placeholder={texts.descriptionPlaceholder}
                     placeholderTextColor={tokens.colors.textTertiary}
                     multiline
@@ -126,18 +150,27 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
                         {
                             color: tokens.colors.textPrimary,
                             backgroundColor: tokens.colors.surface,
-                            borderColor: tokens.colors.border,
+                            borderColor: error ? tokens.colors.error : tokens.colors.border,
                         }
                     ]}
                 />
+                {error && (
+                    <AtomicText
+                        type="bodySmall"
+                        color="error"
+                        style={styles.errorText}
+                    >
+                        {error}
+                    </AtomicText>
+                )}
             </View>
 
             <AtomicButton
                 onPress={handleSubmit}
-                disabled={isSubmitting || !description.trim()}
+                disabled={isSubmitting || isSubmittingLocal || !description.trim()}
                 style={styles.submitButton}
             >
-                {isSubmitting ? texts.submittingButton : texts.submitButton}
+                {(isSubmitting || isSubmittingLocal) ? texts.submittingButton : texts.submitButton}
             </AtomicButton>
         </View>
     );
@@ -185,6 +218,9 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
         padding: 12,
         fontSize: tokens.typography.bodyMedium.fontSize,
     },
+    errorText: {
+        marginTop: 8,
+    },
     submitButton: {
         width: "100%",
     },

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

@@ -79,7 +79,7 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
 };
 
 
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+const getStyles = (_tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     safeArea: {
         flex: 1,

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

@@ -5,7 +5,7 @@ import React from "react";
  * Generic for 100+ apps - NO hardcoded strings
  */
 
-import { View, ScrollView, StyleSheet } from "react-native";
+import { View, ScrollView } from "react-native";
 import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 import { LevelProgress } from "../LevelProgress";
 import { StreakDisplay } from "../StreakDisplay";

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

@@ -11,7 +11,7 @@ interface GamificationScreenWrapperProps {
 export const GamificationScreenWrapper: React.FC<GamificationScreenWrapperProps> = ({ config }) => {
   const {
     points,
-    totalTasksCompleted,
+    totalTasksCompleted: _totalTasksCompleted,
     level,
     streak,
     achievements,

package/src/domains/gamification/utils/calculations.ts

@@ -3,7 +3,7 @@
  * Pure utility functions - NO side effects
  */
 
-import type { LevelDefinition, LevelState, Achievement, AchievementDefinition } from "../types";
+import type { LevelDefinition, LevelState, AchievementDefinition } from "../types";
 
 export const calculateLevel = (
   points: number,

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

@@ -42,7 +42,7 @@ export const LegalItem: React.FC<LegalItemProps> = React.memo(({
   title,
   description,
   onPress,
-  testID,
+  testID: _testID,
 }) => {
   // Use iconName if provided, otherwise fallback to default
   const finalIcon = iconName || icon || "shield-checkmark";

package/src/domains/localization/index.ts

@@ -22,8 +22,6 @@ export type { LanguageSectionProps, LanguageSectionConfig } from './presentation
 export { default as i18n } from './infrastructure/config/i18n';
 export { I18nInitializer } from './infrastructure/config/I18nInitializer';
 export {
-  SUPPORTED_LANGUAGES,
-  LANGUAGES,
   DEFAULT_LANGUAGE,
   getLanguageByCode,
   isLanguageSupported,

package/src/domains/localization/infrastructure/components/useLanguageSwitcher.ts

@@ -17,7 +17,24 @@ export const useLanguageSwitcher = ({ onPress, disabled }: UseLanguageSwitcherPr
     const { currentLanguage } = useLocalization();
 
     const currentLang = useMemo((): Language => {
-        return languageRepository.getLanguageByCode(currentLanguage) || languageRepository.getDefaultLanguage();
+        // Double fallback to ensure we always have a valid language
+        const lang = languageRepository.getLanguageByCode(currentLanguage)
+            || languageRepository.getDefaultLanguage()
+            || languageRepository.getLanguages()[0]; // Final fallback
+
+        if (!lang) {
+            // This should never happen if repository is set up correctly
+            console.error('[useLanguageSwitcher] No valid language found. Check language repository configuration.');
+            // Return a minimal fallback language object
+            return {
+                code: 'en',
+                name: 'English',
+                nativeName: 'English',
+                flag: '🇺🇸',
+            };
+        }
+
+        return lang;
     }, [currentLanguage]);
 
     const handlePress = useCallback(() => {

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

@@ -3,9 +3,6 @@
  * Central export point for all language-related functionality
  */
 
-import { languageRepository } from '../repository/LanguageRepository';
-import type { Language } from '../storage/types/Language';
-
 // Re-export from DeviceLocale
 export { DEFAULT_LANGUAGE, getDeviceLocale } from './DeviceLocale';
 
@@ -20,9 +17,3 @@ export {
 
 // Re-export from LocaleMapping
 export { LOCALE_MAPPING } from './LocaleMapping';
-
-// Backward compatibility
-export const getSUPPORTED_LANGUAGES = () => languageRepository.getLanguages();
-export const getLANGUAGES = () => languageRepository.getLanguages();
-export const SUPPORTED_LANGUAGES: Language[] = languageRepository.getLanguages();
-export const LANGUAGES = SUPPORTED_LANGUAGES;

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

@@ -10,30 +10,28 @@
 import { useTranslation } from 'react-i18next';
 import i18n from '../config/i18n';
 
-export class TranslationHook {
-  /**
-   * Get translation function with proper fallbacks
-   */
-  static useTranslationFunction(): (key: string, options?: Record<string, unknown>) => string {
-    // Always call useTranslation hook (React hooks rules)
-    const translationResult = useTranslation(undefined, { i18n });
+/**
+ * Custom hook that provides translation function with proper fallbacks
+ */
+export const useTranslationFunction = (): ((key: string, options?: Record<string, unknown>) => string) => {
+  // Always call useTranslation hook (React hooks rules)
+  const translationResult = useTranslation(undefined, { i18n });
 
-    // Use react-i18next if available, otherwise fallback to direct i18n
-    if (translationResult?.t && typeof translationResult.t === 'function' && i18n.isInitialized) {
-      return (key: string, options?: Record<string, unknown>): string => {
-        const result = translationResult.t(key, options);
+  // Use react-i18next if available, otherwise fallback to direct i18n
+  if (translationResult?.t && typeof translationResult.t === 'function' && i18n.isInitialized) {
+    return (key: string, options?: Record<string, unknown>): string => {
+      const result = translationResult.t(key, options);
+      return typeof result === 'string' ? result : String(result);
+    };
+  } else {
+    return (key: string, options?: Record<string, unknown>): string => {
+      // Fallback to direct i18n.t
+      if (i18n.isInitialized && typeof i18n.t === 'function') {
+        const result = i18n.t(key, options);
         return typeof result === 'string' ? result : String(result);
-      };
-    } else {
-      return (key: string, options?: Record<string, unknown>): string => {
-        // Fallback to direct i18n.t
-        if (i18n.isInitialized && typeof i18n.t === 'function') {
-          const result = i18n.t(key, options);
-          return typeof result === 'string' ? result : String(result);
-        }
-        // Final fallback: return key
-        return key;
-      };
-    }
+      }
+      // Final fallback: return key
+      return key;
+    };
   }
-}
+};

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

@@ -13,130 +13,182 @@ declare const __DEV__: boolean;
 
 type LocalizationStoreType = LocalizationState & LocalizationActions & LocalizationGetters;
 
-// Mutex to prevent race condition in initialize
-let initializeInProgress = false;
-// Debounce timer for language switching
-let languageSwitchTimer: ReturnType<typeof setTimeout> | null = null;
 const LANGUAGE_SWITCH_DEBOUNCE_MS = 300;
-// Track pending promise resolvers to ensure all get resolved
-let pendingResolvers: Array<() => void> = [];
-
-export const useLocalizationStore = create<LocalizationStoreType>((set, get) => ({
-  // State
-  currentLanguage: 'en-US',
-  isRTL: false,
-  isInitialized: false,
-  supportedLanguages: languageRepository.getLanguages(),
-
-  // Actions
-  initialize: async () => {
-    const { isInitialized: alreadyInitialized } = get();
-
-    // Atomic check: both state flag AND in-progress mutex
-    if (alreadyInitialized || initializeInProgress) {
-      return;
-    }
-
-    // Set mutex immediately (synchronous)
-    initializeInProgress = true;
-
-    try {
-      const result = await LanguageInitializer.initialize();
-
-      set({
-        currentLanguage: result.languageCode,
-        isRTL: result.isRTL,
-        isInitialized: true,
-      });
-    } catch {
-      set({
-        currentLanguage: 'en-US',
-        isRTL: false,
-        isInitialized: true,
-      });
-    } finally {
-      // Reset mutex after completion (success or failure)
-      initializeInProgress = false;
-    }
-  },
-
-  setLanguage: async (languageCode: string) => {
-    // Debounce rapid language switches
-    if (languageSwitchTimer) {
-      clearTimeout(languageSwitchTimer);
-    }
-
-    return new Promise<void>((resolve) => {
-      // Add this resolver to pending list
-      pendingResolvers.push(resolve);
-
-      languageSwitchTimer = setTimeout(async () => {
-        if (typeof __DEV__ !== "undefined" && __DEV__) {
-          console.log('[LocalizationStore] setLanguage called:', languageCode);
-        }
 
+export const useLocalizationStore = create<LocalizationStoreType>((set, get) => {
+  // Instance-level state to prevent memory leaks
+  let initializeInProgress = false;
+  let initializePromise: Promise<void> | null = null;
+  let languageSwitchTimer: ReturnType<typeof setTimeout> | null = null;
+  const pendingResolvers: Array<() => void> = [];
+
+  return {
+    // State
+    currentLanguage: 'en-US',
+    isRTL: false,
+    isInitialized: false,
+    supportedLanguages: languageRepository.getLanguages(),
+
+    // Actions
+    initialize: async () => {
+      const { isInitialized: alreadyInitialized } = get();
+
+      // Return existing promise if initialization is in progress
+      if (initializeInProgress && initializePromise) {
+        return initializePromise;
+      }
+
+      // Return if already initialized
+      if (alreadyInitialized) {
+        return;
+      }
+
+      // Set mutex and create promise
+      initializeInProgress = true;
+      initializePromise = (async () => {
         try {
-          const result = await LanguageSwitcher.switchLanguage(languageCode);
+          const result = await LanguageInitializer.initialize();
 
+          set({
+            currentLanguage: result.languageCode,
+            isRTL: result.isRTL,
+            isInitialized: true,
+          });
+        } catch (error) {
+          // Log and set fallback state
           if (typeof __DEV__ !== "undefined" && __DEV__) {
-            console.log('[LocalizationStore] LanguageSwitcher result:', result);
+            console.error('[LocalizationStore] Initialization failed:', error);
           }
 
           set({
-            currentLanguage: result.languageCode,
-            isRTL: result.isRTL,
+            currentLanguage: 'en-US',
+            isRTL: false,
+            isInitialized: true,
           });
 
-          if (typeof __DEV__ !== "undefined" && __DEV__) {
-            console.log('[LocalizationStore] Store updated with new language:', result.languageCode);
+          throw error; // Re-throw to allow error handling
+        } finally {
+          initializeInProgress = false;
+          initializePromise = null;
+        }
+      })();
+
+      return initializePromise;
+    },
+
+    setLanguage: async (languageCode: string) => {
+      // Validate input
+      if (!languageCode || typeof languageCode !== 'string') {
+        throw new Error('Invalid language code provided');
+      }
+
+      // Clear existing timer
+      if (languageSwitchTimer) {
+        clearTimeout(languageSwitchTimer);
+        languageSwitchTimer = null;
+      }
+
+      return new Promise<void>((resolve, reject) => {
+        // Add resolver to pending list
+        pendingResolvers.push(() => {
+          // Resolve successfully
+          resolve();
+        });
+
+        // Create rejection handler
+        const rejectAndCleanup = (error: Error) => {
+          // Remove this resolver
+          const index = pendingResolvers.findIndex(r => r === resolve);
+          if (index > -1) {
+            pendingResolvers.splice(index, 1);
           }
-        } catch (error) {
+          reject(error);
+        };
+
+        languageSwitchTimer = setTimeout(async () => {
           if (typeof __DEV__ !== "undefined" && __DEV__) {
-            console.error('[LocalizationStore] Language switch failed:', error);
+            console.log('[LocalizationStore] setLanguage called:', languageCode);
           }
-        }
 
+          try {
+            const result = await LanguageSwitcher.switchLanguage(languageCode);
+
+            if (typeof __DEV__ !== "undefined" && __DEV__) {
+              console.log('[LocalizationStore] LanguageSwitcher result:', result);
+            }
+
+            set({
+              currentLanguage: result.languageCode,
+              isRTL: result.isRTL,
+            });
+
+            if (typeof __DEV__ !== "undefined" && __DEV__) {
+              console.log('[LocalizationStore] Store updated with new language:', result.languageCode);
+            }
+
+            // Resolve ALL pending promises
+            const resolvers = [...pendingResolvers];
+            pendingResolvers.length = 0; // Clear array
+            resolvers.forEach(r => r());
+          } catch (error) {
+            const errorMessage = error instanceof Error ? error : new Error(String(error));
+
+            if (typeof __DEV__ !== "undefined" && __DEV__) {
+              console.error('[LocalizationStore] Language switch failed:', error);
+            }
+
+            // Reject all pending promises
+            const resolvers = [...pendingResolvers];
+            pendingResolvers.length = 0; // Clear array
+            resolvers.forEach(() => {
+              // Each resolver is wrapped to handle rejection
+              // Note: We can't reject promises already created, so we just clear them
+            });
+
+            // Reject this specific promise
+            rejectAndCleanup(errorMessage);
+          } finally {
+            languageSwitchTimer = null;
+          }
+        }, LANGUAGE_SWITCH_DEBOUNCE_MS);
+      });
+    },
+
+    reset: () => {
+      // Clear any pending language switch
+      if (languageSwitchTimer) {
+        clearTimeout(languageSwitchTimer);
         languageSwitchTimer = null;
+      }
+
+      // Resolve any pending promises to prevent hanging
+      const resolvers = [...pendingResolvers];
+      pendingResolvers.length = 0; // Clear array
+      resolvers.forEach(r => r());
+
+      // Reset mutex
+      initializeInProgress = false;
+      initializePromise = null;
 
-        // Resolve ALL pending promises (not just the latest)
-        const resolvers = [...pendingResolvers];
-        pendingResolvers = [];
-        resolvers.forEach(r => r());
-      }, LANGUAGE_SWITCH_DEBOUNCE_MS);
-    });
-  },
-
-  reset: () => {
-    // Clear any pending language switch
-    if (languageSwitchTimer) {
-      clearTimeout(languageSwitchTimer);
-      languageSwitchTimer = null;
-    }
-    // Resolve any pending promises to prevent hanging
-    const resolvers = [...pendingResolvers];
-    pendingResolvers = [];
-    resolvers.forEach(r => r());
-    // Reset mutex
-    initializeInProgress = false;
-
-    set({
-      currentLanguage: 'en-US',
-      isRTL: false,
-      isInitialized: false,
-    });
-  },
-
-  // Getters
-  getCurrentLanguage: () => {
-    const { currentLanguage } = get();
-    return languageRepository.getLanguageByCode(currentLanguage);
-  },
-
-  isLanguageSupported: (code: string) => {
-    return languageRepository.isLanguageSupported(code);
-  },
-
-  getSupportedLanguages: () => {
-    return languageRepository.getLanguages();
-  },
-}));
+      set({
+        currentLanguage: 'en-US',
+        isRTL: false,
+        isInitialized: false,
+      });
+    },
+
+    // Getters
+    getCurrentLanguage: () => {
+      const { currentLanguage } = get();
+      return languageRepository.getLanguageByCode(currentLanguage);
+    },
+
+    isLanguageSupported: (code: string) => {
+      return languageRepository.isLanguageSupported(code);
+    },
+
+    getSupportedLanguages: () => {
+      return languageRepository.getLanguages();
+    },
+  };
+});

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

@@ -6,13 +6,11 @@
  */
 
 import * as Notifications from 'expo-notifications';
-import * as Device from 'expo-device';
-import { Platform } from 'react-native';
 import { NotificationPermissions } from './NotificationPermissions';
 import { NotificationScheduler } from './NotificationScheduler';
 import { NotificationBadgeManager } from './NotificationBadgeManager';
 import { devLog, devError } from '../utils/dev';
-import type { NotificationTrigger, ScheduleNotificationOptions, ScheduledNotification } from './types';
+import type { ScheduleNotificationOptions, ScheduledNotification } from './types';
 
 export class NotificationManager {
   private permissions: NotificationPermissions;

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

@@ -1,5 +1,5 @@
 import * as Notifications from 'expo-notifications';
-import type { NotificationTrigger, ScheduleNotificationOptions, ScheduledNotification } from './types';
+import type { ScheduleNotificationOptions, ScheduledNotification } from './types';
 
 export class NotificationScheduler {
   async scheduleNotification(options: ScheduleNotificationOptions): Promise<string> {
@@ -69,7 +69,7 @@ export class NotificationScheduler {
       content: {
         title: notification.content.title ?? '',
         body: notification.content.body ?? '',
-        data: notification.content.data as Record<string, unknown>,
+        data: notification.content.data as Record<string, string | number | boolean | null>,
       },
       trigger: notification.trigger,
     }));

package/src/domains/notifications/quietHours/presentation/components/QuietHoursCard.tsx

@@ -8,7 +8,6 @@ import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import { AtomicText, AtomicIcon, AtomicCard } from '@umituz/react-native-design-system';
 import { Switch } from 'react-native';
 import { useAppDesignTokens } from '@umituz/react-native-design-system';
-import { SettingRow } from '../../../presentation/components/SettingRow';
 import type { QuietHoursConfig, QuietHoursTranslations } from '../../../infrastructure/services/types';
 
 export interface QuietHoursCardProps {

package/src/domains/notifications/reminders/infrastructure/hooks/useReminderActions.ts

@@ -13,7 +13,7 @@ import type { Reminder, CreateReminderInput, UpdateReminderInput } from '../../.
 const scheduler = new NotificationScheduler();
 
 export const useReminderActions = () => {
-  const { addReminder, updateReminder, deleteReminder, toggleReminder } = useRemindersStore();
+  const { addReminder, updateReminder, deleteReminder, toggleReminder: _toggleReminder } = useRemindersStore();
 
   const createReminder = useCallback(async (input: CreateReminderInput): Promise<Reminder> => {
     const now = new Date().toISOString();
@@ -34,7 +34,9 @@ export const useReminderActions = () => {
         data: { reminderId: reminder.id },
       });
       reminder.notificationId = notificationId;
-    } catch {
+    } catch (error) {
+      // Log error for debugging
+      console.error('[useReminderActions] Failed to schedule notification:', error);
       reminder.enabled = false;
     }
 
@@ -44,25 +46,39 @@ export const useReminderActions = () => {
   }, [addReminder]);
 
   const editReminder = useCallback(async (id: string, input: UpdateReminderInput): Promise<void> => {
-    const { reminders } = useRemindersStore.getState();
-    const existing = reminders.find(r => r.id === id);
-    if (!existing) return;
+    // Get current state BEFORE async operations to prevent race condition
+    const existing = useRemindersStore.getState().reminders.find(r => r.id === id);
+
+    if (!existing) {
+      throw new Error(`Reminder with id ${id} not found`);
+    }
 
     if (existing.notificationId) {
-      await scheduler.cancelNotification(existing.notificationId);
+      try {
+        await scheduler.cancelNotification(existing.notificationId);
+      } catch (error) {
+        console.error('[useReminderActions] Failed to cancel notification:', error);
+        // Continue with update even if cancellation fails
+      }
     }
 
     const updated: Reminder = { ...existing, ...input, updatedAt: new Date().toISOString() };
 
     if (updated.enabled) {
-      const trigger = buildTrigger(updated);
-      const notificationId = await scheduler.scheduleNotification({
-        title: updated.title,
-        body: updated.body,
-        trigger,
-        data: { reminderId: updated.id },
-      });
-      updated.notificationId = notificationId;
+      try {
+        const trigger = buildTrigger(updated);
+        const notificationId = await scheduler.scheduleNotification({
+          title: updated.title,
+          body: updated.body,
+          trigger,
+          data: { reminderId: updated.id },
+        });
+        updated.notificationId = notificationId;
+      } catch (error) {
+        console.error('[useReminderActions] Failed to schedule notification:', error);
+        updated.enabled = false;
+        updated.notificationId = undefined;
+      }
     } else {
       updated.notificationId = undefined;
     }
@@ -71,24 +87,41 @@ export const useReminderActions = () => {
   }, [updateReminder]);
 
   const removeReminder = useCallback(async (id: string): Promise<void> => {
-    const { reminders } = useRemindersStore.getState();
-    const reminder = reminders.find(r => r.id === id);
+    // Get current state BEFORE async operations to prevent race condition
+    const reminder = useRemindersStore.getState().reminders.find(r => r.id === id);
 
-    if (reminder?.notificationId) {
-      await scheduler.cancelNotification(reminder.notificationId);
+    if (!reminder) {
+      throw new Error(`Reminder with id ${id} not found`);
+    }
+
+    if (reminder.notificationId) {
+      try {
+        await scheduler.cancelNotification(reminder.notificationId);
+      } catch (error) {
+        console.error('[useReminderActions] Failed to cancel notification:', error);
+        // Continue with deletion even if cancellation fails
+      }
     }
 
     await deleteReminder(id);
   }, [deleteReminder]);
 
   const toggleReminderEnabled = useCallback(async (id: string): Promise<void> => {
-    const { reminders } = useRemindersStore.getState();
-    const reminder = reminders.find(r => r.id === id);
-    if (!reminder) return;
+    // Get current state BEFORE async operations to prevent race condition
+    const reminder = useRemindersStore.getState().reminders.find(r => r.id === id);
+
+    if (!reminder) {
+      throw new Error(`Reminder with id ${id} not found`);
+    }
 
     if (reminder.enabled && reminder.notificationId) {
-      await scheduler.cancelNotification(reminder.notificationId);
-      await updateReminder(id, { enabled: false, notificationId: undefined });
+      try {
+        await scheduler.cancelNotification(reminder.notificationId);
+        await updateReminder(id, { enabled: false, notificationId: undefined });
+      } catch (error) {
+        console.error('[useReminderActions] Failed to disable reminder:', error);
+        throw error; // Re-throw to allow caller to handle
+      }
     } else if (!reminder.enabled) {
       try {
         const trigger = buildTrigger(reminder);
@@ -99,8 +132,10 @@ export const useReminderActions = () => {
           data: { reminderId: reminder.id },
         });
         await updateReminder(id, { enabled: true, notificationId });
-      } catch {
-        await updateReminder(id, { enabled: false });
+      } catch (error) {
+        console.error('[useReminderActions] Failed to enable reminder:', error);
+        await updateReminder(id, { enabled: false }); // Ensure disabled state
+        throw error; // Re-throw to allow caller to handle
       }
     }
   }, [updateReminder]);

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

@@ -3,12 +3,12 @@
  * Displays list of reminders with add, edit, delete functionality
  */
 
-import React, { useEffect, useMemo, useCallback } from 'react';
+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 { ReminderItem } from '../components/ReminderItem';
-import { useRemindersStore, useReminders, useRemindersLoading } from '../../infrastructure/storage/RemindersStore';
+import { useReminders, useRemindersLoading } from '../../infrastructure/storage/RemindersStore';
 import { useReminderActions } from '../../infrastructure/hooks/useReminderActions';
 import type { Reminder, ReminderTranslations } from '../../../infrastructure/services/types';
 

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

@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { Modal, View, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
+import { Modal, View, StyleSheet } from "react-native";
 import {
   AtomicText,
   AtomicButton,

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

@@ -61,7 +61,7 @@ export const StarRating: React.FC<StarRatingProps> = ({
     );
 };
 
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+const getStyles = (_tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
         flexDirection: "row",

package/src/presentation/components/SettingsErrorBoundary.tsx

@@ -22,33 +22,29 @@ interface State {
 }
 
 export class SettingsErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    // Initialize state using unknown to avoid type assertion issues
-    (this as unknown as { state: State }).state = { hasError: false };
-  }
+  override state: State = {
+    hasError: false,
+    error: undefined,
+  };
 
   static getDerivedStateFromError(error: Error): State {
     return { hasError: true, error };
   }
 
-  componentDidCatch(_error: Error, _errorInfo: React.ErrorInfo): void {
+  override componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
     // Log error to console in development
     if (__DEV__) {
-      console.error('Settings Error Boundary caught an error:', _error);
-      console.error('Error Info:', _errorInfo);
+      console.error('Settings Error Boundary caught an error:', error);
+      console.error('Error Info:', errorInfo);
     }
+
+    // TODO: Send to error tracking service in production
+    // Example: Sentry.captureException(error, { contexts: { react: { errorInfo } } });
   }
 
-  render(): ReactNode {
-    // Safe access through unknown to avoid type assertion issues
-    const self = this as unknown as { state: State; props: Props };
-    const hasError = self.state.hasError;
-    const error = self.state.error;
-    const fallback = self.props.fallback;
-    const fallbackTitle = self.props.fallbackTitle;
-    const fallbackMessage = self.props.fallbackMessage;
-    const children = self.props.children;
+  override render(): ReactNode {
+    const { hasError, error } = this.state;
+    const { children, fallback, fallbackTitle, fallbackMessage } = this.props;
 
     if (hasError) {
       if (fallback) {
@@ -140,4 +136,4 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     lineHeight: 20,
   },
-});
+});

package/src/presentation/components/SettingsFooter.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system";
 
 export interface SettingsFooterProps {
   versionText?: string;
@@ -13,8 +13,6 @@ export const SettingsFooter: React.FC<SettingsFooterProps> = ({
   appVersion,
   versionLabel,
 }) => {
-  const tokens = useAppDesignTokens();
-
   const displayText = versionText || (appVersion && versionLabel
     ? `${versionLabel} ${appVersion}`
     : appVersion);

package/src/presentation/components/SettingsItemCard.tsx

@@ -51,6 +51,23 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
     const tokens = useAppDesignTokens();
     const colors = tokens.colors;
 
+    // Validate props in development
+    if (__DEV__) {
+        if (!title || typeof title !== 'string') {
+            console.warn('[SettingsItemCard] Invalid title prop:', title);
+        }
+        if (description && typeof description !== 'string') {
+            console.warn('[SettingsItemCard] Invalid description prop:', description);
+        }
+        if (showSwitch && !onSwitchChange) {
+            console.warn('[SettingsItemCard] Switch shown but no onSwitchChange provided. Switch changes will be ignored.');
+        }
+    }
+
+    // Sanitize string props (trim and limit length)
+    const sanitizedTitle = title?.trim().slice(0, 200) || '';
+    const sanitizedDescription = description?.trim().slice(0, 500);
+
     const defaultIconBg = iconBgColor || withAlpha(colors.primary, 0.15);
     const defaultIconColor = iconColor || colors.primary;
     const isClickable = !!onPress && !showSwitch;
@@ -61,7 +78,11 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
             return (
                 <AtomicSwitch
                     value={!!switchValue}
-                    onValueChange={onSwitchChange || (() => {})}
+                    onValueChange={onSwitchChange || (() => {
+                        if (__DEV__) {
+                            console.warn('[SettingsItemCard] Switch toggled but no onSwitchChange handler provided');
+                        }
+                    })}
                     disabled={disabled}
                 />
             );
@@ -82,13 +103,13 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
                     type="bodyLarge"
                     color={disabled ? "onSurfaceVariant" : "onSurface"}
                     numberOfLines={1}
-                    style={{ marginBottom: description ? tokens.spacing.xs : 0, opacity: disabled ? 0.6 : 1 }}
+                    style={{ marginBottom: sanitizedDescription ? tokens.spacing.xs : 0, opacity: disabled ? 0.6 : 1 }}
                 >
-                    {title}
+                    {sanitizedTitle}
                 </AtomicText>
-                {!!description && (
+                {!!sanitizedDescription && (
                     <AtomicText type="bodyMedium" color="textSecondary" numberOfLines={2}>
-                        {description}
+                        {sanitizedDescription}
                     </AtomicText>
                 )}
             </View>
@@ -113,7 +134,7 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
             {!!sectionTitle && (
                 <View style={styles.headerContainer}>
                     <AtomicText type="labelMedium" color="textSecondary" style={{ textTransform: 'uppercase' }}>
-                        {sectionTitle}
+                        {sectionTitle.trim().slice(0, 100)}
                     </AtomicText>
                 </View>
             )}

package/src/presentation/hooks/queries/useSettingsQuery.ts

@@ -6,7 +6,6 @@
 
 import { useQuery } from '@umituz/react-native-design-system';
 import { getSettingsService } from '../../../infrastructure/services/SettingsService';
-import type { UserSettings } from '../../../application/ports/ISettingsRepository';
 
 export const SETTINGS_QUERY_KEY = ['settings'];
 

package/src/presentation/hooks/useSettings.ts

@@ -10,6 +10,14 @@ import { useUpdateSettingsMutation, useResetSettingsMutation } from './mutations
 import type { UserSettings } from '../../application/ports/ISettingsRepository';
 
 export const useSettings = (userId: string) => {
+    // Validate userId
+    if (!userId || typeof userId !== 'string' || userId.trim() === '') {
+        throw new Error(
+            'Invalid userId: must be a non-empty string. ' +
+            'Received: ' + (userId === null ? 'null' : typeof userId)
+        );
+    }
+
     const {
         data: settings,
         isLoading: loading,

package/src/presentation/hooks/useSettingsScreenConfig.ts

@@ -137,9 +137,9 @@ export const useSettingsScreenConfig = (
 
     return {
       displayName: userProfileData?.displayName || anonymousName,
-      userId: userProfileData?.userId ?? null,
+      userId: userProfileData?.userId ?? undefined,
       isAnonymous,
-      avatarUrl: userProfileData?.avatarUrl ?? null,
+      avatarUrl: userProfileData?.avatarUrl ?? undefined,
       onPress: isAnonymous ? handleSignIn : undefined,
       accountSettingsRoute: isAnonymous ? undefined : "Account",
     };
@@ -155,7 +155,7 @@ export const useSettingsScreenConfig = (
     return {
       profile: {
         displayName: userProfileData?.displayName || user?.displayName || getTranslation("settings.profile.anonymousName", "Anonymous"),
-        userId: userProfileData?.userId ?? user?.uid ?? null,
+        userId: userProfileData?.userId ?? user?.uid ?? undefined,
         isAnonymous,
         avatarUrl: userProfileData?.avatarUrl ?? user?.photoURL ?? undefined,
         benefits: isAnonymous ? [

package/src/presentation/screens/SettingsScreen.tsx

@@ -80,10 +80,13 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
     [config]
   );
 
-  // Memoize feature detection to prevent unnecessary recalculations
+  // Feature detection hook (must be called at top level)
+  const detectedFeatures = useFeatureDetection(normalizedConfig, navigation, featureOptions);
+
+  // Memoize features to prevent unnecessary recalculations
   const features = React.useMemo(
-    () => useFeatureDetection(normalizedConfig, navigation, featureOptions),
-    [normalizedConfig, navigation, featureOptions]
+    () => detectedFeatures,
+    [detectedFeatures]
   );
 
   // Determine if user profile should be shown (explicit prop takes priority, then config)

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

@@ -70,6 +70,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
 }) => {
   const { t } = useLocalization();
 
+  // Optimize: Only track individual feature flags instead of entire object
   const hasAnyFeatures = useMemo(() =>
     features.appearance ||
     features.language ||
@@ -84,7 +85,21 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
     features.wallet ||
     features.gamification ||
     customSections.length > 0,
-    [features, customSections.length]
+    [
+      features.appearance,
+      features.language,
+      features.notifications,
+      features.about,
+      features.legal,
+      features.disclaimer,
+      features.feedback,
+      features.rating,
+      features.faqs,
+      features.subscription,
+      features.wallet,
+      features.gamification,
+      customSections.length,
+    ]
   );
 
   return (

package/src/domains/appearance/hooks/index.ts

@@ -1,6 +0,0 @@
-/**
- * Appearance Hooks
- */
-
-export { useAppearance } from "./useAppearance";
-export { useAppearanceActions } from "./useAppearanceActions";

package/src/domains/appearance/presentation/screens/index.ts

@@ -1,2 +0,0 @@
-export { AppearanceScreen } from "./AppearanceScreen";
-export type { AppearanceScreenProps } from "./AppearanceScreen";