@umituz/react-native-settings 4.23.64 → 4.23.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.23.64",
+  "version": "4.23.66",
   "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/about/presentation/hooks/useAboutInfo.ts

@@ -99,7 +99,12 @@ export const useAboutInfo = (
       isMountedRef.current = false;
 
       if (repository && typeof repository.destroy === 'function') {
-        repository.destroy();
+        try {
+          repository.destroy();
+        } catch (error) {
+          // Log cleanup error but don't throw
+          console.warn('Error during repository cleanup:', error);
+        }
       }
     };
   }, [repository]);
@@ -112,10 +117,16 @@ export const useAboutInfo = (
       isMountedRef.current &&
       !isInitializedRef.current
     ) {
-      const { createDefaultAppInfo } = require('../../utils/AppInfoFactory');
-      const defaultAppInfo = createDefaultAppInfo(initialConfig);
-      setAppInfo(defaultAppInfo);
-      isInitializedRef.current = true;
+      // Dynamic import to avoid require issues
+      import('../../utils/AppInfoFactory').then(({ createDefaultAppInfo }) => {
+        if (isMountedRef.current) {
+          const defaultAppInfo = createDefaultAppInfo(initialConfig);
+          setAppInfo(defaultAppInfo);
+          isInitializedRef.current = true;
+        }
+      }).catch((error) => {
+        console.error('Failed to load AppInfoFactory:', error);
+      });
     }
   }, [initialConfig, autoInit]);
 

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

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 import { useAppearance } from "./useAppearance";
 import type { CustomThemeColors, ThemeMode } from "@umituz/react-native-design-system";
 
