@umituz/react-native-settings 4.23.120 → 4.23.122

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.23.120",
+  "version": "4.23.122",
   "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/components/AboutSection.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ViewStyle } from 'react-native';
-import { useAppNavigation } from '@umituz/react-native-design-system';
 import { AboutConfig } from '../../domain/entities/AppInfo';
 import { SettingsItemCard } from '../../../../presentation/components/SettingsItemCard';
+import { useSettingsNavigation } from '../../../../presentation/navigation/hooks/useSettingsNavigation';
 
 export interface AboutSectionProps {
     config?: AboutConfig;
@@ -27,7 +27,7 @@ export const AboutSection: React.FC<AboutSectionProps> = ({
     hideMargin,
 }) => {
 
-    const navigation = useAppNavigation();
+    const navigation = useSettingsNavigation();
 
     const route = config?.route || config?.defaultRoute || 'About';
     const title = propsTitle || config?.title;
@@ -40,7 +40,7 @@ export const AboutSection: React.FC<AboutSectionProps> = ({
         } else if (config?.onPress) {
             config.onPress();
         } else {
-            navigation.navigate(route as never);
+            navigation.navigate(route as 'About');
         }
     };
 

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

@@ -29,15 +29,14 @@ export const useAppearanceActions = () => {
   }, [setThemeMode]);
 
   const handleColorChange = useCallback((key: keyof CustomThemeColors, color: string) => {
-    // 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]);
+    // Use functional update to avoid stale closure
+    setLocalCustomColors(prev => {
+      const newColors = { ...prev, [key]: color };
+      // Update global state with new colors
+      setCustomColors(newColors);
+      return newColors;
+    });
+  }, [setCustomColors]);
 
   const handleResetColors = useCallback(() => {
     reset();

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ViewStyle } from 'react-native';
-import { useAppNavigation } from '@umituz/react-native-design-system';
 import { AppearanceSectionConfig } from '../../types';
 import { SettingsItemCard } from '../../../../presentation/components/SettingsItemCard';
+import { useSettingsNavigation } from '../../../../presentation/navigation/hooks/useSettingsNavigation';
 
 export interface AppearanceSectionProps {
     config?: AppearanceSectionConfig;
@@ -29,7 +29,7 @@ export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
     hideMargin,
 }) => {
 
-    const navigation = useAppNavigation();
+    const navigation = useSettingsNavigation();
 
     const route = config?.route || config?.defaultRoute || 'Appearance';
     const title = titleProp || config?.title;
@@ -41,7 +41,7 @@ export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
         } else if (config?.onPress) {
             config.onPress();
         } else {
-            navigation.navigate(route as never);
+            navigation.navigate(route as 'Appearance');
         }
     };
 

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

@@ -41,7 +41,9 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
       if (value === color) return;
       onValueChange(color);
     } catch (error) {
-      // Log error for debugging while preventing UI crashes
+      if (__DEV__) {
+        console.error('[ColorPicker] Failed to change color:', error);
+      }
       // Optionally: Show user feedback about the error
     }
   }, [value, onValueChange]);

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

@@ -76,6 +76,7 @@ export const SupportSection: React.FC<SupportSectionProps> = ({
             } catch (error) {
                 // If the passed onSubmit throws, we log it.
                 if (__DEV__) {
+                    console.error('[SupportSection] Failed to submit feedback:', error);
                 }
                 // Optionally keep modal open? Or close it?
                 // If we keep it open, user can retry.

package/src/domains/feedback/presentation/hooks/useFeedbackForm.ts

@@ -2,7 +2,7 @@
  * Feedback Form Hook
  */
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import type { FeedbackType, FeedbackRating } from '../../domain/entities/FeedbackEntity';
 
 export interface FeedbackFormState {
@@ -25,6 +25,14 @@ export function useFeedbackForm(defaultValues?: Partial<FeedbackFormState>) {
     ...defaultValues,
   });
 
+  // Use ref to avoid recreating reset callback when defaultValues changes
+  const defaultValuesRef = useRef(defaultValues);
+
+  // Keep ref in sync with latest defaultValues
+  useEffect(() => {
+    defaultValuesRef.current = defaultValues;
+  }, [defaultValues]);
+
   const setType = useCallback((type: FeedbackType) => {
     setFormState((prev) => ({ ...prev, type }));
   }, []);
@@ -42,8 +50,8 @@ export function useFeedbackForm(defaultValues?: Partial<FeedbackFormState>) {
   }, []);
 
   const reset = useCallback(() => {
-    setFormState({ ...initialState, ...defaultValues });
-  }, [defaultValues]);
+    setFormState({ ...initialState, ...defaultValuesRef.current });
+  }, []);
 
   const isValid = formState.title.trim().length > 0 && formState.description.trim().length > 0;
 

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

