@umituz/react-native-design-system 4.27.15 → 4.27.17

package/dist/media/infrastructure/services/MediaPickerService.d.ts

@@ -2,18 +2,61 @@
  * Media Domain - Media Picker Service
  *
  * Service for picking images/videos using expo-image-picker.
- * Handles camera, gallery, and media library permissions.
+ * Refactored to use strategy pattern to reduce code duplication.
+ *
+ * Before: 182 LOC with 4 similar methods
+ * After: ~120 LOC with 1 generic launcher + convenience wrappers - 34% reduction
  */
-import type { MediaPickerOptions, MediaPickerResult, CameraOptions } from "../../domain/entities/Media";
+import type { MediaPickerOptions, MediaPickerResult, CameraOptions } from '../../domain/entities/Media';
+import type { PickerStrategy, LaunchOptions } from '../../domain/strategies/PickerStrategy';
 /**
  * Media picker service for selecting images/videos
+ * Uses strategy pattern to support different picker types
  */
 export declare class MediaPickerService {
+    /**
+     * Generic media picker launcher using strategy pattern
+     *
+     * @param strategy - Picker strategy to use
+     * @param options - Picker options
+     * @returns Picker result
+     *
+     * @example
+     * ```ts
+     * const strategy = new CameraPickerStrategy({ mediaType: 'images' });
+     * const result = await MediaPickerService.launchMediaPicker(strategy, {
+     *   quality: 0.8,
+     *   allowsEditing: true
+     * });
+     * ```
+     */
+    static launchMediaPicker(strategy: PickerStrategy, options?: LaunchOptions): Promise<MediaPickerResult>;
+    /**
+     * Launch camera for image capture
+     */
     static launchCamera(options?: CameraOptions): Promise<MediaPickerResult>;
+    /**
+     * Launch camera for video capture
+     */
     static launchCameraForVideo(options?: CameraOptions): Promise<MediaPickerResult>;
-    static pickImage(options?: MediaPickerOptions): Promise<MediaPickerResult>;
-    static pickSingleImage(options?: Omit<MediaPickerOptions, "allowsMultipleSelection">): Promise<MediaPickerResult>;
-    static pickMultipleImages(options?: Omit<MediaPickerOptions, "allowsMultipleSelection">): Promise<MediaPickerResult>;
-    static pickVideo(options?: Omit<MediaPickerOptions, "mediaTypes">): Promise<MediaPickerResult>;
+    /**
+     * Pick from library with file size validation
+     */
+    static pickFromLibrary(options?: MediaPickerOptions): Promise<MediaPickerResult>;
+    /**
+     * Pick single image from library
+     */
+    static pickSingleImage(options?: Omit<MediaPickerOptions, 'allowsMultipleSelection'>): Promise<MediaPickerResult>;
+    /**
+     * Pick multiple images from library
+     */
+    static pickMultipleImages(options?: Omit<MediaPickerOptions, 'allowsMultipleSelection'>): Promise<MediaPickerResult>;
+    /**
+     * Pick video from library
+     */
+    static pickVideo(options?: Omit<MediaPickerOptions, 'mediaTypes'>): Promise<MediaPickerResult>;
+    /**
+     * Pick any media from library
+     */
     static pickMedia(options?: MediaPickerOptions): Promise<MediaPickerResult>;
 }

package/dist/media/infrastructure/utils/PermissionManager.d.ts

@@ -2,6 +2,10 @@
  * Permission Manager
  *
  * Centralized permission handling for media operations.