@@ -6,8 +6,19 @@ export const useAppearanceActions = () => {
   const { themeMode, customColors, setThemeMode, setCustomColors, reset } = useAppearance();
   const [localCustomColors, setLocalCustomColors] = useState<CustomThemeColors>(customColors || {});
 
+  // Track if component is mounted to prevent state updates after unmount
+  const isMountedRef = useRef(true);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  // Sync local state with global state, but only if mounted
   useEffect(() => {
-    if (customColors) {
+    if (isMountedRef.current && customColors) {
       setLocalCustomColors(customColors);
     }
   }, [customColors]);
@@ -17,16 +28,21 @@ export const useAppearanceActions = () => {
   }, [setThemeMode]);
 
   const handleColorChange = useCallback((key: keyof CustomThemeColors, color: string) => {
-    setLocalCustomColors(prev => {
-      const newColors = { ...prev, [key]: color };
-      setCustomColors(newColors);
-      return newColors;
-    });
-  }, [setCustomColors]);
+    // Update local state immediately for UI responsiveness
+    const newColors = { ...localCustomColors, [key]: color };
+
+    // Batch state updates to prevent race conditions
+    setLocalCustomColors(newColors);
+
+    // Update global state separately
+    setCustomColors(newColors);
+  }, [localCustomColors, setCustomColors]);
 
   const handleResetColors = useCallback(() => {
     reset();
-    setLocalCustomColors({});
+    if (isMountedRef.current) {
+      setLocalCustomColors({});
+    }
   }, [reset]);
 
   return {

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

@@ -59,7 +59,7 @@ export const AppearancePreview: React.FC<AppearancePreviewProps> = ({
 
   const colors = previewColors.map((item) => ({
     label: item.label,
-    color: localCustomColors[item.key] || item.fallbackColor,
+    color: localCustomColors[item.key] ?? item.fallbackColor,
   }));
 
   if (!showPreview) {
@@ -84,8 +84,8 @@ export const AppearancePreview: React.FC<AppearancePreviewProps> = ({
       </AtomicText>
       <View style={styles.previewContainer}>
         <View style={styles.previewColorRow}>
-          {colors.map((item, index) => (
-            <View key={index} style={styles.previewColorItem}>
+          {colors.map((item) => (
+            <View key={`preview-color-${item.label}`} style={styles.previewColorItem}>
               <View
                 style={[
                   styles.previewColorCircle,

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

@@ -40,14 +40,16 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
       // Prevent unnecessary updates if color hasn't changed
       if (value === color) return;
       onValueChange(color);
-    } catch {
-      // Silent error handling
+    } catch (error) {
+      // Log error for debugging while preventing UI crashes
+      console.error('Failed to change color:', error);
+      // Optionally: Show user feedback about the error
     }
   }, [value, onValueChange]);
 
   // Memoize color options to prevent unnecessary re-renders
   const colorOptions = useMemo(() => {
-    return colorsMemo.map((color) => {
+    return colorsMemo.map((color, index) => {
       const isSelected = value === color;
 
       return (
@@ -60,6 +62,10 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
           ]}
           onPress={() => handleColorChange(color)}
           activeOpacity={0.8} // Performance optimization
+          accessibilityLabel={`Color ${color} ${isSelected ? 'selected' : 'not selected'}`}
+          accessibilityRole={isSelected ? 'button' : 'button'}
+          accessibilityState={{ selected: isSelected }}
+          accessibilityHint={`Select ${color} color`}
         >
           {isSelected && (
             <AtomicIcon name="checkmark" size="sm" customColor={tokens.colors.textInverse} />
@@ -67,7 +73,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
         </TouchableOpacity>
       );
     });
-  }, [colorsMemo, value, handleColorChange, styles]);
+  }, [colorsMemo, value, handleColorChange, styles, tokens.colors.textInverse]);
 
   return (
     <View style={styles.container}>

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

@@ -43,8 +43,8 @@ export const ThemeModeSection: React.FC<ThemeModeSectionProps> = ({
   const handleThemeSelect = useCallback((mode: ThemeMode) => {
     try {
       onThemeSelect(mode);
-    } catch {
-      // Silent error handling
+    } catch (error) {
+      console.error('Failed to select theme:', error);
     }
   }, [onThemeSelect]);
 

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

@@ -5,7 +5,7 @@
  * Single Responsibility: Render theme option UI
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
@@ -22,7 +22,24 @@ interface ThemeOptionProps {
   onSelect: () => void;
 }
 
-export const ThemeOption: React.FC<ThemeOptionProps> = ({
+// Valid theme modes for validation
+const VALID_THEME_MODES: readonly ThemeMode[] = ["light", "dark", "auto"];
+
+// Icon names mapping for type safety
+const THEME_ICONS: Record<ThemeMode, string> = {
+  light: "sunny-outline",
+  dark: "moon-outline",
+  auto: "desktop-outline",
+};
+
+// Utility function to add opacity to hex color
+const addOpacityToHex = (hexColor: string, opacity: string): string => {
+  // Remove # if present
+  const color = hexColor.replace("#", "");
+  return `#${color}${opacity}`;
+};
+
+export const ThemeOption: React.FC<ThemeOptionProps> = React.memo(({
   mode,
   title,
   subtitle,
@@ -33,13 +50,27 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
   onSelect,
 }) => {
   const tokens = useAppDesignTokens();
-  const styles = getStyles(tokens);
-  const iconName = mode === "dark" ? "moon-outline" : mode === "light" ? "sunny-outline" : "desktop-outline";
+
+  // Memoize styles to prevent unnecessary re-creation
+  const styles = useMemo(() => getStyles(tokens), [tokens]);
+
+  // Type-safe icon name selection with validation
+  const iconName: string = useMemo(() => {
+    if (VALID_THEME_MODES.includes(mode)) {
+      return THEME_ICONS[mode];
+    }
+    // Fallback for invalid mode
+    console.warn(`Invalid theme mode: ${mode}. Defaulting to auto.`);
+    return THEME_ICONS.auto;
+  }, [mode]);
 
   return (
     <TouchableOpacity
       style={[styles.container, isSelected && styles.selectedContainer]}
       onPress={onSelect}
+      accessibilityLabel={`${title} theme ${isSelected ? 'selected' : 'not selected'}`}
+      accessibilityRole="button"
+      accessibilityState={{ selected: isSelected }}
     >
       <View style={styles.header}>
         <View style={styles.iconContainer}>
@@ -85,7 +116,7 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
           ) : null}
           {features.map((feature, index) => (
             <AtomicText
-              key={index}
+              key={`feature-${index}-${feature.slice(0, 10)}`}
               type="bodySmall"
               color="secondary"
               style={styles.feature}
@@ -97,7 +128,9 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
       ) : null}
     </TouchableOpacity>
   );
-};
+});
+
+ThemeOption.displayName = "ThemeOption";
 
 const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
@@ -121,7 +154,7 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       width: 48,
       height: 48,
       borderRadius: 24,
-      backgroundColor: `${tokens.colors.primary}15`,
+      backgroundColor: addOpacityToHex(tokens.colors.primary, "15"),
       justifyContent: "center",
       alignItems: "center",
       marginRight: 12,
@@ -134,7 +167,7 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       lineHeight: 20,
     },
     featuresContainer: {
-      backgroundColor: `${tokens.colors.primary}08`,
+      backgroundColor: addOpacityToHex(tokens.colors.primary, "08"),
       borderRadius: 8,
       padding: 12,
     },

package/src/domains/gamification/components/GamificationScreen/types.ts

@@ -3,6 +3,7 @@
  * Generic types for 100+ apps - NO app-specific code
  */
 
+import type React from 'react';
 import type { LevelProgressProps } from "../LevelProgress";
 import type { StatsCardProps } from "../StatsCard";
 import type { AchievementItemProps } from "../AchievementItem";

package/src/domains/gamification/store/gamificationStore.ts

@@ -116,10 +116,16 @@ export const useGamificationStore = createStore<GamificationState, GamificationA
       });
     },
 
-    checkAchievements: () => {
+    checkAchievements: (): Achievement[] => {
       if (!currentConfig) return [];
 
       const state = get();
+
+      // Safety check for achievements array
+      if (!state.achievements || state.achievements.length === 0) {
+        return [];
+      }
+
       const newlyUnlocked: Achievement[] = [];
 
       const updatedAchievements = state.achievements.map((ach: Achievement) => {

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

@@ -70,30 +70,30 @@ export const LegalDocumentsList: React.FC<LegalDocumentsListProps> = React.memo(
         </AtomicText>
       )}
 
-      {showPrivacy && (
+      {showPrivacy && privacyTitle && (
         <LegalItem
           iconName="shield"
-          title={privacyTitle!}
+          title={privacyTitle}
           description={privacyDescription}
           onPress={onPrivacyPress}
           testID="privacy-policy-item"
         />
       )}
 
-      {showTerms && (
+      {showTerms && termsTitle && (
         <LegalItem
           iconName="document-text"
-          title={termsTitle!}
+          title={termsTitle}
           description={termsDescription}
           onPress={onTermsPress}
           testID="terms-of-service-item"
         />
       )}
 
-      {showEula && (
+      {showEula && eulaTitle && (
         <LegalItem
           iconName="document"
-          title={eulaTitle!}
+          title={eulaTitle}
           description={eulaDescription}
           onPress={handleEulaPress}
           testID="eula-item"

package/src/domains/localization/presentation/providers/LocalizationProvider.tsx

@@ -22,13 +22,28 @@ export const LocalizationProvider: React.FC<LocalizationProviderProps> = ({
   const initialize = useLocalizationStore((state) => state.initialize);
 
   useEffect(() => {
+    let isMounted = true;
+
     const initializeLocalization = async () => {
-      I18nInitializer.initialize(translations, defaultLanguage);
-      await initialize();
-      setIsI18nReady(true);
+      try {
+        I18nInitializer.initialize(translations, defaultLanguage);
+        await initialize();
+        if (isMounted) {
+          setIsI18nReady(true);
+        }
+      } catch (error) {
+        console.error('Failed to initialize localization:', error);
+        if (isMounted) {
+          setIsI18nReady(true); // Set ready even on error to prevent indefinite loading
+        }
+      }
     };
 
     initializeLocalization();
+
+    return () => {
+      isMounted = false;
+    };
   }, [translations, defaultLanguage, initialize]);
 
   if (!isI18nReady) {

package/src/domains/localization/presentation/screens/LanguageSelectionScreen.types.ts

@@ -2,6 +2,7 @@
  * Language Selection Screen Types
  */
 
+import type React from 'react';
 import type { Language } from '../../infrastructure/storage/types/Language';
 
 export interface LanguageSelectionScreenProps {

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

@@ -29,10 +29,13 @@ export type NotificationTrigger =
   | { type: 'weekly'; weekday: number; hour: number; minute: number }
   | { type: 'monthly'; day: number; hour: number; minute: number };
 
+// More specific data type for notifications to prevent unsafe data
+export type NotificationData = Record<string, string | number | boolean | null>;
+
 export interface ScheduleNotificationOptions {
   title: string;
   body: string;
-  data?: Record<string, unknown>;
+  data?: NotificationData;
   trigger: NotificationTrigger;
   sound?: boolean | string;
   badge?: number;
@@ -44,7 +47,7 @@ export interface ScheduledNotification {
   content: {
     title: string;
     body: string;
-    data: Record<string, unknown>;
+    data: NotificationData;
   };
   trigger: Notifications.NotificationTrigger;
 }
@@ -79,8 +82,8 @@ export interface Reminder {
   dayOfMonth?: number;
   enabled: boolean;
   notificationId?: string;
-  createdAt: string;
-  updatedAt: string;
+  createdAt: string; // ISO 8601 date string
+  updatedAt: string; // ISO 8601 date string
 }
 
 export interface CreateReminderInput {

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

@@ -35,10 +35,21 @@ export const useQuietHoursActions = () => {
     const startMinutes = quietHours.startHour * 60 + quietHours.startMinute;
     const endMinutes = quietHours.endHour * 60 + quietHours.endMinute;
 
+    // Validate time values
+    if (startMinutes < 0 || startMinutes >= 1440 || endMinutes < 0 || endMinutes >= 1440) {
+      console.error('Invalid quiet hours time values');
+      return false;
+    }
+
+    // Handle case where quiet hours span midnight
     if (startMinutes <= endMinutes) {
+      // Same day period (e.g., 22:00 - 06:00 is not this case)
       return currentMinutes >= startMinutes && currentMinutes < endMinutes;
+    } else {
+      // Spans midnight (e.g., 22:00 - 06:00)
+      // Current time is after start OR before end
+      return currentMinutes >= startMinutes || currentMinutes < endMinutes;
     }
-    return currentMinutes >= startMinutes || currentMinutes < endMinutes;
   }, [quietHours]);
 
   return {

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

@@ -48,12 +48,22 @@ export const QuietHoursCard: React.FC<QuietHoursCardProps> = ({
           onValueChange={onToggle}
           trackColor={{ false: tokens.colors.surfaceSecondary, true: tokens.colors.primary }}
           thumbColor={tokens.colors.surface}
+          accessibilityLabel={translations.title}
+          accessibilityHint={translations.description}
+          accessibilityRole="switch"
         />
       </View>
 
       {config.enabled && (
         <View style={styles.timeContainer}>
-          <TouchableOpacity style={styles.timeButton} onPress={onStartTimePress} activeOpacity={0.7}>
+          <TouchableOpacity
+            style={styles.timeButton}
+            onPress={onStartTimePress}
+            activeOpacity={0.7}
+            accessibilityLabel={`${translations.startTimeLabel}: ${formatTime(config.startHour, config.startMinute)}`}
+            accessibilityRole="button"
+            accessibilityHint="Press to change start time"
+          >
             <AtomicText type="bodySmall" style={styles.timeLabel}>{translations.startTimeLabel}</AtomicText>
             <AtomicText type="bodyLarge" style={styles.timeValue}>
               {formatTime(config.startHour, config.startMinute)}
@@ -64,7 +74,14 @@ export const QuietHoursCard: React.FC<QuietHoursCardProps> = ({
             <AtomicIcon name="arrow-forward" size="sm" color="secondary" />
           </View>
 
-          <TouchableOpacity style={styles.timeButton} onPress={onEndTimePress} activeOpacity={0.7}>
+          <TouchableOpacity
+            style={styles.timeButton}
+            onPress={onEndTimePress}
+            activeOpacity={0.7}
+            accessibilityLabel={`${translations.endTimeLabel}: ${formatTime(config.endHour, config.endMinute)}`}
+            accessibilityRole="button"
+            accessibilityHint="Press to change end time"
+          >
             <AtomicText type="bodySmall" style={styles.timeLabel}>{translations.endTimeLabel}</AtomicText>
             <AtomicText type="bodyLarge" style={styles.timeValue}>
               {formatTime(config.endHour, config.endMinute)}

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

@@ -14,6 +14,18 @@ import { FormButton } from './FormButton';
 import { DEFAULT_TIME_PRESETS, FREQUENCY_OPTIONS } from '../../infrastructure/config/reminderPresets';
 import type { Reminder, ReminderFrequency, CreateReminderInput, TimePreset } from '../../../infrastructure/services/types';
 
+// Constants for magic numbers
+const DEFAULT_HOUR = 9;
+const DEFAULT_MINUTE = 0;
+const DEFAULT_WEEKDAY = 2; // Tuesday
+const MAX_TITLE_LENGTH = 100;
+const MAX_BODY_LENGTH = 500;
+
+// Validation constants
+const VALID_HOUR_RANGE = { min: 0, max: 23 } as const;
+const VALID_MINUTE_RANGE = { min: 0, max: 59 } as const;
+const VALID_WEEKDAY_RANGE = { min: 0, max: 6 } as const;
+
 export interface ReminderFormTranslations {
   titleLabel: string;
   titlePlaceholder: string;
@@ -52,11 +64,24 @@ export const ReminderForm: React.FC<ReminderFormProps> = ({
   const [body, setBody] = useState(initialData?.body || '');
   const [frequency, setFrequency] = useState<ReminderFrequency>(initialData?.frequency || 'daily');
   const [selectedPresetId, setSelectedPresetId] = useState<string | undefined>(initialData?.timePresetId);
-  const [hour, setHour] = useState(initialData?.hour ?? 9);
-  const [minute, setMinute] = useState(initialData?.minute ?? 0);
-  const [weekday, setWeekday] = useState(initialData?.weekday ?? 2);
+  const [hour, setHour] = useState(initialData?.hour ?? DEFAULT_HOUR);
+  const [minute, setMinute] = useState(initialData?.minute ?? DEFAULT_MINUTE);
+  const [weekday, setWeekday] = useState(initialData?.weekday ?? DEFAULT_WEEKDAY);
   const [isCustomTime, setIsCustomTime] = useState(!initialData?.timePresetId);
 
+  // Validation helper functions
+  const isValidHour = useCallback((h: number): boolean => {
+    return h >= VALID_HOUR_RANGE.min && h <= VALID_HOUR_RANGE.max;
+  }, []);
+
+  const isValidMinute = useCallback((m: number): boolean => {
+    return m >= VALID_MINUTE_RANGE.min && m <= VALID_MINUTE_RANGE.max;
+  }, []);
+
+  const isValidWeekday = useCallback((w: number): boolean => {
+    return w >= VALID_WEEKDAY_RANGE.min && w <= VALID_WEEKDAY_RANGE.max;
+  }, []);
+
   const handlePresetSelect = useCallback((preset: TimePreset) => {
     setSelectedPresetId(preset.id);
     setHour(preset.hour);
@@ -70,10 +95,45 @@ export const ReminderForm: React.FC<ReminderFormProps> = ({
   }, []);
 
   const handleSave = useCallback(() => {
-    if (!title.trim()) return;
+    const trimmedTitle = title.trim();
+    const trimmedBody = body.trim();
+
+    // Validate title
+    if (!trimmedTitle) {
+      console.warn('Reminder title is required');
+      return;
+    }
+
+    if (trimmedTitle.length > MAX_TITLE_LENGTH) {
+      console.warn(`Reminder title exceeds maximum length of ${MAX_TITLE_LENGTH}`);
+      return;
+    }
+
+    // Validate body length
+    if (trimmedBody.length > MAX_BODY_LENGTH) {
+      console.warn(`Reminder body exceeds maximum length of ${MAX_BODY_LENGTH}`);
+      return;
+    }
+
+    // Validate time values
+    if (!isValidHour(hour) || !isValidMinute(minute)) {
+      console.warn('Invalid time values');
+      return;
+    }
+
+    // Validate weekday if frequency is weekly
+    if (frequency === 'weekly' && !isValidWeekday(weekday)) {
+      console.warn('Invalid weekday value');
+      return;
+    }
+
+    // Sanitize input (React Native handles XSS, but we trim extra whitespace)
+    const sanitizedTitle = trimmedTitle.replace(/\s+/g, ' ').trim();
+    const sanitizedBody = trimmedBody.replace(/\s+/g, ' ').trim();
+
     onSave({
-      title: title.trim(),
-      body: body.trim(),
+      title: sanitizedTitle,
+      body: sanitizedBody,
       frequency,
       timePresetId: isCustomTime ? undefined : selectedPresetId,
       hour,
@@ -81,7 +141,7 @@ export const ReminderForm: React.FC<ReminderFormProps> = ({
       weekday: frequency === 'weekly' ? weekday : undefined,
       dayOfMonth: frequency === 'monthly' ? 1 : undefined,
     });
-  }, [title, body, frequency, selectedPresetId, hour, minute, weekday, isCustomTime, onSave]);
+  }, [title, body, frequency, selectedPresetId, hour, minute, weekday, isCustomTime, onSave, isValidHour, isValidMinute, isValidWeekday]);
 
   return (
     <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>

package/src/infrastructure/repositories/SettingsRepository.ts

@@ -7,6 +7,23 @@
 import { storageRepository, StorageKey, createUserKey } from '@umituz/react-native-design-system';
 import type { ISettingsRepository, UserSettings, SettingsResult } from '../../application/ports/ISettingsRepository';
 
+/**
+ * Validates userId to prevent key injection attacks
+ */
+const validateUserId = (userId: string): void => {
+    if (!userId || typeof userId !== 'string') {
+        throw new Error('Invalid userId: must be a non-empty string');
+    }
+    // Prevent potential key injection by restricting characters
+    if (!/^[a-zA-Z0-9_-]+$/.test(userId)) {
+        throw new Error('Invalid userId: contains invalid characters');
+    }
+    // Limit length to prevent DoS attacks
+    if (userId.length > 128) {
+        throw new Error('Invalid userId: exceeds maximum length');
+    }
+};
+
 export class SettingsRepository implements ISettingsRepository {
     private readonly defaultSettings: (userId: string) => UserSettings = (userId: string) => ({
         userId,
@@ -24,6 +41,9 @@ export class SettingsRepository implements ISettingsRepository {
 
     async getSettings(userId: string): Promise<SettingsResult<UserSettings>> {
         try {
+            // Validate input
+            validateUserId(userId);
+
             const storageKey = createUserKey(StorageKey.USER_PREFERENCES, userId);
             const defaults = this.defaultSettings(userId);
             const result = await storageRepository.getItem<UserSettings>(storageKey, defaults);
@@ -51,6 +71,9 @@ export class SettingsRepository implements ISettingsRepository {
 
     async saveSettings(settings: UserSettings): Promise<SettingsResult<void>> {
         try {
+            // Validate input
+            validateUserId(settings.userId);
+
             const storageKey = createUserKey(StorageKey.USER_PREFERENCES, settings.userId);
             const result = await storageRepository.setItem(storageKey, settings);
 
@@ -78,6 +101,9 @@ export class SettingsRepository implements ISettingsRepository {
 
     async deleteSettings(userId: string): Promise<SettingsResult<void>> {
         try {
+            // Validate input
+            validateUserId(userId);
+
             const storageKey = createUserKey(StorageKey.USER_PREFERENCES, userId);
             const result = await storageRepository.removeItem(storageKey);
 

package/src/presentation/components/SettingsErrorBoundary.tsx

@@ -24,35 +24,47 @@ interface State {
 export class SettingsErrorBoundary extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
-    this.state = { hasError: false };
+    // Initialize state using unknown to avoid type assertion issues
+    (this as unknown as { state: State }).state = { hasError: false };
   }
 
   static getDerivedStateFromError(error: Error): State {
     return { hasError: true, error };
   }
 
-  override componentDidCatch(_error: Error, _errorInfo: React.ErrorInfo) {
-    // Silent error handling - error already captured in state
-    void _error;
-    void _errorInfo;
+  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);
+    }
   }
 
-  override render() {
-    if (this.state.hasError) {
-      if (this.props.fallback) {
-        return this.props.fallback;
+  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;
+
+    if (hasError) {
+      if (fallback) {
+        return fallback;
       }
 
       return (
         <ErrorBoundaryFallback
-          error={this.state.error}
-          fallbackTitle={this.props.fallbackTitle}
-          fallbackMessage={this.props.fallbackMessage}
+          error={error}
+          fallbackTitle={fallbackTitle}
+          fallbackMessage={fallbackMessage}
         />
       );
     }
 
-    return this.props.children;
+    return children;
   }
 }
 

package/src/presentation/components/SettingsSection.tsx

@@ -7,7 +7,7 @@ export interface SettingsSectionProps {
   children: React.ReactNode;
 }
 
-export const SettingsSection: React.FC<SettingsSectionProps> = ({
+export const SettingsSection: React.FC<SettingsSectionProps> = React.memo(({
   title,
   children,
 }) => {
@@ -23,7 +23,9 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
       {children}
     </View>
   );
-};
+});
+
+SettingsSection.displayName = "SettingsSection";
 
 const styles = StyleSheet.create({
   container: {

package/src/presentation/hooks/mutations/useSettingsMutations.ts

@@ -15,13 +15,22 @@ export const useUpdateSettingsMutation = (userId: string) => {
 
     return useMutation({
         mutationFn: async (updates: Partial<UserSettings>) => {
-            const currentResult = await settingsService.getSettings(userId);
-            if (!currentResult.success || !currentResult.data) {
-                throw new Error('Could not find existing settings to update');
-            }
+            // Use optimistic updates to prevent race conditions
+            // Get current data from query cache first
+            const cacheKey = [...SETTINGS_QUERY_KEY, userId];
+            const cachedData = queryClient.getQueryData<UserSettings>(cacheKey);
+
+            const baseSettings = cachedData
+                ? { ...cachedData }
+                : await settingsService.getSettings(userId).then(result => {
+                    if (!result.success || !result.data) {
+                        throw new Error('Could not find existing settings to update');
+                    }
+                    return result.data;
+                });
 
             const updatedSettings = {
-                ...currentResult.data,
+                ...baseSettings,
                 ...updates,
                 updatedAt: new Date(),
             };

package/src/presentation/hooks/useSettingsScreenConfig.ts

@@ -129,11 +129,17 @@ export const useSettingsScreenConfig = (
 
   const userProfile = useMemo((): UserProfileDisplay => {
     const isAnonymous = userProfileData?.isAnonymous ?? true;
+
+    // Ensure t function is available before using it
+    const anonymousName = typeof t === 'function'
+      ? t("settings.profile.anonymousName")
+      : 'Anonymous';
+
     return {
-      displayName: userProfileData?.displayName || t("settings.profile.anonymousName"),
-      userId: userProfileData?.userId,
+      displayName: userProfileData?.displayName || anonymousName,
+      userId: userProfileData?.userId ?? null,
       isAnonymous,
-      avatarUrl: userProfileData?.avatarUrl,
+      avatarUrl: userProfileData?.avatarUrl ?? null,
       onPress: isAnonymous ? handleSignIn : undefined,
       accountSettingsRoute: isAnonymous ? undefined : "Account",
     };
@@ -141,32 +147,37 @@ export const useSettingsScreenConfig = (
 
   const accountConfig = useMemo((): AccountScreenConfig => {
     const isAnonymous = user?.isAnonymous ?? true;
+
+    // Ensure t function is available before using it
+    const getTranslation = (key: string, fallback: string) =>
+      typeof t === 'function' ? t(key) : fallback;
+
     return {
       profile: {
-        displayName: userProfileData?.displayName || user?.displayName || t("settings.profile.anonymousName"),
-        userId: userProfileData?.userId || user?.uid,
+        displayName: userProfileData?.displayName || user?.displayName || getTranslation("settings.profile.anonymousName", "Anonymous"),
+        userId: userProfileData?.userId ?? user?.uid ?? null,
         isAnonymous,
-        avatarUrl: userProfileData?.avatarUrl || user?.photoURL || undefined,
+        avatarUrl: userProfileData?.avatarUrl ?? user?.photoURL ?? undefined,
         benefits: isAnonymous ? [
-          t("settings.profile.benefits.saveHistory"),
-          t("settings.profile.benefits.syncDevices"),
-          t("settings.profile.benefits.cloudSync"),
-          t("settings.profile.benefits.secureBackup"),
+          getTranslation("settings.profile.benefits.saveHistory", "Save history"),
+          getTranslation("settings.profile.benefits.syncDevices", "Sync devices"),
+          getTranslation("settings.profile.benefits.cloudSync", "Cloud sync"),
+          getTranslation("settings.profile.benefits.secureBackup", "Secure backup"),
         ] : undefined,
       },
       isAnonymous,
-      editProfileText: t("settings.account.editProfile"),
+      editProfileText: getTranslation("settings.account.editProfile", "Edit Profile"),
       onSignIn: handleSignIn,
       accountActions: {
         onLogout: handleSignOut,
         onDeleteAccount: handleDeleteAccount,
-        logoutText: t("settings.account.logout"),
-        logoutConfirmTitle: t("settings.account.logoutConfirmTitle"),
-        logoutConfirmMessage: t("settings.account.logoutConfirmMessage"),
-        cancelText: t("common.cancel"),
-        deleteAccountText: t("settings.account.deleteAccount"),
-        deleteConfirmTitle: t("settings.account.deleteConfirmTitle"),
-        deleteConfirmMessage: t("settings.account.deleteConfirmMessage"),
+        logoutText: getTranslation("settings.account.logout", "Log Out"),
+        logoutConfirmTitle: getTranslation("settings.account.logoutConfirmTitle", "Log Out"),
+        logoutConfirmMessage: getTranslation("settings.account.logoutConfirmMessage", "Are you sure you want to log out?"),
+        cancelText: getTranslation("common.cancel", "Cancel"),
+        deleteAccountText: getTranslation("settings.account.deleteAccount", "Delete Account"),
+        deleteConfirmTitle: getTranslation("settings.account.deleteConfirmTitle", "Delete Account"),
+        deleteConfirmMessage: getTranslation("settings.account.deleteConfirmMessage", "Are you sure you want to delete your account? This action cannot be undone."),
       },
     };
   }, [user, userProfileData, handleSignIn, handleSignOut, handleDeleteAccount, t]);

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -23,7 +23,7 @@ import {
   createQuietHoursTranslations,
   createLegalScreenProps,
 } from "./utils";
-import type { SettingsStackParamList, SettingsStackNavigatorProps } from "./types";
+import type { SettingsStackParamList, SettingsStackNavigatorProps, AdditionalScreen } from "./types";
 import { GamificationScreenWrapper } from "../../domains/gamification";
 
 export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
@@ -74,7 +74,7 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
   );
 
   const screens = React.useMemo(() => {
-    const list: StackScreen[] = [
+    const baseScreens: StackScreen[] = [
       {
         name: "SettingsMain",
         options: { headerShown: false },
@@ -119,41 +119,56 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
       },
     ];
 
-    if (faqData && faqData.categories.length > 0) {
-      list.push({
-        name: "FAQ",
-        options: { headerTitle: t("settings.faqs.title") },
-        children: () => (
-          <FAQScreen
-            categories={faqData.categories}
-            searchPlaceholder={t("settings.faqs.searchPlaceholder")}
-            emptySearchTitle={t("settings.faqs.emptySearchTitle")}
-            emptySearchMessage={t("settings.faqs.emptySearchMessage")}
-            headerTitle={t("settings.faqs.headerTitle")}
-          />
-        ),
-      });
-    }
+    // FAQ screen - conditionally add
+    const faqScreen: StackScreen | null = (faqData && faqData.categories.length > 0)
+      ? {
+          name: "FAQ",
+          options: { headerTitle: t("settings.faqs.title") },
+          children: () => (
+            <FAQScreen
+              categories={faqData.categories}
+              searchPlaceholder={t("settings.faqs.searchPlaceholder")}
+              emptySearchTitle={t("settings.faqs.emptySearchTitle")}
+              emptySearchMessage={t("settings.faqs.emptySearchMessage")}
+              headerTitle={t("settings.faqs.headerTitle")}
+            />
+          ),
+        }
+      : null;
 
-    // Add additional screens
-    additionalScreens.forEach((screen) => {
-      list.push({
+    // Additional screens - map to StackScreen format
+    const additionalStackScreens: StackScreen[] = (additionalScreens as readonly AdditionalScreen[]).map((screen: AdditionalScreen): StackScreen => {
+      // Create base screen object
+      const stackScreen: Record<string, unknown> = {
         name: screen.name,
-        component: screen.component as StackScreen['component'],
-        children: screen.children as StackScreen['children'],
-        options: screen.options as StackScreen['options'],
-      });
+      };
+
+      // Conditionally add properties
+      if (screen.component) {
+        stackScreen.component = screen.component;
+      }
+      if (screen.children) {
+        stackScreen.children = screen.children;
+      }
+      if (screen.options) {
+        stackScreen.options = screen.options;
+      }
+
+      // Type assertion to StackScreen
+      return stackScreen as unknown as StackScreen;
     });
 
-    if (gamificationConfig?.enabled) {
-      list.push({
-        name: "Gamification",
-        options: { headerTitle: t("settings.gamification.title") },
-        children: () => <GamificationScreenWrapper config={gamificationConfig} />,
-      });
-    }
+    // Gamification screen - conditionally add
+    const gamificationScreen: StackScreen | null = gamificationConfig?.enabled
+      ? {
+          name: "Gamification",
+          options: { headerTitle: t("settings.gamification.title") },
+          children: () => <GamificationScreenWrapper config={gamificationConfig} />,
+        }
+      : null;
 
-    list.push({
+    // Language selection screen
+    const languageScreen: StackScreen = {
       name: "LanguageSelection",
       options: { headerShown: false },
       children: () => (
@@ -162,17 +177,26 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
           searchPlaceholder={t("settings.languageSelection.searchPlaceholder")}
         />
       ),
-    });
+    };
 
-    if (accountConfig) {
-      list.push({
-        name: "Account",
-        options: { headerTitle: t("settings.account.title") },
-        children: () => <AccountScreen config={accountConfig} />,
-      });
-    }
+    // Account screen - conditionally add
+    const accountScreen: StackScreen | null = accountConfig
+      ? {
+          name: "Account",
+          options: { headerTitle: t("settings.account.title") },
+          children: () => <AccountScreen config={accountConfig} />,
+        }
+      : null;
 
-    return list;
+    // Compose final list using spread operator (immutable)
+    return [
+      ...baseScreens,
+      ...(faqScreen ? [faqScreen] : []),
+      ...additionalStackScreens,
+      ...(gamificationScreen ? [gamificationScreen] : []),
+      languageScreen,
+      ...(accountScreen ? [accountScreen] : []),
+    ];
   }, [
     t,
     showHeader,

package/src/presentation/navigation/types.ts

@@ -2,6 +2,7 @@
  * Settings Navigation Types
  */
 
+import type React from 'react';
 import type { SettingsConfig, CustomSettingsSection } from "../screens/types";
 import type { DevSettingsProps } from "../../domains/dev";
 import type { FAQCategory } from "../../domains/faqs";

package/src/presentation/screens/SettingsScreen.tsx

@@ -17,6 +17,7 @@ import type { SettingsConfig, CustomSettingsSection } from "./types";
 import type { DevSettingsProps } from "../../domains/dev";
 
 export interface SettingsScreenProps {
+  children?: React.ReactNode;
   config?: SettingsConfig;
   /** Show user profile header */
   showUserProfile?: boolean;
@@ -56,6 +57,7 @@ export interface SettingsScreenProps {
 }
 
 export const SettingsScreen: React.FC<SettingsScreenProps> = ({
+  children,
   config = {},
   showUserProfile,
   userProfile,
@@ -72,17 +74,46 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
 }) => {
   const navigation = useAppNavigation();
 
-  const normalizedConfig = normalizeSettingsConfig(config);
-  const features = useFeatureDetection(normalizedConfig, navigation, featureOptions);
+  // Memoize config normalization to prevent unnecessary recalculations
+  const normalizedConfig = React.useMemo(
+    () => normalizeSettingsConfig(config),
+    [config]
+  );
+
+  // Memoize feature detection to prevent unnecessary recalculations
+  const features = React.useMemo(
+    () => useFeatureDetection(normalizedConfig, navigation, featureOptions),
+    [normalizedConfig, navigation, featureOptions]
+  );
 
   // Determine if user profile should be shown (explicit prop takes priority, then config)
   const shouldShowUserProfile = showUserProfile ?? features.userProfile;
 
-  return (
-    <ScreenLayout
-      header={showHeader ? <SettingsHeader showCloseButton={showCloseButton} onClose={onClose} /> : undefined}
-    >
+  // Workaround: Use conditional rendering with type assertion
+  if (showHeader) {
+    return <ScreenLayout header={<SettingsHeader showCloseButton={showCloseButton} onClose={onClose} />}>
       <SettingsErrorBoundary>
+        {children ?? (
+          <SettingsContent
+            normalizedConfig={normalizedConfig}
+            features={features}
+            showUserProfile={shouldShowUserProfile}
+            userProfile={userProfile}
+            showFooter={showFooter}
+            footerText={footerText}
+            appVersion={appVersion}
+            customSections={customSections}
+            devSettings={devSettings}
+            gamificationConfig={gamificationConfig}
+          />
+        )}
+      </SettingsErrorBoundary>
+    </ScreenLayout>;
+  }
+
+  return <ScreenLayout>
+    <SettingsErrorBoundary>
+      {children ?? (
         <SettingsContent
           normalizedConfig={normalizedConfig}
           features={features}
@@ -95,7 +126,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
           devSettings={devSettings}
           gamificationConfig={gamificationConfig}
         />
-      </SettingsErrorBoundary>
-    </ScreenLayout>
-  );
+      )}
+    </SettingsErrorBoundary>
+  </ScreenLayout>;
 };

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

@@ -12,7 +12,7 @@ export const CustomSettingsList: React.FC<CustomSettingsListProps> = ({
 }) => {
     const sortedSections = useMemo(() => {
         return Array.from(customSections)
-            .sort((a, b) => (a.order ?? 999) - (b.order ?? 999));
+            .sort((a: CustomSettingsSection, b: CustomSettingsSection) => (a.order ?? 999) - (b.order ?? 999));
     }, [customSections]);
 
     if (!sortedSections.length) return null;
@@ -25,9 +25,9 @@ export const CustomSettingsList: React.FC<CustomSettingsListProps> = ({
                     title={section.title}
                 >
                     {section.content}
-                    {!section.content && section.items?.map((item) => (
+                    {!section.content && section.items && section.items.length > 0 && section.items.map((item) => (
                         <SettingsItemCard
-                            key={item.id}
+                            key={item.id || `item-${index}`}
                             title={item.title}
                             description={item.subtitle}
                             icon={item.icon}