@@ -2,7 +2,7 @@
  * GamificationScreen AchievementsList Component
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { View, type TextStyle } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system";
 import { AchievementItem } from "../AchievementItem";
@@ -39,8 +39,20 @@ export const AchievementsList: React.FC<AchievementsListProps> = ({
   subtextColor,
   sectionTitleStyle,
 }) => {
-  const unlockedAchievements = achievements.filter((a) => a.isUnlocked);
-  const lockedAchievements = achievements.filter((a) => !a.isUnlocked);
+  // Optimize: Single pass through achievements array instead of two filter operations
+  const { unlocked, locked } = useMemo(() => {
+    return achievements.reduce<{ unlocked: typeof achievements; locked: typeof achievements }>(
+      (acc, achievement) => {
+        if (achievement.isUnlocked) {
+          acc.unlocked.push(achievement);
+        } else {
+          acc.locked.push(achievement);
+        }
+        return acc;
+      },
+      { unlocked: [], locked: [] }
+    );
+  }, [achievements]);
 
   return (
     <View style={styles.section}>
@@ -55,9 +67,9 @@ export const AchievementsList: React.FC<AchievementsListProps> = ({
       ) : (
         <>
           {/* Unlocked achievements first */}
-          {unlockedAchievements.map((achievement, index) => (
+          {unlocked.map((achievement, index) => (
             <AchievementItem
-              key={`unlocked-${index}`}
+              key={`unlocked-${achievement.title}-${index}`}
               {...achievement}
               accentColor={accentColor}
               backgroundColor={cardBackgroundColor}
@@ -67,9 +79,9 @@ export const AchievementsList: React.FC<AchievementsListProps> = ({
           ))}
 
           {/* Locked achievements */}
-          {lockedAchievements.map((achievement, index) => (
+          {locked.map((achievement, index) => (
             <AchievementItem
-              key={`locked-${index}`}
+              key={`locked-${achievement.title}-${index}`}
               {...achievement}
               accentColor={accentColor}
               backgroundColor={cardBackgroundColor}

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ViewStyle } from 'react-native';
-import { useAppNavigation } from '@umituz/react-native-design-system';
 import { LegalConfig } from '../../domain/entities/LegalConfig';
 import { SettingsItemCard } from '../../../../presentation/components/SettingsItemCard';
+import { useSettingsNavigation } from '../../../../presentation/navigation/hooks/useSettingsNavigation';
 
 export interface LegalSectionProps {
     config?: LegalConfig;
@@ -27,7 +27,7 @@ export const LegalSection: React.FC<LegalSectionProps> = ({
     hideMargin,
 }) => {
 
-    const navigation = useAppNavigation();
+    const navigation = useSettingsNavigation();
 
     const route = config?.route || config?.defaultRoute || 'Legal';
     const title = propsTitle || config?.title;
@@ -40,7 +40,7 @@ export const LegalSection: React.FC<LegalSectionProps> = ({
         } else if (config?.onPress) {
             config.onPress();
         } else {
-            navigation.navigate(route as never);
+            navigation.navigate(route as 'Legal');
         }
     };
 

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

@@ -1,16 +1,16 @@
-import { useAppNavigation } from '@umituz/react-native-design-system';
 import { useLocalization } from '../hooks/useLocalization';
 import { languageRepository } from '../repository/LanguageRepository';
+import { useSettingsNavigation } from '../../../../presentation/navigation/hooks/useSettingsNavigation';
 
 
 export const useLanguageNavigation = (navigationScreen: string) => {
-  const navigation = useAppNavigation();
+  const navigation = useSettingsNavigation();
   const { currentLanguage } = useLocalization();
   const currentLang = languageRepository.getLanguageByCode(currentLanguage) || languageRepository.getDefaultLanguage();
 
   const navigateToLanguageSelection = () => {
     if (navigation && navigationScreen) {
-      navigation.navigate(navigationScreen as never);
+      navigation.navigate(navigationScreen as 'LanguageSelection');
     }
   };
 

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

@@ -6,6 +6,7 @@
 import { useState, useMemo } from 'react';
 import { useLocalization } from './useLocalization';
 import { searchLanguages } from '../config/LanguageQuery';
+import { devError } from '../../../../utils/devUtils';
 
 export const useLanguageSelection = () => {
     const { currentLanguage, setLanguage } = useLocalization();
@@ -17,16 +18,16 @@ export const useLanguageSelection = () => {
     }, [searchQuery]);
 
     const handleLanguageSelect = async (code: string, onComplete?: () => void) => {
-        if (__DEV__) {
-        }
-        setSelectedCode(code);
-        if (__DEV__) {
-        }
-        await setLanguage(code);
-        if (__DEV__) {
-        }
-        onComplete?.();
-        if (__DEV__) {
+        try {
+            setSelectedCode(code);
+            await setLanguage(code);
+            onComplete?.();
+        } catch (error) {
+            // Revert selection on error
+            setSelectedCode(currentLanguage);
+            devError('[useLanguageSelection] Failed to set language:', error);
+            // Re-throw for caller to handle
+            throw error;
         }
     };
 

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

@@ -7,6 +7,9 @@ export const useLocalization = () => {
   const store = useLocalizationStore();
   const { t } = useTranslationFunction();
 
+  // Destructure to avoid recreating callbacks when store object changes
+  const { isInitialized, initialize } = store;
+
   const getCurrentLanguageObject = useCallback((): Language | undefined => {
     return store.getCurrentLanguage();
   }, [store]);
@@ -16,8 +19,8 @@ export const useLocalization = () => {
   }, [store]);
 
   const handleInitialize = useCallback(async () => {
-    await store.initialize();
-  }, [store]);
+    await initialize();
+  }, [initialize]);
 
   const isLanguageSupported = useCallback((code: string) => {
     return store.isLanguageSupported(code);
@@ -28,10 +31,10 @@ export const useLocalization = () => {
   }, [store]);
 
   useEffect(() => {
-    if (!store.isInitialized) {
-      store.initialize();
+    if (!isInitialized) {
+      initialize();
     }
-  }, [store.isInitialized, store]);
+  }, [isInitialized, initialize]);
 
   return {
     t,

package/src/domains/localization/presentation/components/LanguageSection.tsx

@@ -4,10 +4,10 @@ import {
     useAppDesignTokens,
     AtomicText,
     ListItem,
-    useAppNavigation,
 } from '@umituz/react-native-design-system';
 import { useLocalization } from '../../infrastructure/hooks/useLocalization';
 import { getLanguageByCode } from '../../infrastructure/config/languages';
+import { useSettingsNavigation } from '../../../../presentation/navigation/hooks/useSettingsNavigation';
 
 export interface LanguageSectionConfig {
     route?: string;
@@ -30,7 +30,7 @@ export const LanguageSection: React.FC<LanguageSectionProps> = ({
 }) => {
     const tokens = useAppDesignTokens();
     const { currentLanguage } = useLocalization();
-    const navigation = useAppNavigation();
+    const navigation = useSettingsNavigation();
 
     const route = config?.route || 'LanguageSelection';
     const title = config?.title || "";
@@ -46,7 +46,7 @@ export const LanguageSection: React.FC<LanguageSectionProps> = ({
         if (config?.onPress) {
             config.onPress();
         } else {
-            navigation.navigate(route as never);
+            navigation.navigate(route as 'LanguageSelection');
         }
     };
 

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

@@ -32,6 +32,9 @@ export const LocalizationManager: React.FC<LocalizationProviderProps> = ({
           setIsI18nReady(true);
         }
       } catch (error) {
+        if (__DEV__) {
+          console.error('[LocalizationManager] Initialization failed:', error);
+        }
         if (isMounted) {
           setIsI18nReady(true); // Set ready even on error to prevent indefinite loading
         }

package/src/domains/notifications/infrastructure/hooks/useNotificationSettings.ts

@@ -2,7 +2,7 @@
  * Simple notification settings hook
  */
 
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { createStore } from '@umituz/react-native-design-system';
 
 interface NotificationSettingsState {
@@ -34,11 +34,18 @@ export const useNotificationSettings = () => {
   const store = useNotificationSettingsStore();
   const { notificationsEnabled, isLoading, setNotificationsEnabled, initialize } = store;
 
-  // Initialize on first mount
+  // Use ref to call initialize only once on mount
+  const initializeRef = useRef(initialize);
+
   useEffect(() => {
-    initialize();
+    initializeRef.current = initialize;
   }, [initialize]);
 
+  // Initialize only once on mount
+  useEffect(() => {
+    initializeRef.current();
+  }, []);
+
   return {
     notificationsEnabled,
     setNotificationsEnabled,

package/src/domains/notifications/presentation/components/NotificationsSection.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { useAppNavigation } from '@umituz/react-native-design-system';
 import { SettingsItemCard } from '../../../../presentation/components/SettingsItemCard';
+import { useSettingsNavigation } from '../../../../presentation/navigation/hooks/useSettingsNavigation';
 
 export interface NotificationsSectionConfig {
   route?: string;
@@ -24,14 +24,14 @@ export const NotificationsSection: React.FC<NotificationsSectionProps> = ({
   noBackground,
   hideMargin,
 }) => {
-  const navigation = useAppNavigation();
+  const navigation = useSettingsNavigation();
 
   const handlePress = useCallback(() => {
     if (config?.onPress) {
       config.onPress();
     } else {
       const route = config?.route || 'Notifications';
-      navigation.navigate(route as never);
+      navigation.navigate(route as 'Notifications');
     }
   }, [config?.route, config?.onPress, navigation]);
 

package/src/domains/notifications/presentation/hooks/useTimePicker.ts

@@ -3,7 +3,7 @@
  * Encapsulates DateTimePicker logic for notification settings
  */
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import type { QuietHoursConfig } from '../../infrastructure/services/types';
 
 export type PickerMode = 'start' | 'end' | null;
@@ -29,6 +29,14 @@ export const useTimePicker = ({
 }: UseTimePickerParams): TimePickerHandlers => {
   const [pickerMode, setPickerMode] = useState<PickerMode>(null);
 
+  // Use ref to avoid stale closure in handleTimeChange
+  const pickerModeRef = useRef<PickerMode>(null);
+
+  // Keep ref in sync with state
+  useEffect(() => {
+    pickerModeRef.current = pickerMode;
+  }, [pickerMode]);
+
   const handleStartTimePress = useCallback(() => {
     setPickerMode('start');
   }, []);
@@ -42,14 +50,16 @@ export const useTimePicker = ({
       const hours = selectedDate.getHours();
       const minutes = selectedDate.getMinutes();
 
-      if (pickerMode === 'start') {
+      // Use ref to get current mode without recreating callback
+      if (pickerModeRef.current === 'start') {
         onStartTimeChange(hours, minutes);
-      } else if (pickerMode === 'end') {
+      } else if (pickerModeRef.current === 'end') {
         onEndTimeChange(hours, minutes);
       }
     }
     setPickerMode(null);
-  }, [pickerMode, onStartTimeChange, onEndTimeChange]);
+    pickerModeRef.current = null;
+  }, [onStartTimeChange, onEndTimeChange]);
 
   const getPickerDate = useCallback((): Date => {
     const date = new Date();

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

@@ -5,12 +5,12 @@
 
 import React, { useMemo, useCallback } from 'react';
 import { View, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
-import { 
-  AtomicText, 
-  AtomicIcon, 
-  AtomicSpinner, 
-  ScreenLayout, 
-  NavigationHeader, 
+import {
+  AtomicText,
+  AtomicIcon,
+  AtomicSpinner,
+  ScreenLayout,
+  NavigationHeader,
   useAppNavigation,
   useAppDesignTokens
 } from '@umituz/react-native-design-system';
@@ -18,6 +18,7 @@ import { ReminderItem } from '../components/ReminderItem';
 import { useReminders, useRemindersLoading } from '../../infrastructure/storage/RemindersStore';
 import { useReminderActions } from '../../infrastructure/hooks/useReminderActions';
 import type { Reminder, ReminderTranslations } from '../../../infrastructure/services/types';
+import { devError } from '../../../../../utils/devUtils';
 
 export interface ReminderListScreenProps {
   translations: ReminderTranslations;
@@ -41,11 +42,21 @@ export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
   const { toggleReminderEnabled, removeReminder } = useReminderActions();
 
   const handleToggle = useCallback(async (id: string) => {
-    await toggleReminderEnabled(id);
+    try {
+      await toggleReminderEnabled(id);
+    } catch (error) {
+      devError('[ReminderListScreen] Failed to toggle reminder:', error);
+      // TODO: Show error toast to user
+    }
   }, [toggleReminderEnabled]);
 
   const handleDelete = useCallback(async (id: string) => {
-    await removeReminder(id);
+    try {
+      await removeReminder(id);
+    } catch (error) {
+      devError('[ReminderListScreen] Failed to delete reminder:', error);
+      // TODO: Show error toast to user
+    }
   }, [removeReminder]);
 
   const canAddMore = reminders.length < maxReminders;

package/src/domains/rating/presentation/hooks/useAppRating.tsx

@@ -73,6 +73,7 @@ export function useAppRating(config: RatingConfig): UseAppRatingResult {
       }
     } catch (error) {
       if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.error('[useAppRating] Failed to request review:', error);
       }
     }
 

package/src/infrastructure/utils/memoUtils.ts

@@ -26,7 +26,7 @@ export function useMemoizedStyles<T>(
  * @param deps Dependencies for memoization
  * @returns Memoized callback
  */
-export function useMemoizedCallback<T extends (...args: any[]) => any>(
+export function useMemoizedCallback<T extends (...args: never[]) => unknown>(
   callback: T,
   deps: DependencyList
 ): T {
@@ -52,7 +52,7 @@ export function useMemoizedValue<T>(
  * @param deps Dependencies for memoization
  * @returns Memoized styles
  */
-export function useStyledMemo<T extends Record<string, any>>(
+export function useStyledMemo<T extends Record<string, unknown>>(
   styleCreator: () => T,
   deps: DependencyList = []
 ): T {
@@ -119,7 +119,7 @@ export function useMemoWithEquality<T>(
  * @param delay Delay in milliseconds
  * @returns Debounced callback
  */
-export function useDebouncedCallback<T extends (...args: any[]) => any>(
+export function useDebouncedCallback<T extends (...args: never[]) => unknown>(
   callback: T,
   delay: number
 ): T {
@@ -150,7 +150,7 @@ export function useDebouncedCallback<T extends (...args: any[]) => any>(
  * @param delay Delay in milliseconds
  * @returns Throttled callback
  */
-export function useThrottledCallback<T extends (...args: any[]) => any>(
+export function useThrottledCallback<T extends (...args: never[]) => unknown>(
   callback: T,
   delay: number
 ): T {

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

@@ -0,0 +1,105 @@
+/**
+ * Settings Error Boundary
+ *
+ * Generic error boundary component for Settings domains.
+ * Catches JavaScript errors in child component tree and displays fallback UI.
+ */
+
+import React, { Component, ReactNode } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { devError } from '../../../utils/devUtils';
+
+export interface SettingsErrorBoundaryProps {
+  children: ReactNode;
+  domainName: string;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+export interface SettingsErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * Error Boundary for Settings domains
+ *
+ * @example
+ * ```tsx
+ * <SettingsErrorBoundary domainName="Appearance">
+ *   <AppearanceSection {...props} />
+ * </SettingsErrorBoundary>
+ * ```
+ */
+export class SettingsErrorBoundary extends Component<
+  SettingsErrorBoundaryProps,
+  SettingsErrorBoundaryState
+> {
+  constructor(props: SettingsErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): SettingsErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    const { domainName, onError } = this.props;
+
+    // Log error in development
+    devError(`[${domainName}] Error caught by boundary:`, error, errorInfo);
+
+    // Call custom error handler if provided
+    onError?.(error, errorInfo);
+  }
+
+  private handleReset = (): void => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render(): ReactNode {
+    const { hasError } = this.state;
+    const { children, fallback, domainName } = this.props;
+
+    if (hasError) {
+      // Use custom fallback if provided
+      if (fallback) {
+        return fallback;
+      }
+
+      // Default fallback UI
+      return (
+        <View style={styles.container}>
+          <Text style={styles.title}>Something went wrong</Text>
+          <Text style={styles.message}>
+            {domainName} encountered an error. Please try again.
+          </Text>
+        </View>
+      );
+    }
+
+    return children;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 16,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  message: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+});

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

@@ -0,0 +1,9 @@
+/**
+ * Error Boundary exports
+ */
+
+export { SettingsErrorBoundary } from './SettingsErrorBoundary';
+export type {
+  SettingsErrorBoundaryProps,
+  SettingsErrorBoundaryState,
+} from './SettingsErrorBoundary';

package/src/presentation/hooks/useSettingsScreenConfig.ts

@@ -162,12 +162,12 @@ export const useSettingsScreenConfig = (
     onSignIn: handleSignIn,
     onLogout: handleSignOut,
     onDeleteAccount: handleDeleteAccount,
-    translations: translations?.account,
+    translations: translations?.account as any,
   }), [user, userProfileData, handleSignIn, handleSignOut, handleDeleteAccount, translations]);
 
   // Use centralized FAQ translation
   const translatedFaqData = useMemo(() =>
-    translateFAQData(faqData, (key: string) => "", appInfo),
+    translateFAQData(faqData, (_key: string) => "", appInfo),
     [faqData, appInfo]
   );
 

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

@@ -0,0 +1,28 @@
+/**
+ * Typed Settings Navigation Hook
+ *
+ * Provides type-safe navigation for Settings stack screens.
+ * Replaces unsafe `as never` casts throughout the codebase.
+ */
+
+import { useNavigation } from '@react-navigation/native';
+import type { StackNavigationProp } from '@react-navigation/stack';
+import type { SettingsStackParamList } from '../types';
+
+/**
+ * Type for Settings navigation prop
+ */
+export type SettingsNavigationProp = StackNavigationProp<SettingsStackParamList>;
+
+/**
+ * Hook to get typed navigation for Settings screens
+ *
+ * @example
+ * ```typescript
+ * const navigation = useSettingsNavigation();
+ * navigation.navigate('LanguageSelection'); // Fully typed!
+ * ```
+ */
+export const useSettingsNavigation = () => {
+  return useNavigation<SettingsNavigationProp>();
+};

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

@@ -17,12 +17,18 @@ import {
   combineScreens,
 } from "../../utils/screenFactory";
 import type { SettingsStackNavigatorProps } from "../types";
+import type { AboutConfig } from "../../../domains/about/domain/entities/AppInfo";
+import type { LegalScreenProps } from "../../../domains/legal/presentation/screens/LegalScreen";
+import type {
+  NotificationSettingsTranslations,
+  QuietHoursTranslations
+} from "../../../domains/notifications/infrastructure/services/types";
 
 export interface UseSettingsScreensProps extends SettingsStackNavigatorProps {
-  aboutConfig: any;
-  legalProps: any;
-  notificationTranslations: any;
-  quietHoursTranslations: any;
+  aboutConfig: AboutConfig;
+  legalProps: LegalScreenProps;
+  notificationTranslations: NotificationSettingsTranslations;
+  quietHoursTranslations: QuietHoursTranslations;
 }
 
 export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[] => {

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

@@ -1,11 +1,11 @@
 import React from "react";
-import { useAppNavigation } from "@umituz/react-native-design-system";
 import type { IconName } from "@umituz/react-native-design-system";
 import { SettingsItemCard } from "../../components/SettingsItemCard";
 import { useGamification } from "../../../domains/gamification";
 import type { GamificationItemConfig } from "../types/UserFeatureConfig";
 import type { GamificationSettingsConfig } from "../../../domains/gamification";
 import { compareGamificationProps } from "../../../infrastructure/utils/memoComparisonUtils";
+import { useSettingsNavigation } from "../../navigation/hooks/useSettingsNavigation";
 
 export interface GamificationSettingsItemProps {
   config: GamificationItemConfig;
@@ -21,12 +21,12 @@ const GamificationSettingsItemComponent: React.FC<GamificationSettingsItemProps>
   noBackground,
   hideMargin,
 }) => {
-  const navigation = useAppNavigation();
+  const navigation = useSettingsNavigation();
   const { level } = useGamification(gamificationConfig);
 
   const handlePress = React.useCallback(() => {
     const route = config.route || "Gamification";
-    navigation.navigate(route as never);
+    navigation.navigate(route as 'Gamification');
   }, [navigation, config.route]);
 
   const icon = (config.icon || "trophy-outline") as IconName;

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

@@ -16,7 +16,6 @@ import type { SettingsContentProps } from "./types/SettingsContentProps";
 import { SubscriptionSettingsItem } from "./SubscriptionSettingsItem";
 import { WalletSettingsItem } from "./WalletSettingsItem";
 import { GamificationSettingsItem } from "./GamificationSettingsItem";
-import { VideoTutorialSettingsItem } from "./VideoTutorialSettingsItem";
 
 export const SettingsContent: React.FC<SettingsContentProps> = ({
   normalizedConfig,

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

@@ -1,20 +1,20 @@
 import React from "react";
-import { useAppNavigation } from "@umituz/react-native-design-system";
 import { SettingsItemCard } from "../../components/SettingsItemCard";
 import type { IconName } from "@umituz/react-native-design-system";
 import type { SubscriptionConfig } from "../types/UserFeatureConfig";
 import { compareConfigAndTranslate } from "../../../infrastructure/utils/memoComparisonUtils";
+import { useSettingsNavigation } from "../../navigation/hooks/useSettingsNavigation";
 
 export interface SubscriptionSettingsItemProps {
   config: SubscriptionConfig;
 }
 
 const SubscriptionSettingsItemComponent: React.FC<SubscriptionSettingsItemProps> = ({ config }) => {
-  const navigation = useAppNavigation();
+  const navigation = useSettingsNavigation();
 
   const handlePress = React.useCallback(() => {
     if (config.route) {
-      navigation.navigate(config.route as never);
+      navigation.navigate(config.route as any);
     } else if (config.onPress) {
       config.onPress();
     }

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

@@ -1,9 +1,9 @@
 import React from "react";
-import { useAppNavigation } from "@umituz/react-native-design-system";
 import type { IconName } from "@umituz/react-native-design-system";
 import { SettingsItemCard } from "../../components/SettingsItemCard";
 import type { VideoTutorialConfig } from "../types/UserFeatureConfig";
 import { compareConfigAndTranslate } from "../../../infrastructure/utils/memoComparisonUtils";
+import { useSettingsNavigation } from "../../navigation/hooks/useSettingsNavigation";
 
 export interface VideoTutorialSettingsItemProps {
   config: VideoTutorialConfig;
@@ -16,14 +16,14 @@ const VideoTutorialSettingsItemComponent: React.FC<VideoTutorialSettingsItemProp
   noBackground,
   hideMargin,
 }) => {
-  const navigation = useAppNavigation();
+  const navigation = useSettingsNavigation();
 
   const handlePress = React.useCallback(() => {
     if (config.onPress) {
       config.onPress();
     } else {
       const route = config.route || "VideoTutorial";
-      navigation.navigate(route as never);
+      navigation.navigate(route as 'VideoTutorial');
     }
   }, [navigation, config.onPress, config.route]);
 

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

@@ -1,20 +1,20 @@
 import React from "react";
-import { useAppNavigation } from "@umituz/react-native-design-system";
 import { SettingsItemCard } from "../../components/SettingsItemCard";
 import type { IconName } from "@umituz/react-native-design-system";
 import type { WalletConfig } from "../types/UserFeatureConfig";
 import { compareConfigAndTranslate } from "../../../infrastructure/utils/memoComparisonUtils";
+import { useSettingsNavigation } from "../../navigation/hooks/useSettingsNavigation";
 
 export interface WalletSettingsItemProps {
   config: WalletConfig;
 }
 
 const WalletSettingsItemComponent: React.FC<WalletSettingsItemProps> = ({ config }) => {
-  const navigation = useAppNavigation();
+  const navigation = useSettingsNavigation();
 
   const handlePress = React.useCallback(() => {
     if (config.route) {
-      navigation.navigate(config.route as never);
+      navigation.navigate(config.route as any);
     }
   }, [navigation, config.route]);
 

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { useAppNavigation } from "@umituz/react-native-design-system";
 import { AppearanceSection } from "../../../../domains/appearance/presentation/components/AppearanceSection";
 import { NotificationsSection } from "../../../../domains/notifications";
 import { getLanguageByCode } from "../../../../domains/localization";
@@ -7,6 +6,7 @@ import { SettingsItemCard } from "../../../components/SettingsItemCard";
 import type { NormalizedConfig } from "../../utils/normalizeConfig";
 import { SettingsSection } from "../../../components/SettingsSection";
 import { compareConfigAndFeatures } from "../../../../infrastructure/utils/memoComparisonUtils";
+import { useSettingsNavigation } from "../../../navigation/hooks/useSettingsNavigation";
 
 interface FeatureSettingsSectionProps {
   normalizedConfig: NormalizedConfig;
@@ -24,14 +24,14 @@ export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
   currentLanguage,
 }) => {
   const translations = normalizedConfig.translations;
-  const navigation = useAppNavigation();
+  const navigation = useSettingsNavigation();
 
   const handleLanguagePress = React.useCallback(() => {
     if (normalizedConfig.language.config?.onPress) {
       normalizedConfig.language.config.onPress();
     } else {
       const route = normalizedConfig.language.config?.route || "LanguageSelection";
-      navigation.navigate(route as never);
+      navigation.navigate(route as 'LanguageSelection');
     }
   }, [navigation, normalizedConfig.language.config]);
 

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

@@ -1,11 +1,11 @@
 import React, { useCallback } from "react";
-import { useAppNavigation } from "@umituz/react-native-design-system";
 import { SupportSection } from "../../../../domains/feedback/presentation/components/SupportSection";
 import { SettingsSection } from "../../../components/SettingsSection";
 import { SettingsItemCard } from "../../../components/SettingsItemCard";
 import { VideoTutorialSettingsItem } from "../VideoTutorialSettingsItem";
 import type { NormalizedConfig } from "../../utils/normalizeConfig";
 import { compareConfigAndFeatures } from "../../../../infrastructure/utils/memoComparisonUtils";
+import { useSettingsNavigation } from "../../../navigation/hooks/useSettingsNavigation";
 
 interface SupportSettingsSectionProps {
     features: { feedback: boolean; rating: boolean; faqs: boolean; [key: string]: boolean };
@@ -17,10 +17,10 @@ export const SupportSettingsSection: React.FC<SupportSettingsSectionProps> = ({
     normalizedConfig,
 }) => {
     const translations = normalizedConfig.translations;
-    const navigation = useAppNavigation();
+    const navigation = useSettingsNavigation();
 
     const handleFAQPress = useCallback(() => {
-        navigation.navigate("FAQ" as never);
+        navigation.navigate("FAQ");
     }, [navigation]);
 
     if (!(features.feedback || features.rating || features.faqs || features.videoTutorial)) return null;

package/src/presentation/utils/config-creators/feature-configs.ts

@@ -9,7 +9,6 @@ import type {
   AchievementDefinition,
   LevelDefinition,
 } from "../../../domains/gamification/types";
-import type { TranslationFunction } from "./types";
 
 /**
  * Create subscription configuration

package/src/presentation/utils/config-creators/types.ts

@@ -2,10 +2,15 @@
  * Config Creator Types
  */
 
+/**
+ * Translation options for i18n parameters
+ */
+export type TranslationOptions = Record<string, string | number | boolean>;
+
 /**
  * Translation function type
  */
-export type TranslationFunction = (key: string, options?: any) => string;
+export type TranslationFunction = (key: string, options?: TranslationOptions) => string;
 
 /**
  * Feedback form data interface

package/src/presentation/utils/faqTranslator.ts

@@ -6,6 +6,7 @@
 
 import type { FAQData } from "../navigation/types";
 import type { AppInfo } from "../navigation/types";
+import type { TranslationOptions } from "./config-creators/types";
 
 /**
  * Utility for handling FAQ data
@@ -13,7 +14,7 @@ import type { AppInfo } from "../navigation/types";
  */
 export const translateFAQData = (
   faqData: FAQData | undefined,
-  _t: (key: string, params?: any) => string,
+  _t: (key: string, params?: TranslationOptions) => string,
   _appInfo: AppInfo
 ): FAQData | undefined => {
   return faqData;

package/src/presentation/utils/screenFactory.ts

@@ -11,9 +11,9 @@ import type { AdditionalScreen } from "../navigation/types";
 /**
  * Create a basic stack screen configuration
  */
-export function createStackScreen(
+export function createStackScreen<P = unknown>(
   name: string,
-  componentOrChildren: React.ComponentType<any> | (() => React.ReactElement),
+  componentOrChildren: React.ComponentType<P> | (() => React.ReactElement),
   options: { headerShown?: boolean } = {}
 ): StackScreen {
   const isChildrenFunction = typeof componentOrChildren === "function" &&
@@ -28,7 +28,7 @@ export function createStackScreen(
   }
   return {
     name,
-    component: componentOrChildren as any,
+    component: componentOrChildren as React.ComponentType<P>,
     options: { headerShown: false, ...options },
   };
 }
@@ -53,7 +53,7 @@ export function createScreenWithProps<P>(
  * Convert additional screen to stack screen
  */
 export function convertAdditionalScreen(screen: AdditionalScreen): StackScreen {
-  const stackScreen: any = { name: screen.name };
+  const stackScreen: Partial<StackScreen> = { name: screen.name };
   if (screen.component) stackScreen.component = screen.component;
   if (screen.children) stackScreen.children = screen.children;
   if (screen.options) stackScreen.options = screen.options;

package/src/presentation/utils/useAuthHandlers.ts

@@ -22,7 +22,31 @@ declare const __DEV__: boolean;
  */
 export const useAuthHandlers = (appInfo: AppInfo, translations?: SettingsTranslations["errors"]) => {
   const { signOut } = useAuth();
-  const { deleteAccount } = useAccountManagement();
+
+  const passwordPrompt = useCallback(async (): Promise<string | null> => {
+    return new Promise((resolve) => {
+      Alert.prompt(
+        "Password Required",
+        "Please enter your password to delete your account",
+        [
+          {
+            text: "Cancel",
+            style: "cancel",
+            onPress: () => resolve(null),
+          },
+          {
+            text: "Confirm",
+            onPress: (password) => resolve(password || null),
+          },
+        ],
+        "secure-text"
+      );
+    });
+  }, []);
+
+  const { deleteAccount } = useAccountManagement({
+    onPasswordRequired: passwordPrompt,
+  });
   const { showAuthModal } = useAuthModalStore();
 
   const handleRatePress = useCallback(async () => {
@@ -68,12 +92,25 @@ export const useAuthHandlers = (appInfo: AppInfo, translations?: SettingsTransla
     try {
       await deleteAccount();
     } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+
       if (typeof __DEV__ !== "undefined" && __DEV__) {
         console.error("[useAuthHandlers] Delete account failed:", error);
       }
+
+      // More specific error messages
+      if (errorMessage.includes("Password required") || errorMessage.includes("password")) {
+        Alert.alert(
+          "Password Required",
+          "Please enter your password when prompted to confirm account deletion.",
+          [{ text: "OK" }]
+        );
+        return;
+      }
+
       AlertService.createErrorAlert(
-        translations?.common || "",
-        translations?.deleteAccountError || ""
+        translations?.common || "Error",
+        errorMessage || translations?.deleteAccountError || "Failed to delete account"
       );
     }
   }, [deleteAccount, translations]);

package/src/utils/devUtils.ts

@@ -0,0 +1,60 @@
+/**
+ * Development Mode Utilities
+ *
+ * Provides safe, standardized helpers for development-only code.
+ * All utilities check for __DEV__ existence to prevent runtime errors.
+ */
+
+/**
+ * Safe development mode check
+ * Handles cases where __DEV__ is not defined
+ *
+ * @returns true if in development mode, false otherwise
+ */
+export const isDev = (): boolean => {
+  return typeof __DEV__ !== 'undefined' && __DEV__;
+};
+
+/**
+ * Log only in development mode
+ *
+ * @param args - Arguments to log
+ */
+export const devLog = (...args: unknown[]): void => {
+  if (isDev()) {
+    console.log('[DEV]', ...args);
+  }
+};
+
+/**
+ * Warn only in development mode
+ *
+ * @param args - Arguments to warn
+ */
+export const devWarn = (...args: unknown[]): void => {
+  if (isDev()) {
+    console.warn('[DEV]', ...args);
+  }
+};
+
+/**
+ * Error only in development mode
+ *
+ * @param args - Arguments to error
+ */
+export const devError = (...args: unknown[]): void => {
+  if (isDev()) {
+    console.error('[DEV]', ...args);
+  }
+};
+
+/**
+ * Execute callback only in development mode
+ *
+ * @param callback - Callback to execute in dev mode
+ */
+export const devOnly = (callback: () => void): void => {
+  if (isDev()) {
+    callback();
+  }
+};