@umituz/react-native-design-system 4.23.113 → 4.23.114

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.23.113",
+  "version": "4.23.114",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/AtomicTouchable.tsx

@@ -16,6 +16,18 @@ export interface AtomicTouchableProps {
   activeOpacity?: number;
   style?: StyleProp<ViewStyle>;
   testID?: string;
+  // Accessibility props
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  accessibilityRole?: 'button' | 'link' | 'none' | 'text' | 'search' | 'image' | 'adjustable' | 'imagebutton' | 'header' | 'summary' | 'alert' | 'checkbox' | 'combobox' | 'menu' | 'menubar' | 'menuitem' | 'progressbar' | 'radio' | 'radiogroup' | 'scrollbar' | 'spinbutton' | 'switch' | 'tab' | 'tablist' | 'timer' | 'toolbar';
+  accessibilityState?: {
+    disabled?: boolean;
+    selected?: boolean;
+    checked?: boolean | 'mixed';
+    busy?: boolean;
+    expanded?: boolean;
+  };
+  accessible?: boolean;
 }
 
 export const AtomicTouchable: React.FC<AtomicTouchableProps> = ({
@@ -26,6 +38,11 @@ export const AtomicTouchable: React.FC<AtomicTouchableProps> = ({
   activeOpacity = 0.7,
   style,
   testID,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityRole = 'button',
+  accessibilityState,
+  accessible = true,
 }) => {
   return (
     <TouchableOpacity
@@ -35,6 +52,11 @@ export const AtomicTouchable: React.FC<AtomicTouchableProps> = ({
       activeOpacity={activeOpacity}
       style={style}
       testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole={accessibilityRole}
+      accessibilityState={{ ...accessibilityState, disabled }}
+      accessible={accessible}
     >
       {children}
     </TouchableOpacity>

package/src/atoms/badge/AtomicBadge.tsx

@@ -3,7 +3,7 @@
  * Reusable badge for labels, status indicators, and tags
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { View, StyleSheet, type StyleProp, type ViewStyle, type TextStyle } from "react-native";
 import { AtomicText } from "../AtomicText";
 import { AtomicIcon, type IconName } from "../icon";
@@ -43,34 +43,34 @@ export const AtomicBadge: React.FC<AtomicBadgeProps> = React.memo(({
 }) => {
     const tokens = useAppDesignTokens();
 
-    const sizeConfig = {
-        sm: { 
-            paddingH: 6 * tokens.spacingMultiplier, 
-            paddingV: 2 * tokens.spacingMultiplier, 
-            fontSize: 10 * tokens.spacingMultiplier, 
-            iconSize: 10 * tokens.spacingMultiplier, 
-            gap: 3 * tokens.spacingMultiplier, 
-            radius: 4 * tokens.spacingMultiplier 
+    const sizeConfig = useMemo(() => ({
+        sm: {
+            paddingH: 6 * tokens.spacingMultiplier,
+            paddingV: 2 * tokens.spacingMultiplier,
+            fontSize: 10 * tokens.spacingMultiplier,
+            iconSize: 10 * tokens.spacingMultiplier,
+            gap: 3 * tokens.spacingMultiplier,
+            radius: 4 * tokens.spacingMultiplier
         },
-        md: { 
-            paddingH: 8 * tokens.spacingMultiplier, 
-            paddingV: 4 * tokens.spacingMultiplier, 
-            fontSize: 11 * tokens.spacingMultiplier, 
-            iconSize: 12 * tokens.spacingMultiplier, 
-            gap: 4 * tokens.spacingMultiplier, 
-            radius: 6 * tokens.spacingMultiplier 
+        md: {
+            paddingH: 8 * tokens.spacingMultiplier,
+            paddingV: 4 * tokens.spacingMultiplier,
+            fontSize: 11 * tokens.spacingMultiplier,
+            iconSize: 12 * tokens.spacingMultiplier,
+            gap: 4 * tokens.spacingMultiplier,
+            radius: 6 * tokens.spacingMultiplier
         },
-        lg: { 
-            paddingH: 12 * tokens.spacingMultiplier, 
-            paddingV: 6 * tokens.spacingMultiplier, 
-            fontSize: 13 * tokens.spacingMultiplier, 
-            iconSize: 14 * tokens.spacingMultiplier, 
-            gap: 5 * tokens.spacingMultiplier, 
-            radius: 8 * tokens.spacingMultiplier 
+        lg: {
+            paddingH: 12 * tokens.spacingMultiplier,
+            paddingV: 6 * tokens.spacingMultiplier,
+            fontSize: 13 * tokens.spacingMultiplier,
+            iconSize: 14 * tokens.spacingMultiplier,
+            gap: 5 * tokens.spacingMultiplier,
+            radius: 8 * tokens.spacingMultiplier
         },
-    }[size];
+    }[size]), [size, tokens.spacingMultiplier]);
 
-    const getVariantColors = () => {
+    const colors = useMemo(() => {
         switch (variant) {
             case "primary":
                 return { bg: tokens.colors.primaryLight, text: tokens.colors.primary };
@@ -87,9 +87,7 @@ export const AtomicBadge: React.FC<AtomicBadgeProps> = React.memo(({
             default:
                 return { bg: tokens.colors.primaryLight, text: tokens.colors.primary };
         }
-    };
-
-    const colors = getVariantColors();
+    }, [variant, tokens.colors]);
 
     const containerStyle: StyleProp<ViewStyle> = [
         styles.container,

package/src/atoms/chip/AtomicChip.tsx

@@ -3,7 +3,7 @@
  * Refactored: Extracted configs, styles, and types
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, ViewStyle, TouchableOpacity } from 'react-native';
 import { AtomicText } from '../AtomicText';
 import { AtomicIcon } from '../icon';
@@ -33,10 +33,10 @@ export const AtomicChip: React.FC<AtomicChipProps> = React.memo(({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const sizeConfig = getChipSizeConfig(size, tokens);
-  const colorConfig = getChipColorConfig(color, variant, tokens);
-  const borderStyle = getChipBorderStyle(variant, tokens);
-  const selectedStyle = getChipSelectedStyle(selected, tokens);
+  const sizeConfig = useMemo(() => getChipSizeConfig(size, tokens), [size, tokens]);
+  const colorConfig = useMemo(() => getChipColorConfig(color, variant, tokens), [color, variant, tokens]);
+  const borderStyle = useMemo(() => getChipBorderStyle(variant, tokens), [variant, tokens]);
+  const selectedStyle = useMemo(() => getChipSelectedStyle(selected, tokens), [selected, tokens]);
 
   // Apply custom colors if provided
   const finalBackgroundColor = backgroundColor || colorConfig.bg;

package/src/atoms/datepicker/components/DatePickerModal.tsx

@@ -5,7 +5,7 @@
  * Extracted from AtomicDatePicker for better separation of concerns.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   View,
   Modal,
@@ -52,7 +52,7 @@ export const DatePickerModal: React.FC<DatePickerModalProps> = ({
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
 
-  const modalStyles = StyleSheet.create({
+  const modalStyles = useMemo(() => StyleSheet.create({
     overlay: {
       flex: 1,
       backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})`,
@@ -89,7 +89,7 @@ export const DatePickerModal: React.FC<DatePickerModalProps> = ({
       fontWeight: '500',
       color: tokens.colors.onPrimary,
     },
-  });
+  }), [overlayOpacity, tokens, insets.bottom]);
 
   if (Platform.OS !== 'ios') {
     return null;
@@ -102,6 +102,7 @@ export const DatePickerModal: React.FC<DatePickerModalProps> = ({
       animationType="none"
       onRequestClose={onClose}
       testID={`${testID}-modal`}
+      accessibilityViewIsModal={true}
     >
       <View style={modalStyles.overlay}>
         <View style={modalStyles.container}>

package/src/atoms/input/hooks/useInputState.ts

@@ -54,5 +54,5 @@ export const useInputState = ({
     setIsFocused,
     handleTextChange,
     togglePasswordVisibility,
-  }), [localValue, isFocused, isPasswordVisible, characterCount, isAtMaxLength, handleTextChange, togglePasswordVisibility]);
+  }), [localValue, isFocused, isPasswordVisible, characterCount, isAtMaxLength, setIsFocused, handleTextChange, togglePasswordVisibility]);
 };

package/src/atoms/picker/components/PickerModal.tsx

@@ -95,7 +95,7 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
   };
 
   return (
-    <Modal visible={visible} animationType="none" transparent onRequestClose={onClose} testID={`${testID}-modal`}>
+    <Modal visible={visible} animationType="none" transparent onRequestClose={onClose} testID={`${testID}-modal`} accessibilityViewIsModal={true}>
       <View style={styles.overlay}>
         <View style={[styles.container, { paddingBottom: insets.bottom + tokens.spacing.md }]}>
           <View style={styles.header}>

package/src/atoms/picker/hooks/usePickerState.ts

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import type { PickerOption } from '../../picker/types';
 
 interface UsePickerStateProps {
@@ -71,23 +71,23 @@ export const usePickerState = ({
   /**
    * Handle modal open
    */
-  const openModal = () => {
+  const openModal = useCallback(() => {
     setModalVisible(true);
     setSearchQuery('');
-  };
+  }, []);
 
   /**
    * Handle modal close
    */
-  const closeModal = () => {
+  const closeModal = useCallback(() => {
     setModalVisible(false);
     setSearchQuery('');
-  };
+  }, []);
 
   /**
    * Handle option selection
    */
-  const handleSelect = (optionValue: string) => {
+  const handleSelect = useCallback((optionValue: string) => {
     if (multiple) {
       const newValues = selectedValues.includes(optionValue)
         ? selectedValues.filter((v) => v !== optionValue)
@@ -99,30 +99,30 @@ export const usePickerState = ({
         closeModal();
       }
     }
-  };
+  }, [multiple, selectedValues, onChange, autoClose, closeModal]);
 
   /**
    * Handle clear selection
    */
-  const handleClear = () => {
+  const handleClear = useCallback(() => {
     onChange(multiple ? [] : '');
-  };
+  }, [onChange, multiple]);
 
   /**
    * Handle search query change
    */
-  const handleSearch = (query: string) => {
+  const handleSearch = useCallback((query: string) => {
     setSearchQuery(query);
-  };
+  }, []);
 
   /**
    * Handle chip removal
    */
-  const handleChipRemove = (value: string) => {
+  const handleChipRemove = useCallback((value: string) => {
     handleSelect(value);
-  };
+  }, [handleSelect]);
 
-  return {
+  return useMemo(() => ({
     modalVisible,
     searchQuery,
     selectedValues,
@@ -135,5 +135,18 @@ export const usePickerState = ({
     handleClear,
     handleSearch,
     handleChipRemove,
-  };
+  }), [
+    modalVisible,
+    searchQuery,
+    selectedValues,
+    selectedOptions,
+    filteredOptions,
+    displayText,
+    openModal,
+    closeModal,
+    handleSelect,
+    handleClear,
+    handleSearch,
+    handleChipRemove,
+  ]);
 };

package/src/atoms/skeleton/AtomicSkeleton.tsx

@@ -22,7 +22,7 @@
  * ```
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle, type DimensionValue } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import type { SkeletonPattern, SkeletonConfig } from './AtomicSkeleton.types';
@@ -50,8 +50,8 @@ const SkeletonItem: React.FC<{
   config: SkeletonConfig;
   baseColor: string;
   multiplier: number;
-}> = ({ config, baseColor, multiplier }) => {
-  const itemStyles = StyleSheet.create({
+}> = React.memo(({ config, baseColor, multiplier }) => {
+  const itemStyles = useMemo(() => StyleSheet.create({
     item: {
       ...styles.skeleton,
       width: (typeof config.width === 'number' ? config.width * multiplier : config.width) as DimensionValue,
@@ -60,10 +60,10 @@ const SkeletonItem: React.FC<{
       marginBottom: config.marginBottom ? config.marginBottom * multiplier : undefined,
       backgroundColor: baseColor,
     },
-  });
+  }), [config, baseColor, multiplier]);
 
   return <View style={itemStyles.item} />;
-};
+});
 
 export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
   pattern = 'list',

package/src/device/infrastructure/services/DeviceCapabilityService.ts

@@ -54,19 +54,8 @@ export class DeviceCapabilityService {
    */
   static async hasNotch(): Promise<boolean> {
     try {
-      if (Platform.OS !== 'ios') {
-        return false;
-      }
-
       const info = await DeviceInfoService.getDeviceInfo();
-      const modelName = info.modelName?.toLowerCase() ?? '';
-
-      // iPhone X and newer (with notch or dynamic island)
-      return (
-        modelName.includes('iphone x') ||
-        modelName.includes('iphone 1') || // 11, 12, 13, 14, 15
-        modelName.includes('pro')
-      );
+      return this.hasNotchFromInfo(info);
     } catch {
       return false;
     }

package/src/filesystem/infrastructure/services/directory.service.ts

@@ -12,7 +12,7 @@ import type { DirectoryType } from "../../domain/entities/File";
 export async function createDirectory(uri: string): Promise<boolean> {
   try {
     const dir = new Directory(uri);
-    dir.create({ intermediates: true, idempotent: true });
+    await dir.create({ intermediates: true, idempotent: true });
     return true;
   } catch {
     return false;
@@ -25,7 +25,7 @@ export async function createDirectory(uri: string): Promise<boolean> {
 export async function listDirectory(uri: string): Promise<string[]> {
   try {
     const dir = new Directory(uri);
-    const items = dir.list();
+    const items = await dir.list();
     return items.map((item) => item.uri);
   } catch {
     return [];

package/src/filesystem/infrastructure/services/download.service.ts

@@ -38,7 +38,7 @@ export async function downloadFileWithProgress(
 ): Promise<DownloadWithProgressResult> {
   try {
     const dir = new Directory(cacheDir);
-    if (!dir.exists) dir.create({ intermediates: true, idempotent: true });
+    if (!dir.exists) await dir.create({ intermediates: true, idempotent: true });
 
     const destUri = getCacheUri(url, cacheDir);
     if (new File(destUri).exists) return { success: true, uri: destUri, fromCache: true };
@@ -70,7 +70,7 @@ export async function downloadFileWithProgress(
       const all = new Uint8Array(received);
       let pos = 0;
       for (const c of chunks) { all.set(c, pos); pos += c.length; }
-      new File(destUri).write(all);
+      await new File(destUri).write(all);
 
       return { success: true, uri: destUri, fromCache: false };
     } finally {
@@ -81,8 +81,8 @@ export async function downloadFileWithProgress(
 
 export const isUrlCached = (url: string, dir: string) => new File(getCacheUri(url, dir)).exists;
 export const getCachedFileUri = (url: string, dir: string) => isUrlCached(url, dir) ? getCacheUri(url, dir) : null;
-export const deleteCachedFile = (url: string, dir: string) => {
+export const deleteCachedFile = async (url: string, dir: string) => {
   const f = new File(getCacheUri(url, dir));
-  if (f.exists) f.delete();
+  if (f.exists) await f.delete();
   return true;
 };

package/src/filesystem/infrastructure/services/file-manager.service.ts

@@ -15,7 +15,7 @@ export async function deleteFile(uri: string): Promise<boolean> {
     try {
       const file = new File(uri);
       if (file.exists) {
-        file.delete();
+        await file.delete();
         return true;
       }
     } catch {
@@ -26,7 +26,7 @@ export async function deleteFile(uri: string): Promise<boolean> {
     try {
       const dir = new Directory(uri);
       if (dir.exists) {
-        dir.delete();
+        await dir.delete();
         return true;
       }
     } catch {
@@ -49,7 +49,7 @@ export async function copyFile(
   try {
     const sourceFile = new File(sourceUri);
     const destination = new File(destinationUri);
-    sourceFile.copy(destination);
+    await sourceFile.copy(destination);
     return { success: true, uri: destinationUri };
   } catch (error) {
     return {
@@ -69,7 +69,7 @@ export async function moveFile(
   try {
     const sourceFile = new File(sourceUri);
     const destination = new File(destinationUri);
-    sourceFile.move(destination);
+    await sourceFile.move(destination);
     return { success: true, uri: destinationUri };
   } catch (error) {
     return {

package/src/filesystem/infrastructure/services/file-writer.service.ts

@@ -18,7 +18,7 @@ export async function writeFile(
   try {
     const encodingType = getEncodingType(encoding);
     const file = new File(uri);
-    file.write(content, {
+    await file.write(content, {
       encoding: encodingType as ExpoEncodingType,
     });
     return { success: true, uri };

package/src/media/presentation/hooks/useMedia.ts

@@ -5,7 +5,7 @@
  * Provides camera, gallery picking functionality.
  */
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 import { MediaPickerService } from "../../infrastructure/services/MediaPickerService";
 import { PermissionManager } from "../../infrastructure/utils/PermissionManager";
 import type {
@@ -39,24 +39,38 @@ export const useMedia = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Track mounted state to prevent setState on unmounted component
+  const isMountedRef = useRef(true);
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
   const pickImage = useCallback(
     async (options?: MediaPickerOptions): Promise<MediaPickerResult> => {
-      setIsLoading(true);
-      setError(null);
+      if (isMountedRef.current) {
+        setIsLoading(true);
+        setError(null);
+      }
       try {
         const result = await MediaPickerService.pickSingleImage(options);
         // Set error from validation result if present
-        if (result.errorMessage) {
+        if (result.errorMessage && isMountedRef.current) {
           setError(result.errorMessage);
         }
         return result;
       } catch (err) {
         const errorMessage =
           err instanceof Error ? err.message : "Failed to pick image";
-        setError(errorMessage);
+        if (isMountedRef.current) {
+          setError(errorMessage);
+        }
         return { canceled: true };
       } finally {
-        setIsLoading(false);
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
       }
     },
     []
@@ -64,18 +78,24 @@ export const useMedia = () => {
 
   const pickMultipleImages = useCallback(
     async (options?: MediaPickerOptions): Promise<MediaPickerResult> => {
-      setIsLoading(true);
-      setError(null);
+      if (isMountedRef.current) {
+        setIsLoading(true);
+        setError(null);
+      }
       try {
         const result = await MediaPickerService.pickMultipleImages(options);
         return result;
       } catch (err) {
         const errorMessage =
           err instanceof Error ? err.message : "Failed to pick images";
-        setError(errorMessage);
+        if (isMountedRef.current) {
+          setError(errorMessage);
+        }
         return { canceled: true };
       } finally {
-        setIsLoading(false);
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
       }
     },
     []
@@ -83,18 +103,24 @@ export const useMedia = () => {
 
   const pickVideo = useCallback(
     async (options?: MediaPickerOptions): Promise<MediaPickerResult> => {
-      setIsLoading(true);
-      setError(null);
+      if (isMountedRef.current) {
+        setIsLoading(true);
+        setError(null);
+      }
       try {
         const result = await MediaPickerService.pickVideo(options);
         return result;
       } catch (err) {
         const errorMessage =
           err instanceof Error ? err.message : "Failed to pick video";
-        setError(errorMessage);
+        if (isMountedRef.current) {
+          setError(errorMessage);
+        }
         return { canceled: true };
       } finally {
-        setIsLoading(false);
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
       }
     },
     []
@@ -102,18 +128,24 @@ export const useMedia = () => {
 
   const launchCamera = useCallback(
     async (options?: CameraOptions): Promise<MediaPickerResult> => {
-      setIsLoading(true);
-      setError(null);
+      if (isMountedRef.current) {
+        setIsLoading(true);
+        setError(null);
+      }
       try {
         const result = await MediaPickerService.launchCamera(options);
         return result;
       } catch (err) {
         const errorMessage =
           err instanceof Error ? err.message : "Failed to launch camera";
-        setError(errorMessage);
+        if (isMountedRef.current) {
+          setError(errorMessage);
+        }
         return { canceled: true };
       } finally {
-        setIsLoading(false);
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
       }
     },
     []
@@ -121,18 +153,24 @@ export const useMedia = () => {
 
   const launchCameraForVideo = useCallback(
     async (options?: CameraOptions): Promise<MediaPickerResult> => {
-      setIsLoading(true);
-      setError(null);
+      if (isMountedRef.current) {
+        setIsLoading(true);
+        setError(null);
+      }
       try {
         const result = await MediaPickerService.launchCameraForVideo(options);
         return result;
       } catch (err) {
         const errorMessage =
           err instanceof Error ? err.message : "Failed to record video";
-        setError(errorMessage);
+        if (isMountedRef.current) {
+          setError(errorMessage);
+        }
         return { canceled: true };
       } finally {
-        setIsLoading(false);
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
       }
     },
     []

package/src/molecules/BaseModal.tsx

@@ -51,6 +51,7 @@ export const BaseModal: React.FC<BaseModalProps> = ({
       onRequestClose={onClose}
       statusBarTranslucent
       testID={testID}
+      accessibilityViewIsModal={true}
     >
       <View style={styles.overlay}>
         <TouchableOpacity

package/src/molecules/ConfirmationModalMain.tsx

@@ -64,6 +64,7 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
       onRequestClose={onCancel}
       statusBarTranslucent
       testID={testID}
+      accessibilityViewIsModal={true}
     >
       <View style={getModalOverlayStyle()}>
         <ConfirmationModalBackdrop

package/src/molecules/ListItem.tsx

@@ -14,8 +14,22 @@ export const ListItem: React.FC<ListItemProps> = ({
   const listItemStyles = getListItemStyles(tokens);
   const Component = onPress ? TouchableOpacity : View;
 
+  const accessibilityProps = onPress
+    ? {
+        accessibilityRole: 'button' as const,
+        accessibilityLabel: title,
+        accessibilityState: { disabled },
+      }
+    : {};
+
   return (
-    <Component style={[listItemStyles.container, disabled ? listItemStyles.disabled : undefined, style]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+    <Component
+      style={[listItemStyles.container, disabled ? listItemStyles.disabled : undefined, style]}
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={0.7}
+      {...accessibilityProps}
+    >
       {leftIcon && (
         <AtomicIcon 
           name={leftIcon} 

package/src/molecules/avatar/Avatar.tsx

@@ -5,8 +5,8 @@
  * Handles loading states, fallbacks, and status indicators.
  */
 
-import React from 'react';
-import { View, Image, StyleSheet, type StyleProp, type ViewStyle, type ImageStyle } from 'react-native';
+import React, { useMemo } from 'react';
+import { View, Image, StyleSheet, TouchableOpacity, type StyleProp, type ViewStyle, type ImageStyle } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import { AtomicText, AtomicIcon } from '../../atoms';
 import type { AvatarSize, AvatarShape } from './Avatar.types';
@@ -62,20 +62,29 @@ export const Avatar: React.FC<AvatarProps> = ({
   onPress,
 }) => {
   const tokens = useAppDesignTokens();
-  const config = SIZE_CONFIGS[size];
+  const config = useMemo(() => SIZE_CONFIGS[size], [size]);
 
   // Determine avatar type and content
   const hasImage = !!uri;
   const hasName = !!name;
-  const initials = hasName ? AvatarUtils.generateInitials(name) : AVATAR_CONSTANTS.FALLBACK_INITIALS;
-  const bgColor = backgroundColor || (hasName ? AvatarUtils.getColorForName(name) : tokens.colors.surfaceSecondary);
-  const borderRadius = AvatarUtils.getBorderRadius(shape, config.size);
+  const initials = useMemo(
+    () => (hasName ? AvatarUtils.generateInitials(name) : AVATAR_CONSTANTS.FALLBACK_INITIALS),
+    [hasName, name]
+  );
+  const bgColor = useMemo(
+    () => backgroundColor || (hasName ? AvatarUtils.getColorForName(name) : tokens.colors.surfaceSecondary),
+    [backgroundColor, hasName, name, tokens.colors.surfaceSecondary]
+  );
+  const borderRadius = useMemo(
+    () => AvatarUtils.getBorderRadius(shape, config.size),
+    [shape, config.size]
+  );
 
   // Status indicator position
-  const statusPosition = {
+  const statusPosition = useMemo(() => ({
     bottom: 0,
     right: 0,
-  };
+  }), []);
 
   const renderContent = () => {
     if (hasImage) {
@@ -122,8 +131,10 @@ export const Avatar: React.FC<AvatarProps> = ({
     );
   };
 
+  const AvatarWrapper = onPress ? TouchableOpacity : View;
+
   return (
-    <View
+    <AvatarWrapper
       style={[
         styles.container,
         {
@@ -134,7 +145,11 @@ export const Avatar: React.FC<AvatarProps> = ({
         },
         style,
       ]}
-      onTouchEnd={onPress}
+      onPress={onPress}
+      disabled={!onPress}
+      accessibilityRole={onPress ? 'button' : 'image'}
+      accessibilityLabel={name || 'User avatar'}
+      accessible={true}
     >
       {renderContent()}
 
@@ -153,9 +168,11 @@ export const Avatar: React.FC<AvatarProps> = ({
               ...statusPosition,
             },
           ]}
+          accessibilityLabel={`Status: ${status}`}
+          accessibilityRole="none"
         />
       )}
-    </View>
+    </AvatarWrapper>
   );
 };
 

package/src/molecules/bottom-sheet/components/BottomSheet.tsx

@@ -99,6 +99,7 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props,
       animationType="none"
       onRequestClose={dismiss}
       statusBarTranslucent
+      accessibilityViewIsModal={true}
     >
       <Pressable style={styles.overlay} onPress={dismiss}>
         <View style={styles.container}>

package/src/molecules/calendar/presentation/components/AtomicCalendar.tsx

@@ -119,7 +119,7 @@ export const AtomicCalendar: React.FC<AtomicCalendarProps> = ({
 
           return (
             <CalendarDayCell
-              key={index}
+              key={day.date.getTime()}
               day={day}
               index={index}
               isSelected={isSelected}

package/src/responsive/useResponsive.ts

@@ -124,7 +124,7 @@ export const useResponsive = (): UseResponsiveReturn => {
         getGridCols,
       };
     },
-    [width, height, getLogoSize, getInputHeight, getIconSize, getMaxWidth, getFontSize, getGridCols],
+    [width, height, insets, getLogoSize, getInputHeight, getIconSize, getMaxWidth, getFontSize, getGridCols],
   );
 
   return responsiveValues;

package/src/storage/presentation/hooks/usePersistentCache.ts

@@ -99,16 +99,24 @@ export function usePersistentCache<T>(
   // Track if component is mounted to prevent state updates after unmount
   const isMountedRef = useRef(true);
 
+  // Stabilize actions to prevent circular dependency
+  const stableActionsRef = useRef(actions);
+  useEffect(() => {
+    stableActionsRef.current = actions;
+  });
+
   const loadFromStorage = useCallback(async () => {
+    const currentActions = stableActionsRef.current;
+
     if (!enabled) {
       if (isMountedRef.current) {
-        actions.setLoading(false);
+        currentActions.setLoading(false);
       }
       return;
     }
 
     if (isMountedRef.current) {
-      actions.setLoading(true);
+      currentActions.setLoading(true);
     }
 
     try {
@@ -117,35 +125,35 @@ export function usePersistentCache<T>(
       if (isMountedRef.current) {
         if (cached) {
           const expired = isCacheExpired(cached, version);
-          actions.setData(cached.value);
-          actions.setExpired(expired);
+          currentActions.setData(cached.value);
+          currentActions.setExpired(expired);
         } else {
-          actions.clearData();
+          currentActions.clearData();
         }
       }
     } catch {
       if (isMountedRef.current) {
-        actions.clearData();
+        currentActions.clearData();
       }
     } finally {
       if (isMountedRef.current) {
-        actions.setLoading(false);
+        currentActions.setLoading(false);
       }
     }
-  }, [key, version, enabled, actions, cacheOps]);
+  }, [key, version, enabled, cacheOps]); // Removed actions from dependencies
 
   const setData = useCallback(
     async (value: T) => {
       await cacheOps.saveToStorage(key, value, { ttl, version, enabled });
-      actions.setData(value);
+      stableActionsRef.current.setData(value);
     },
-    [key, ttl, version, enabled, actions, cacheOps],
+    [key, ttl, version, enabled, cacheOps],
   );
 
   const clearData = useCallback(async () => {
     await cacheOps.clearFromStorage(key, enabled);
-    actions.clearData();
-  }, [key, enabled, actions, cacheOps]);
+    stableActionsRef.current.clearData();
+  }, [key, enabled, cacheOps]);
 
   const refresh = useCallback(async () => {
     await loadFromStorage();

package/src/storage/presentation/hooks/useStore.ts

@@ -16,6 +16,7 @@ export function useStore<T extends object>(config: StoreConfig<T>) {
       config.version,
       config.persist,
       config.storage,
+      JSON.stringify(config.initialState), // Track initialState changes
     ]
   );
 

package/src/tanstack/presentation/hooks/usePrefetch.ts

@@ -30,6 +30,13 @@ export function usePrefetchQuery<
   const queryClient = useQueryClient();
   const prefetchingRef = useRef(new Set<TVariables>());
 
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      prefetchingRef.current.clear();
+    };
+  }, []);
+
   return useCallback(
     async (variables: TVariables) => {
       if (prefetchingRef.current.has(variables)) return;
@@ -62,6 +69,13 @@ export function usePrefetchInfiniteQuery<
   const queryClient = useQueryClient();
   const hasPrefetchedRef = useRef(false);
 
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      hasPrefetchedRef.current = false;
+    };
+  }, []);
+
   return useCallback(async () => {
     if (hasPrefetchedRef.current) return;
 

package/src/theme/infrastructure/stores/themeStore.ts

@@ -20,6 +20,8 @@ interface ThemeState {
   defaultThemeMode: ThemeMode;
   isDark: boolean;
   isInitialized: boolean;
+  _updateInProgress: boolean;
+  _initInProgress: boolean;
 }
 
 interface ThemeActions {
@@ -32,9 +34,6 @@ interface ThemeActions {
   initialize: () => Promise<void>;
 }
 
-let themeUpdateInProgress = false;
-let themeInitInProgress = false;
-
 export const useTheme = createStore<ThemeState, ThemeActions>({
   name: 'theme-store',
   initialState: {
@@ -45,14 +44,16 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
     defaultThemeMode: 'dark',
     isDark: true,
     isInitialized: false,
+    _updateInProgress: false,
+    _initInProgress: false,
   },
   persist: false,
   actions: (set, get) => ({
     initialize: async () => {
-      const { isInitialized, customColors: currentColors, defaultThemeMode } = get();
-      if (isInitialized || themeInitInProgress) return;
+      const { isInitialized, _initInProgress, customColors: currentColors, defaultThemeMode } = get();
+      if (isInitialized || _initInProgress) return;
 
-      themeInitInProgress = true;
+      set({ _initInProgress: true });
 
       try {
         const [savedMode, savedColors] = await Promise.all([
@@ -77,16 +78,17 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
         dsTheme.setThemeMode(mode);
         dsTheme.setCustomColors(colors);
       } catch {
-        set({ isInitialized: true });
+        set({ isInitialized: true, _initInProgress: false });
         useDesignSystemTheme.getState().setThemeMode(defaultThemeMode);
       } finally {
-        themeInitInProgress = false;
+        set({ _initInProgress: false });
       }
     },
 
     setThemeMode: async (mode: ThemeMode) => {
-      if (themeUpdateInProgress) return;
-      themeUpdateInProgress = true;
+      const { _updateInProgress } = get();
+      if (_updateInProgress) return;
+      set({ _updateInProgress: true });
 
       try {
         const theme = mode === 'light' ? lightTheme : darkTheme;
@@ -96,7 +98,7 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
       } catch {
         // Silent failure
       } finally {
-        themeUpdateInProgress = false;
+        set({ _updateInProgress: false });
       }
     },
 

package/src/timezone/infrastructure/services/BusinessCalendarManager.ts

@@ -4,6 +4,7 @@
  * Business date utilities for work days and month boundaries
  * Handles weekend detection and business day calculations
  */
+import { parseDate } from '../utils/TimezoneParsers';
 
 export class BusinessCalendarManager {
   /**

package/src/timezone/infrastructure/services/CalendarManager.ts

@@ -1,4 +1,5 @@
 import { TimezoneCalendarDay } from '../../domain/entities/Timezone';
+import { parseDate } from '../utils/TimezoneParsers';
 
 /**
  * CalendarManager
@@ -123,8 +124,7 @@ export class CalendarManager {
     }
 
     parse(date: Date | string | number): Date {
-        if (date instanceof Date) return new Date(date.getTime());
-        return new Date(date);
+        return parseDate(date);
     }
 
     isValid(date: Date | string | number): boolean {

package/src/timezone/infrastructure/services/DateComparisonUtils.ts

@@ -4,6 +4,7 @@
  * Precise date comparison utilities and relative time formatting
  * Handles hour/minute precision comparisons and "from now" formatting
  */
+import { parseDate } from '../utils/TimezoneParsers';
 
 export class DateComparisonUtils {
   /**

package/src/timezone/infrastructure/services/DateFormatter.ts

@@ -2,6 +2,8 @@
  * DateFormatter
  * Handles locale-aware formatting of dates and times
  */
+import { parseDate } from '../utils/TimezoneParsers';
+
 export class DateFormatter {
     formatDate(
         date: Date | string | number,
@@ -98,8 +100,7 @@ export class DateFormatter {
     }
 
     parse(date: Date | string | number): Date {
-        if (date instanceof Date) return new Date(date.getTime());
-        return new Date(date);
+        return parseDate(date);
     }
 
     formatDuration(milliseconds: number): string {

package/src/timezone/infrastructure/services/DateRangeUtils.ts

@@ -4,6 +4,7 @@
  * Date range utilities for working with date intervals
  * Handles range generation, overlap detection, and clamping
  */
+import { parseDate } from '../utils/TimezoneParsers';
 
 export class DateRangeUtils {
   /**

package/src/timezone/infrastructure/utils/TimezoneParsers.ts

@@ -0,0 +1,27 @@
+/**
+ * Timezone Parsers Utility
+ *
+ * Shared parsing functions for timezone services.
+ * Extracted from duplicate methods across DateFormatter, CalendarManager,
+ * BusinessCalendarManager, DateRangeUtils, and DateComparisonUtils.
+ */
+
+/**
+ * Parse date from various input types
+ * Ensures a Date object is returned from Date, string, or number input
+ */
+export function parseDate(date: Date | string | number): Date {
+    if (date instanceof Date) return new Date(date.getTime());
+    return new Date(date);
+}
+
+/**
+ * Parse timezone offset string to number
+ * @param offset - Offset string (e.g., "+05:30", "-08:00")
+ * @returns Offset in minutes
+ */
+export function parseTimezoneOffset(offset: string): number {
+    const sign = offset[0] === '-' ? -1 : 1;
+    const [hours, minutes] = offset.slice(1).split(':').map(Number);
+    return sign * (hours * 60 + (minutes || 0));
+}

package/src/utilities/sharing/presentation/hooks/useSharing.ts

@@ -8,7 +8,7 @@
  * @layer presentation/hooks
  */
 
-import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
 import { SharingService } from '../../infrastructure/services/SharingService';
 import type { ShareOptions } from '../../domain/entities/Share';
 
@@ -47,29 +47,40 @@ export const useSharing = () => {
   const [isSharing, setIsSharing] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Track mounted state to prevent setState on unmounted component
+  const isMountedRef = useRef(true);
+
   /**
    * Check sharing availability on mount
    */
   useEffect(() => {
     const checkAvailability = async () => {
       const available = await SharingService.isAvailable();
-      setIsAvailable(available);
+      if (isMountedRef.current) {
+        setIsAvailable(available);
+      }
     };
 
     checkAvailability();
+
+    return () => {
+      isMountedRef.current = false;
+    };
   }, []);
 
   /**
    * Share a file via system share sheet
    */
   const share = useCallback(async (uri: string, options?: ShareOptions): Promise<boolean> => {
-    setIsSharing(true);
-    setError(null);
+    if (isMountedRef.current) {
+      setIsSharing(true);
+      setError(null);
+    }
 
     try {
       const result = await SharingService.shareFile(uri, options);
 
-      if (!result.success) {
+      if (!result.success && isMountedRef.current) {
         setError(result.error || 'Failed to share file');
         return false;
       }
@@ -77,10 +88,14 @@ export const useSharing = () => {
       return true;
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to share file';
-      setError(errorMessage);
+      if (isMountedRef.current) {
+        setError(errorMessage);
+      }
       return false;
     } finally {
-      setIsSharing(false);
+      if (isMountedRef.current) {
+        setIsSharing(false);
+      }
     }
   }, []);
 
@@ -89,13 +104,15 @@ export const useSharing = () => {
    */
   const shareWithAutoType = useCallback(
     async (uri: string, filename: string, dialogTitle?: string): Promise<boolean> => {
-      setIsSharing(true);
-      setError(null);
+      if (isMountedRef.current) {
+        setIsSharing(true);
+        setError(null);
+      }
 
       try {
         const result = await SharingService.shareWithAutoType(uri, filename, dialogTitle);
 
-        if (!result.success) {
+        if (!result.success && isMountedRef.current) {
           setError(result.error || 'Failed to share file');
           return false;
         }
@@ -103,10 +120,14 @@ export const useSharing = () => {
         return true;
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : 'Failed to share file';
-        setError(errorMessage);
+        if (isMountedRef.current) {
+          setError(errorMessage);
+        }
         return false;
       } finally {
-        setIsSharing(false);
+        if (isMountedRef.current) {
+          setIsSharing(false);
+        }
       }
     },
     []
@@ -117,13 +138,15 @@ export const useSharing = () => {
    */
   const shareMultiple = useCallback(
     async (uris: string[], options?: ShareOptions): Promise<boolean> => {
-      setIsSharing(true);
-      setError(null);
+      if (isMountedRef.current) {
+        setIsSharing(true);
+        setError(null);
+      }
 
       try {
         const result = await SharingService.shareMultipleFiles(uris, options);
 
-        if (!result.success) {
+        if (!result.success && isMountedRef.current) {
           setError(result.error || 'Failed to share files');
           return false;
         }
@@ -131,10 +154,14 @@ export const useSharing = () => {
         return true;
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : 'Failed to share files';
-        setError(errorMessage);
+        if (isMountedRef.current) {
+          setError(errorMessage);
+        }
         return false;
       } finally {
-        setIsSharing(false);
+        if (isMountedRef.current) {
+          setIsSharing(false);
+        }
       }
     },
     []