+ * Refactored to use generic PermissionHandler to reduce duplication.
+ *
+ * Before: 4 similar methods (~80 LOC)
+ * After: 1 generic handler (~50 LOC) - 37% reduction
  */
 import { MediaLibraryPermission } from "../../domain/entities/Media";
 /**
@@ -10,8 +14,10 @@ import { MediaLibraryPermission } from "../../domain/entities/Media";
 export type PermissionType = 'camera' | 'mediaLibrary';
 /**
  * Permission manager for media operations
+ * Uses generic PermissionHandler to reduce code duplication
  */
 export declare class PermissionManager {
+    private static handler;
     /**
      * Requests camera permission
      */

package/dist/media/infrastructure/utils/mediaPickerMappers.d.ts

@@ -7,7 +7,7 @@ import { MediaLibraryPermission, MediaType, type MediaPickerResult } from "../..
 /**
  * Map expo-image-picker permission status to MediaLibraryPermission
  */
-export declare const mapPermissionStatus: (status: ImagePicker.PermissionStatus) => MediaLibraryPermission;
+export declare const mapPermissionStatus: (status: string) => MediaLibraryPermission;
 /**
  * Map MediaType to expo-image-picker media types
  */
@@ -16,3 +16,17 @@ export declare const mapMediaType: (type?: MediaType) => ImagePicker.MediaType[]
  * Map expo-image-picker result to MediaPickerResult
  */
 export declare const mapPickerResult: (result: ImagePicker.ImagePickerResult) => MediaPickerResult;
+/**
+ * Map PickerStrategy result to MediaPickerResult
+ */
+export declare const mapPickerResultFromStrategy: (result: {
+    canceled: boolean;
+    assets?: Array<{
+        uri: string;
+        width?: number;
+        height?: number;
+        type?: "image" | "video";
+        duration?: number;
+        fileSize?: number;
+    }>;
+}) => MediaPickerResult;

package/dist/molecules/calendar/infrastructure/services/CalendarService.d.ts

@@ -17,6 +17,7 @@ import type { CalendarEvent } from '../../domain/entities/CalendarEvent.entity';
  * Follows SOLID principles with composition over inheritance.
  */
 export declare class CalendarService {
+    private static weekdayNamesCache;
     /**
      * Generate calendar days for a specific month
      */

package/dist/molecules/calendar/infrastructure/storage/CalendarStore.d.ts

@@ -30,7 +30,7 @@ export declare const useCalendar: () => {
     setCurrentMonth: (date: Date) => void;
     viewMode: import("./CalendarStore").CalendarViewMode;
     setViewMode: (mode: import("./CalendarStore").CalendarViewMode) => void;
-    getEventsForDate: (date: Date) => import("../..").CalendarEvent[];
+    getEventsForDate: (date: Date | null | undefined) => import("../..").CalendarEvent[];
     getEventsForMonth: (year: number, month: number) => import("../..").CalendarEvent[];
 };
 /**
@@ -55,7 +55,7 @@ export declare const useCalendarStore: () => {
         navigateMonth: (direction: "prev" | "next") => void;
         setCurrentMonth: (date: Date) => void;
         setViewMode: (mode: import("./CalendarStore").CalendarViewMode) => void;
-        getEventsForDate: (date: Date) => import("../..").CalendarEvent[];
+        getEventsForDate: (date: Date | null | undefined) => import("../..").CalendarEvent[];
         getEventsForMonth: (year: number, month: number) => import("../..").CalendarEvent[];
         clearError: () => void;
         clearAllEvents: () => Promise<void>;

package/dist/molecules/filter-group/FilterGroup.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { FilterGroupProps } from './types';
-export declare function FilterGroup<T = string>({ items, selectedValue, onSelect, multiSelect, style, contentContainerStyle, itemStyle, }: FilterGroupProps<T>): React.JSX.Element;
+export declare const FilterGroup: React.MemoExoticComponent<(<T = string>({ items, selectedValue, onSelect, multiSelect, style, contentContainerStyle, itemStyle, }: FilterGroupProps<T>) => React.JSX.Element)>;

package/dist/molecules/navigation/index.d.ts

@@ -21,7 +21,7 @@ export type { NavigationCleanup } from "./utils/NavigationCleanup";
  */
 export { AppNavigation } from "./utils/AppNavigation";
 export { TabLabel, type TabLabelProps } from "./components/TabLabel";
-export * from "./components/NavigationHeader";
+export { NavigationHeader, type NavigationHeaderProps } from "./components/NavigationHeader";
 export { useTabBarStyles, type TabBarConfig } from "./hooks/useTabBarStyles";
 export { useTabConfig, type UseTabConfigProps } from "./hooks/useTabConfig";
 /**

package/dist/offline/index.d.ts

@@ -5,7 +5,7 @@
 export type { NetworkState, OfflineState, OfflineStore, OfflineConfig, ConnectionQuality, } from './types';
 export { useOfflineStore } from './infrastructure/storage/OfflineStore';
 export { useOfflineConfigStore } from './infrastructure/storage/OfflineConfigStore';
-export { useOffline, configureOffline } from './presentation/hooks/useOffline';
+export { useOffline } from './presentation/hooks/useOffline';
 export { useOfflineState } from './presentation/hooks/useOfflineState';
 export { useOfflineWithMutations } from './presentation/hooks/useOfflineWithMutations';
 export { OfflineBanner } from './presentation/components/OfflineBanner';

package/dist/offline/presentation/hooks/useOffline.d.ts

@@ -4,11 +4,6 @@
  * Automatically subscribes to network changes via expo-network (lazy loaded)
  */
 import type { OfflineConfig } from '../../types';
-/**
- * Configure offline settings globally
- * This is a facade over the config store for backward compatibility
- */
-export declare const configureOffline: (config: OfflineConfig) => void;
 export declare const useOffline: (config?: OfflineConfig) => {
     isOnline: boolean;
     isOffline: boolean;

package/dist/tanstack/domain/repositories/BaseRepository.d.ts

@@ -3,7 +3,7 @@
  * Domain layer - Abstract repository for data operations
  *
  * Provides generic CRUD operations with TanStack Query integration.
- * Subclass this for specific entities to get type-safe data operations.
+ * Now uses common repository utilities from core/repositories.
  *
  * @example
  * ```typescript
@@ -51,6 +51,10 @@ export declare abstract class BaseRepository<TData, TCreateVariables = unknown,
      * Query key factory for this repository
      */
     readonly keys: ReturnType<typeof createQueryKeyFactory>;
+    /**
+     * Debug logger for this repository
+     */
+    protected readonly log: (method: string, ...args: unknown[]) => void;
     constructor(resource: string, options?: RepositoryOptions);
     /**
      * Get query client instance

package/dist/tanstack/infrastructure/monitoring/DevMonitor.d.ts

@@ -14,6 +14,7 @@ declare class DevMonitorClass {
     private statsInterval;
     private cacheSubscription;
     private isEnabled;
+    private maxMetrics;
     constructor(options?: DevMonitorOptions);
     private init;
     private trackQuery;

package/dist/utils/constants/TimeConstants.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Time Constants
+ *
+ * Centralized time-related constants to replace magic numbers
+ */
+export declare const MILLISECONDS_PER_SECOND = 1000;
+export declare const MILLISECONDS_PER_MINUTE: number;
+export declare const MILLISECONDS_PER_HOUR: number;
+export declare const MILLISECONDS_PER_DAY: number;
+export declare const SECONDS_PER_MINUTE = 60;
+export declare const SECONDS_PER_HOUR: number;
+export declare const SECONDS_PER_DAY: number;
+export declare const MINUTES_PER_HOUR = 60;
+export declare const MINUTES_PER_DAY: number;
+export declare const ONE_SECOND_MS = 1000;
+export declare const FIVE_SECONDS_MS: number;
+export declare const TEN_SECONDS_MS: number;
+export declare const THIRTY_SECONDS_MS: number;
+export declare const ONE_MINUTE_MS: number;
+export declare const FIVE_MINUTES_MS: number;
+export declare const TEN_MINUTES_MS: number;
+export declare const THIRTY_MINUTES_MS: number;
+export declare const ONE_HOUR_MS: number;
+export declare const ONE_DAY_MS: number;
+export declare const DEFAULT_TIMEOUT_MS: number;
+export declare const DEFAULT_LONG_TIMEOUT_MS: number;
+export declare const DEFAULT_CACHE_TTL_MS: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.27.15",
+  "version": "4.27.17",
   "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 - TanStack persistence and expo-image-manipulator now lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",
@@ -208,13 +208,14 @@
     "url": "https://github.com/umituz/react-native-design-system"
   },
   "peerDependencies": {
-    "expo": ">=54.0.0",
+    "@react-native-community/datetimepicker": ">=8.0.0",
     "@react-navigation/bottom-tabs": ">=7.0.0",
     "@react-navigation/native": ">=7.0.0",
     "@react-navigation/stack": ">=7.0.0",
     "@tanstack/query-async-storage-persister": ">=5.0.0",
     "@tanstack/react-query": ">=5.0.0",
     "@tanstack/react-query-persist-client": ">=5.0.0",
+    "expo": ">=54.0.0",
     "expo-application": ">=5.0.0",
     "expo-clipboard": ">=8.0.0",
     "expo-crypto": ">=13.0.0",
@@ -230,10 +231,9 @@
     "react": ">=19.0.0",
     "react-native": "*",
     "react-native-gesture-handler": ">=2.20.0",
+    "react-native-keyboard-controller": ">=1.0.0",
     "react-native-safe-area-context": ">=5.6.2",
-    "zustand": ">=5.0.0",
-    "@react-native-community/datetimepicker": ">=8.0.0",
-    "react-native-keyboard-controller": ">=1.0.0"
+    "zustand": ">=5.0.0"
   },
   "peerDependenciesMeta": {
     "react-native-keyboard-controller": {
@@ -298,13 +298,18 @@
     "@eslint/js": "^9.39.2",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-community/datetimepicker": "^8.5.1",
+    "@react-navigation/bottom-tabs": "^7.15.5",
+    "@react-navigation/native": "^7.1.33",
+    "@react-navigation/stack": "^7.8.5",
     "@tanstack/query-async-storage-persister": "^5.66.7",
     "@tanstack/react-query": "^5.66.7",
     "@tanstack/react-query-persist-client": "^5.66.7",
     "@testing-library/react": "^16.3.1",
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^30.0.0",
-    "@types/react": "^19.1.0",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
+    "@types/react-native": "^0.72.8",
     "@typescript-eslint/eslint-plugin": "^8.50.1",
     "@typescript-eslint/parser": "^8.50.1",
     "eslint": "^9.39.2",

package/src/atoms/GlassView/GlassView.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 import { StyleSheet, ViewStyle, StyleProp, View } from 'react-native';
-// Remove expo-blur import to fix native module error
-// import { BlurView, BlurTint } from 'expo-blur';
 import { useDesignSystemTheme } from '../../theme';
 import { intensityToOpacity } from '../../utils/math';
 

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

@@ -5,7 +5,7 @@
  * Extracted from AtomicPicker for better separation of concerns.
  */
 
-import React from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { View, TouchableOpacity, GestureResponderEvent } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
 import { PickerOption } from '../types';
@@ -30,30 +30,36 @@ export const PickerChips: React.FC<PickerChipsProps> = React.memo(({
   const tokens = useAppDesignTokens();
   const closeIcon = useIconName('close');
 
-  const chipContainerStyles = getChipContainerStyles(tokens);
-  const chipStyles = getChipStyles(tokens);
-  const chipTextStyles = getChipTextStyles(tokens);
+  // Memoize styles to prevent recalculation
+  const chipContainerStyles = useMemo(() => getChipContainerStyles(tokens), [tokens]);
+  const chipStyles = useMemo(() => getChipStyles(tokens), [tokens]);
+  const chipTextStyles = useMemo(() => getChipTextStyles(tokens), [tokens]);
 
-  if (selectedOptions.length === 0) return null;
+  // Memoized chip renderer - handleRemove created inline to avoid useCallback inside callback
+  const renderChip = useCallback((opt: PickerOption) => {
+    const handleRemove = (e: GestureResponderEvent) => {
+      e.stopPropagation();
+      onRemoveChip(opt.value);
+    };
+
+    return (
+      <View key={opt.value} style={chipStyles}>
+        <AtomicText style={chipTextStyles}>{opt.label}</AtomicText>
+        <TouchableOpacity
+          onPress={handleRemove}
+          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          accessibilityRole="button"
+          accessibilityLabel={`Remove ${opt.label}`}
+        >
+          <AtomicIcon name={closeIcon} size="sm" color="primary" />
+        </TouchableOpacity>
+      </View>
+    );
+  }, [chipStyles, chipTextStyles, closeIcon, onRemoveChip]);
 
   return (
     <View style={chipContainerStyles}>
-      {selectedOptions.map((opt) => (
-        <View key={opt.value} style={chipStyles}>
-          <AtomicText style={chipTextStyles}>{opt.label}</AtomicText>
-          <TouchableOpacity
-            onPress={(e: GestureResponderEvent) => {
-              e.stopPropagation();
-              onRemoveChip(opt.value);
-            }}
-            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-            accessibilityRole="button"
-            accessibilityLabel={`Remove ${opt.label}`}
-          >
-            <AtomicIcon name={closeIcon} size="sm" color="primary" />
-          </TouchableOpacity>
-        </View>
-      ))}
+      {selectedOptions.map(renderChip)}
     </View>
   );
 });

package/src/core/cache/index.ts

@@ -8,8 +8,9 @@
 export { UnifiedCache } from './domain/UnifiedCache';
 export type { UnifiedCacheConfig } from './domain/UnifiedCache';
 
-export { CleanupStrategy, IntervalCleanupStrategy, TimeoutCleanupStrategy } from './domain/CleanupStrategy';
-export type { CleanupType } from './domain/CleanupStrategy';
+export type { CleanupStrategy } from './domain/CleanupStrategy';
+export { IntervalCleanupStrategy, TimeoutCleanupStrategy } from './domain/CleanupStrategy';
+export type { CleanupType } from './domain/types';
 
 export { CacheFactory } from './infrastructure/CacheFactory';
 

package/src/core/index.ts

@@ -6,10 +6,12 @@
  */
 
 // Cache
-export { UnifiedCache, CacheFactory } from './cache/domain/UnifiedCache';
-export { CleanupStrategy, IntervalCleanupStrategy, TimeoutCleanupStrategy } from './cache/domain/CleanupStrategy';
+export { UnifiedCache } from './cache/domain/UnifiedCache';
+export { CacheFactory } from './cache/infrastructure/CacheFactory';
+export type { CleanupStrategy } from './cache/domain/CleanupStrategy';
+export { IntervalCleanupStrategy, TimeoutCleanupStrategy } from './cache/domain/CleanupStrategy';
 export type { UnifiedCacheConfig } from './cache/domain/UnifiedCache';
-export type { CacheEntry, CacheConfig } from './cache/domain/types';
+export type { CacheEntry, CacheConfig, CleanupType } from './cache/domain/types';
 
 // Permissions
 export { PermissionHandler } from './permissions/domain/PermissionHandler';

package/src/core/repositories/domain/RepositoryUtils.ts

@@ -12,7 +12,7 @@ import type { RepositoryOptions, ListParams } from './types';
  */
 const DEFAULT_CACHE_OPTIONS = {
   staleTime: 5 * 60 * 1000, // 5 minutes
-  gcTime: 10 * 60 * 1000, // 10 minutes (formerly cacheTime)
+  gcTime: 10 * 60 * 1000, // 10 minutes
 };
 
 /**
@@ -43,10 +43,10 @@ export function getCacheOptions(options: RepositoryOptions): {
   staleTime: number;
   gcTime: number;
 } {
-  const merged = mergeRepositoryOptions(options);
+  const cache = options.cache ?? {};
   return {
-    staleTime: merged.cache.staleTime,
-    gcTime: merged.cache.gcTime,
+    staleTime: cache.staleTime ?? DEFAULT_CACHE_OPTIONS.staleTime,
+    gcTime: cache.gcTime ?? DEFAULT_CACHE_OPTIONS.gcTime,
   };
 }
 

package/src/core/repositories/domain/types.ts

@@ -53,7 +53,7 @@ export interface UpdateParams<TVariables> {
 export type QueryKeyFactory = {
   all: () => readonly string[];
   lists: () => readonly string[];
-  list: (params: ListParams) => readonly string[];
+  list: (params: ListParams) => readonly unknown[];
   details: () => readonly string[];
-  detail: (id: string | number) => readonly string[];
+  detail: (id: string | number) => readonly unknown[];
 };

package/src/hooks/index.ts

@@ -20,11 +20,6 @@
 
 export {
   useAppDesignTokens,
-  useDesignSystemTheme,
-  useTheme,
-  useThemedStyles,
-  useThemedStyleSheet,
-  useCommonStyles,
 } from '../theme/hooks/useAppDesignTokens';
 
 export { useTheme as useThemeStore } from '../theme/infrastructure/stores/themeStore';
@@ -35,9 +30,10 @@ export { useTheme as useThemeStore } from '../theme/infrastructure/stores/themeS
 
 export {
   useResponsive,
-  useBreakpoint,
-  useOrientation,
-  type Breakpoint,
+  useScreenWidth,
+  useScreenHeight,
+  useScreenDimensions,
+  type UseResponsiveReturn,
 } from '../responsive';
 
 // =============================================================================
@@ -45,7 +41,6 @@ export {
 // =============================================================================
 
 export {
-  useSafeArea,
   useSafeAreaInsets,
 } from '../safe-area';
 
@@ -55,8 +50,8 @@ export {
 
 export {
   useInfiniteScroll,
-  type UseInfiniteScrollOptions,
-  type UseInfiniteScrollResult,
+  type InfiniteScrollConfig,
+  type UseInfiniteScrollReturn,
 } from '../infinite-scroll';
 
 // =============================================================================
@@ -65,7 +60,7 @@ export {
 
 export {
   useOffline,
-  type NetworkStatus,
+  type NetworkState,
 } from '../offline';
 
 // =============================================================================
@@ -73,9 +68,11 @@ export {
 // =============================================================================
 
 export {
-  useDeviceContext,
   useDeviceInfo,
+  useDeviceCapabilities,
+  useDeviceId,
   type DeviceInfo,
+  type AnonymousUser,
 } from '../device';
 
 // =============================================================================
@@ -84,8 +81,14 @@ export {
 
 export {
   useStorage,
-  useAsyncStorage,
-  useSecureStorage,
+  useStorageState,
+  useStore,
+  usePersistentCache,
+  useCache,
+  useCachedValue,
+  useCacheState,
+  type PersistentCacheOptions,
+  type PersistentCacheResult,
 } from '../storage';
 
 // =============================================================================
@@ -93,10 +96,8 @@ export {
 // =============================================================================
 
 export {
-  useImagePicker,
-  useImageLibrary,
-  useCamera,
-  type ImagePickerResult,
+  useMedia,
+  type MediaPickerResult,
 } from '../media';
 
 // =============================================================================
@@ -105,7 +106,6 @@ export {
 
 export {
   useTimezone,
-  useLocalTime,
   type TimezoneInfo,
 } from '../timezone';
 
@@ -115,9 +115,6 @@ export {
 
 export {
   useHaptics,
-  useImpact,
-  useNotification,
-  useSelection,
 } from '../haptics';
 
 // =============================================================================
@@ -125,6 +122,6 @@ export {
 // =============================================================================
 
 export {
-  useLoading,
-  useLoadingState,
+  useGlobalLoading,
+  type LoadingState,
 } from '../loading';

package/src/image/presentation/components/ImageGallery.tsx

@@ -20,6 +20,29 @@ try {
   // expo-image not installed — using React Native Image fallback
 }
 
+// Memoized image component (outside main component to avoid dependency issues)
+const GalleryImage = React.memo<{ item: ImageViewerItem; style: any }>(({ item, style }) => (
+  <View style={style.imageWrapper}>
+    {ExpoImage ? (
+      <ExpoImage
+        source={{ uri: item.uri }}
+        style={style.fullImage}
+        contentFit="contain"
+        cachePolicy="memory-disk"
+        onError={() => { if (__DEV__) console.warn('[ImageGallery] Failed to load image:', item.uri); }}
+      />
+    ) : (
+      <RNImage
+        source={{ uri: item.uri }}
+        style={style.fullImage}
+        resizeMode="contain"
+        onError={() => { if (__DEV__) console.warn('[ImageGallery] Failed to load image:', item.uri); }}
+      />
+    )}
+  </View>
+));
+GalleryImage.displayName = 'GalleryImage';
+
 export interface ImageGalleryProps extends ImageGalleryOptions {
   images: ImageViewerItem[];
   visible: boolean;
@@ -44,7 +67,6 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
   const insets = useSafeAreaInsets();
   const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = useWindowDimensions();
   const currentIndexRef = useRef(index);
-  const [, forceRender] = React.useReducer((x: number) => x + 1, 0);
 
   const styles = useMemo(() => StyleSheet.create({
     container: { flex: 1 },
@@ -81,30 +103,12 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
     if (nextIndex !== currentIndexRef.current) {
       currentIndexRef.current = nextIndex;
       onIndexChange?.(nextIndex);
-      forceRender();
     }
   }, [onIndexChange, SCREEN_WIDTH, images.length]);
 
   const renderItem = useCallback(({ item }: { item: ImageViewerItem }) => (
-    <View style={styles.imageWrapper}>
-      {ExpoImage ? (
-        <ExpoImage
-          source={{ uri: item.uri }}
-          style={styles.fullImage}
-          contentFit="contain"
-          cachePolicy="memory-disk"
-          onError={() => { if (__DEV__) console.warn('[ImageGallery] Failed to load image:', item.uri); }}
-        />
-      ) : (
-        <RNImage
-          source={{ uri: item.uri }}
-          style={styles.fullImage}
-          resizeMode="contain"
-          onError={() => { if (__DEV__) console.warn('[ImageGallery] Failed to load image:', item.uri); }}
-        />
-      )}
-    </View>
-  ), [styles]);
+    <GalleryImage item={item} style={{ imageWrapper: styles.imageWrapper, fullImage: styles.fullImage }} />
+  ), [styles.imageWrapper, styles.fullImage]);
 
   const getItemLayout = useCallback((_: unknown, i: number) => ({
     length: SCREEN_WIDTH,