@umituz/react-native-design-system 4.25.39 → 4.25.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.39",
+  "version": "4.25.40",
   "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",
@@ -225,6 +225,39 @@
     "expo-application": {
       "optional": true
     },
+    "expo-clipboard": {
+      "optional": true
+    },
+    "expo-crypto": {
+      "optional": true
+    },
+    "expo-device": {
+      "optional": true
+    },
+    "expo-haptics": {
+      "optional": true
+    },
+    "expo-image": {
+      "optional": true
+    },
+    "expo-image-manipulator": {
+      "optional": true
+    },
+    "expo-image-picker": {
+      "optional": true
+    },
+    "expo-network": {
+      "optional": true
+    },
+    "expo-secure-store": {
+      "optional": true
+    },
+    "expo-sharing": {
+      "optional": true
+    },
+    "expo-video": {
+      "optional": true
+    },
     "@react-native-community/datetimepicker": {
       "optional": true
     }

package/src/atoms/image/AtomicImage.tsx

@@ -1,23 +1,56 @@
 import React from 'react';
-import { Image as ExpoImage, ImageProps as ExpoImageProps } from 'expo-image';
+import { Image as RNImage, type StyleProp, type ImageStyle } from 'react-native';
 
-export type AtomicImageProps = ExpoImageProps & {
+// Lazy-load expo-image (optional peer dep) — falls back to React Native Image
+let ExpoImage: React.ComponentType<any> | null = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  ExpoImage = require('expo-image').Image;
+} catch {
+  // expo-image not installed — using React Native Image fallback
+}
+
+export type AtomicImageProps = {
+  source?: any;
+  style?: StyleProp<ImageStyle>;
   rounded?: boolean;
+  contentFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+  cachePolicy?: 'none' | 'disk' | 'memory' | 'memory-disk';
+  [key: string]: any;
 };
 
 export const AtomicImage: React.FC<AtomicImageProps> = ({
   style,
   rounded,
   contentFit = 'cover',
+  cachePolicy,
   ...props
 }) => {
+  const roundedStyle = rounded ? { borderRadius: 9999 } : undefined;
+
+  if (ExpoImage) {
+    return (
+      <ExpoImage
+        style={[style, roundedStyle]}
+        contentFit={contentFit}
+        cachePolicy={cachePolicy}
+        {...props}
+      />
+    );
+  }
+
+  // Fallback: React Native Image
+  const resizeModeMap: Record<string, 'cover' | 'contain' | 'stretch' | 'center'> = {
+    cover: 'cover',
+    contain: 'contain',
+    fill: 'stretch',
+    none: 'center',
+    'scale-down': 'contain',
+  };
   return (
-    <ExpoImage
-      style={[
-        style,
-        rounded && { borderRadius: 9999 }
-      ]}
-      contentFit={contentFit}
+    <RNImage
+      style={[style as StyleProp<ImageStyle>, roundedStyle]}
+      resizeMode={resizeModeMap[contentFit] ?? 'cover'}
       {...props}
     />
   );

package/src/device/detection/deviceDetection.ts

@@ -1,24 +1,28 @@
 /**
  * Device Detection Utilities
  *
- * Uses expo-device for primary device type detection (PHONE vs TABLET)
- * and screen dimensions for secondary distinctions (small vs large phone).
- *
- * Benefits:
- * - expo-device uses system-level detection on iOS (100% reliable)
- * - Uses screen diagonal on Android (more accurate than pixels)
- * - Future-proof: new devices automatically detected correctly
+ * Uses expo-device (optional) for primary device type detection.
+ * Falls back to Platform.isPad + screen dimensions when expo-device is not installed.
  */
 
-import { Dimensions } from 'react-native';
-import * as Device from 'expo-device';
+import { Dimensions, Platform } from 'react-native';
 import { DEVICE_BREAKPOINTS, LAYOUT_CONSTANTS } from '../../responsive/config';
 import { validateScreenDimensions } from '../../responsive/validation';
 
-/**
- * Device type enum for conditional rendering
- * Used for fine-grained phone size distinctions
- */
+// Lazy-load expo-device to avoid crash when native module is not available
+let _deviceModule: typeof import('expo-device') | null = null;
+
+const getDeviceModule = (): typeof import('expo-device') | null => {
+  if (_deviceModule !== null) return _deviceModule;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    _deviceModule = require('expo-device') as typeof import('expo-device');
+    return _deviceModule;
+  } catch {
+    return null;
+  }
+};
+
 export enum DeviceType {
   SMALL_PHONE = 'SMALL_PHONE',
   MEDIUM_PHONE = 'MEDIUM_PHONE',
@@ -26,12 +30,8 @@ export enum DeviceType {
   TABLET = 'TABLET',
 }
 
-/**
- * Get current screen dimensions
- */
 export const getScreenDimensions = () => {
   const { width, height } = Dimensions.get('window');
-
   try {
     validateScreenDimensions(width, height);
     return { width, height };
@@ -40,83 +40,57 @@ export const getScreenDimensions = () => {
   }
 };
 
-/**
- * Check if current device is a tablet
- * Uses expo-device for accurate system-level detection
- */
 export const isTablet = (): boolean => {
-  return Device.deviceType === Device.DeviceType.TABLET;
+  const Device = getDeviceModule();
+  if (Device) {
+    return Device.deviceType === Device.DeviceType.TABLET;
+  }
+  // Fallback: Platform.isPad (iOS) or screen width >= 600dp (Android)
+  if (Platform.isPad) return true;
+  const { width, height } = getScreenDimensions();
+  return Math.min(width, height) >= 600;
 };
 
-/**
- * Check if current device is a phone
- * Uses expo-device for accurate system-level detection
- */
 export const isPhone = (): boolean => {
-  return Device.deviceType === Device.DeviceType.PHONE;
+  return !isTablet();
 };
 
-/**
- * Check if current device is a small phone (iPhone SE, 13 mini)
- * Uses width breakpoint within phone category
- */
 export const isSmallPhone = (offset?: { width: number }): boolean => {
   if (!isPhone()) return false;
   const { width } = offset || getScreenDimensions();
   return width <= DEVICE_BREAKPOINTS.SMALL_PHONE;
 };
 
-/**
- * Check if current device is a large phone (Pro Max, Plus models)
- * Uses width breakpoint within phone category
- */
 export const isLargePhone = (offset?: { width: number }): boolean => {
   if (!isPhone()) return false;
   const { width } = offset || getScreenDimensions();
   return width >= DEVICE_BREAKPOINTS.MEDIUM_PHONE;
 };
 
-/**
- * Check if device is in landscape mode
- */
 export const isLandscape = (offset?: { width: number; height: number }): boolean => {
   const { width, height } = offset || getScreenDimensions();
   return width > height;
 };
 
-/**
- * Get current device type with fine-grained phone distinctions
- * Uses expo-device for PHONE vs TABLET, width for phone size variants
- */
 export const getDeviceType = (offset?: { width: number }): DeviceType => {
-  // Use expo-device for primary detection
   if (isTablet()) {
     return DeviceType.TABLET;
   }
-
-  // For phones, use width for size variants
   const { width } = offset || getScreenDimensions();
-
   if (width <= DEVICE_BREAKPOINTS.SMALL_PHONE) {
     return DeviceType.SMALL_PHONE;
   } else if (width <= DEVICE_BREAKPOINTS.MEDIUM_PHONE) {
     return DeviceType.MEDIUM_PHONE;
   }
-
   return DeviceType.LARGE_PHONE;
 };
 
-/**
- * Responsive spacing multiplier based on device type
- */
 export const getSpacingMultiplier = (offset?: { width: number }): number => {
   if (isTablet()) {
     return LAYOUT_CONSTANTS.SPACING_MULTIPLIER_TABLET;
   }
-
   if (isSmallPhone(offset)) {
     return LAYOUT_CONSTANTS.SPACING_MULTIPLIER_SMALL;
   }
-
   return LAYOUT_CONSTANTS.SPACING_MULTIPLIER_STANDARD;
 };

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

@@ -1,46 +1,51 @@
 /**
  * Device Info Service
  *
- * Single Responsibility: Get device information from native modules
- * Follows SOLID principles - only handles device info retrieval
+ * Single Responsibility: Get device information from native modules.
+ * Uses expo-device (optional peer dep) with safe fallback.
  */
 
-import * as Device from 'expo-device';
 import { Platform } from 'react-native';
 import * as Localization from 'expo-localization';
 import type { DeviceInfo } from '../../domain/entities/Device';
 import { safeAccess, withTimeout } from '../utils/nativeModuleUtils';
 
-/**
- * Service for retrieving device information
- */
+// Lazy-load expo-device to avoid crash when native module is not available
+let _deviceModule: typeof import('expo-device') | null = null;
+
+const getDeviceModule = (): typeof import('expo-device') | null => {
+  if (_deviceModule !== null) return _deviceModule;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    _deviceModule = require('expo-device') as typeof import('expo-device');
+    return _deviceModule;
+  } catch {
+    return null;
+  }
+};
+
 export class DeviceInfoService {
-  /**
-   * Get device information
-   * SAFE: Returns minimal info if native modules are not ready
-   */
   static async getDeviceInfo(): Promise<DeviceInfo> {
     try {
-      const totalMemoryResult = await withTimeout<number>(
-        () => Device.getMaxMemoryAsync(),
-        1000,
-      );
-      const totalMemory: number | null = totalMemoryResult ?? null;
+      const Device = getDeviceModule();
+
+      const totalMemory: number | null = Device
+        ? (await withTimeout<number>(() => Device.getMaxMemoryAsync(), 1000)) ?? null
+        : null;
 
-      const brand = safeAccess(() => Device.brand, null);
-      const manufacturer = safeAccess(() => Device.manufacturer, null);
-      const modelName = safeAccess(() => Device.modelName, null);
-      const modelId = safeAccess(() => Device.modelId, null);
-      const deviceName = safeAccess(() => Device.deviceName, null);
-      const deviceYearClass = safeAccess(() => Device.deviceYearClass, null);
-      const deviceType = safeAccess(() => Device.deviceType, null);
-      const isDevice = safeAccess(() => Device.isDevice, false);
-      const osName = safeAccess(() => Device.osName, null);
-      const osVersion = safeAccess(() => Device.osVersion, null);
-      const osBuildId = safeAccess(() => Device.osBuildId, null);
-      const platformApiLevel = safeAccess(() => Device.platformApiLevel, null);
+      const brand = Device ? safeAccess(() => Device.brand, null) : null;
+      const manufacturer = Device ? safeAccess(() => Device.manufacturer, null) : null;
+      const modelName = Device ? safeAccess(() => Device.modelName, null) : null;
+      const modelId = Device ? safeAccess(() => Device.modelId, null) : null;
+      const deviceName = Device ? safeAccess(() => Device.deviceName, null) : null;
+      const deviceYearClass = Device ? safeAccess(() => Device.deviceYearClass, null) : null;
+      const deviceType = Device ? safeAccess(() => Device.deviceType, null) : null;
+      const isDevice = Device ? safeAccess(() => Device.isDevice, false) : false;
+      const osName = Device ? safeAccess(() => Device.osName, null) : null;
+      const osVersion = Device ? safeAccess(() => Device.osVersion, null) : null;
+      const osBuildId = Device ? safeAccess(() => Device.osBuildId, null) : null;
+      const platformApiLevel = Device ? safeAccess(() => Device.platformApiLevel, null) : null;
 
-      // Localization
       const calendars = Localization.getCalendars();
       const locales = Localization.getLocales();
       const timezone = calendars?.[0]?.timeZone ?? null;
@@ -69,9 +74,6 @@ export class DeviceInfoService {
     }
   }
 
-  /**
-   * Get minimal device info (fallback)
-   */
   private static getMinimalDeviceInfo(): DeviceInfo {
     return {
       brand: null,
@@ -93,4 +95,3 @@ export class DeviceInfoService {
     };
   }
 }
-

package/src/haptics/infrastructure/services/HapticService.ts

@@ -1,34 +1,36 @@
 /**
  * Haptics Domain - Haptic Service
  *
- * Service for haptic feedback using expo-haptics.
- * Provides abstraction layer for vibration and feedback.
- *
- * @domain haptics
- * @layer infrastructure/services
+ * Service for haptic feedback using expo-haptics (optional peer dep).
+ * Falls back to noop when expo-haptics is not installed.
  */
 
-import * as Haptics from 'expo-haptics';
 import type { ImpactStyle, NotificationType, HapticPattern } from '../../domain/entities/Haptic';
 
-/**
- * Log error in development mode only
- */
+// Lazy-load expo-haptics to avoid crash when native module is not available
+let _hapticsModule: typeof import('expo-haptics') | null = null;
+
+const getHapticsModule = (): typeof import('expo-haptics') | null => {
+  if (_hapticsModule !== null) return _hapticsModule;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    _hapticsModule = require('expo-haptics') as typeof import('expo-haptics');
+    return _hapticsModule;
+  } catch {
+    return null;
+  }
+};
+
 function logError(method: string, error: unknown): void {
   if (__DEV__) {
     console.error(`[DesignSystem] HapticService.${method} error:`, error);
   }
 }
 
-
-/**
- * Haptic feedback service
- */
 export class HapticService {
-  /**
-   * Trigger impact feedback (Light, Medium, Heavy)
-   */
   static async impact(style: ImpactStyle = 'Light'): Promise<void> {
+    const Haptics = getHapticsModule();
+    if (!Haptics) return;
     try {
       await Haptics.impactAsync(
         style === 'Light' ? Haptics.ImpactFeedbackStyle.Light :
@@ -40,10 +42,9 @@ export class HapticService {
     }
   }
 
-  /**
-   * Trigger notification feedback (Success, Warning, Error)
-   */
   static async notification(type: NotificationType): Promise<void> {
+    const Haptics = getHapticsModule();
+    if (!Haptics) return;
     try {
       await Haptics.notificationAsync(
         type === 'Success' ? Haptics.NotificationFeedbackType.Success :
@@ -55,10 +56,9 @@ export class HapticService {
     }
   }
 
-  /**
-   * Trigger selection feedback (for pickers, sliders)
-   */
   static async selection(): Promise<void> {
+    const Haptics = getHapticsModule();
+    if (!Haptics) return;
     try {
       await Haptics.selectionAsync();
     } catch (error) {
@@ -66,9 +66,6 @@ export class HapticService {
     }
   }
 
-  /**
-   * Trigger haptic pattern
-   */
   static async pattern(pattern: HapticPattern): Promise<void> {
     try {
       switch (pattern) {
@@ -92,38 +89,12 @@ export class HapticService {
     }
   }
 
-  /**
-   * Common haptic patterns (convenience methods)
-   */
-  static async buttonPress(): Promise<void> {
-    await HapticService.impact('Light');
-  }
-
-  static async success(): Promise<void> {
-    await HapticService.pattern('success');
-  }
-
-  static async error(): Promise<void> {
-    await HapticService.pattern('error');
-  }
-
-  static async warning(): Promise<void> {
-    await HapticService.pattern('warning');
-  }
-
-  static async delete(): Promise<void> {
-    await HapticService.impact('Medium');
-  }
-
-  static async refresh(): Promise<void> {
-    await HapticService.impact('Light');
-  }
-
-  static async selectionChange(): Promise<void> {
-    await HapticService.pattern('selection');
-  }
-
-  static async longPress(): Promise<void> {
-    await HapticService.impact('Medium');
-  }
+  static async buttonPress(): Promise<void> { await HapticService.impact('Light'); }
+  static async success(): Promise<void> { await HapticService.pattern('success'); }
+  static async error(): Promise<void> { await HapticService.pattern('error'); }
+  static async warning(): Promise<void> { await HapticService.pattern('warning'); }
+  static async delete(): Promise<void> { await HapticService.impact('Medium'); }
+  static async refresh(): Promise<void> { await HapticService.impact('Light'); }
+  static async selectionChange(): Promise<void> { await HapticService.pattern('selection'); }
+  static async longPress(): Promise<void> { await HapticService.impact('Medium'); }
 }

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

@@ -1,139 +1,145 @@
 /**
  * Presentation - Image Gallery Component
  *
- * High-performance, premium image gallery using expo-image.
- * Replaces slow standard image components for instant loading.
+ * High-performance image gallery.
+ * Uses expo-image when available, falls back to React Native Image.
  */
 
 import React, { useCallback, useRef, useMemo } from 'react';
-import { Modal, View, StyleSheet, FlatList, useWindowDimensions, type NativeSyntheticEvent, type NativeScrollEvent } from 'react-native';
-import { Image } from 'expo-image';
+import { Modal, View, Image as RNImage, StyleSheet, FlatList, useWindowDimensions, type NativeSyntheticEvent, type NativeScrollEvent } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { ImageViewerItem, ImageGalleryOptions } from '../../domain/entities/ImageTypes';
 import { GalleryHeader } from './GalleryHeader';
 
+// Lazy-load expo-image (optional peer dep)
+let ExpoImage: React.ComponentType<any> | null = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  ExpoImage = require('expo-image').Image;
+} catch {
+  // expo-image not installed — using React Native Image fallback
+}
+
 export interface ImageGalleryProps extends ImageGalleryOptions {
-    images: ImageViewerItem[];
-    visible: boolean;
-    onDismiss: () => void;
-    index?: number;
-    onImageChange?: (uri: string, index: number) => void | Promise<void>;
-    enableEditing?: boolean;
-    title?: string;
+  images: ImageViewerItem[];
+  visible: boolean;
+  onDismiss: () => void;
+  index?: number;
+  onImageChange?: (uri: string, index: number) => void | Promise<void>;
+  enableEditing?: boolean;
+  title?: string;
 }
 
 export const ImageGallery: React.FC<ImageGalleryProps> = ({
-    images,
-    visible,
-    onDismiss,
-    index = 0,
-    backgroundColor = '#000000',
-    onIndexChange,
-    onImageChange,
-    enableEditing = false,
-    title,
+  images,
+  visible,
+  onDismiss,
+  index = 0,
+  backgroundColor = '#000000',
+  onIndexChange,
+  onImageChange,
+  enableEditing = false,
+  title,
 }) => {
-    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,
-        },
-        list: {
-            flex: 1,
-        },
-        imageWrapper: {
-            width: SCREEN_WIDTH,
-            height: SCREEN_HEIGHT,
-            justifyContent: 'center',
-            alignItems: 'center',
-        },
-        fullImage: {
-            width: '100%',
-            height: '100%',
-        },
-        footer: {
-            position: 'absolute',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            alignItems: 'center',
-        }
-    }), [SCREEN_WIDTH, SCREEN_HEIGHT]);
+  const insets = useSafeAreaInsets();
+  const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = useWindowDimensions();
+  const currentIndexRef = useRef(index);
+  const [, forceRender] = React.useReducer((x: number) => x + 1, 0);
 
-    if (visible) {
-        currentIndexRef.current = index;
-    }
-
-    const handleEdit = useCallback(async () => {
-        const currentImage = images[currentIndexRef.current];
-        if (!currentImage || !onImageChange) return;
-        await onImageChange(currentImage.uri, currentIndexRef.current);
-    }, [images, onImageChange]);
+  const styles = useMemo(() => StyleSheet.create({
+    container: { flex: 1 },
+    list: { flex: 1 },
+    imageWrapper: {
+      width: SCREEN_WIDTH,
+      height: SCREEN_HEIGHT,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    fullImage: { width: '100%', height: '100%' },
+    footer: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      alignItems: 'center',
+    },
+  }), [SCREEN_WIDTH, SCREEN_HEIGHT]);
 
-    const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
-        const nextIndex = Math.round(event.nativeEvent.contentOffset.x / SCREEN_WIDTH);
-        if (nextIndex !== currentIndexRef.current) {
-            currentIndexRef.current = nextIndex;
-            onIndexChange?.(nextIndex);
-            forceRender();
-        }
-    }, [onIndexChange, SCREEN_WIDTH]);
+  if (visible) {
+    currentIndexRef.current = index;
+  }
 
-    const renderItem = useCallback(({ item }: { item: ImageViewerItem }) => (
-        <View style={styles.imageWrapper}>
-            <Image
-                source={{ uri: item.uri }}
-                style={styles.fullImage}
-                contentFit="contain"
-                cachePolicy="memory-disk"
-            />
-        </View>
-    ), [styles]);
+  const handleEdit = useCallback(async () => {
+    const currentImage = images[currentIndexRef.current];
+    if (!currentImage || !onImageChange) return;
+    await onImageChange(currentImage.uri, currentIndexRef.current);
+  }, [images, onImageChange]);
 
-    const getItemLayout = useCallback((_: unknown, i: number) => ({
-        length: SCREEN_WIDTH,
-        offset: SCREEN_WIDTH * i,
-        index: i,
-    }), [SCREEN_WIDTH]);
+  const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const nextIndex = Math.round(event.nativeEvent.contentOffset.x / SCREEN_WIDTH);
+    if (nextIndex !== currentIndexRef.current) {
+      currentIndexRef.current = nextIndex;
+      onIndexChange?.(nextIndex);
+      forceRender();
+    }
+  }, [onIndexChange, SCREEN_WIDTH]);
 
-    if (!visible) return null;
+  const renderItem = useCallback(({ item }: { item: ImageViewerItem }) => (
+    <View style={styles.imageWrapper}>
+      {ExpoImage ? (
+        <ExpoImage
+          source={{ uri: item.uri }}
+          style={styles.fullImage}
+          contentFit="contain"
+          cachePolicy="memory-disk"
+        />
+      ) : (
+        <RNImage
+          source={{ uri: item.uri }}
+          style={styles.fullImage}
+          resizeMode="contain"
+        />
+      )}
+    </View>
+  ), [styles]);
 
-    return (
-        <Modal
-            visible={visible}
-            transparent
-            animationType="none"
-            onRequestClose={onDismiss}
-            statusBarTranslucent
-        >
-            <View style={[styles.container, { backgroundColor }]}>
-                <GalleryHeader
-                    onClose={onDismiss}
-                    onEdit={enableEditing ? handleEdit : undefined}
-                    title={title || `${currentIndexRef.current + 1} / ${images.length}`}
-                />
+  const getItemLayout = useCallback((_: unknown, i: number) => ({
+    length: SCREEN_WIDTH,
+    offset: SCREEN_WIDTH * i,
+    index: i,
+  }), [SCREEN_WIDTH]);
 
-                <FlatList
-                    data={images}
-                    renderItem={renderItem}
-                    horizontal
-                    pagingEnabled
-                    showsHorizontalScrollIndicator={false}
-                    initialScrollIndex={index}
-                    getItemLayout={getItemLayout}
-                    onScroll={handleScroll}
-                    scrollEventThrottle={16}
-                    keyExtractor={(item, i) => `${item.uri}-${i}`}
-                    style={styles.list}
-                />
+  if (!visible) return null;
 
-                <View style={[styles.footer, { paddingBottom: Math.max(insets.bottom, 20) }]}>
-                </View>
-            </View>
-        </Modal>
-    );
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="none"
+      onRequestClose={onDismiss}
+      statusBarTranslucent
+    >
+      <View style={[styles.container, { backgroundColor }]}>
+        <GalleryHeader
+          onClose={onDismiss}
+          onEdit={enableEditing ? handleEdit : undefined}
+          title={title || `${currentIndexRef.current + 1} / ${images.length}`}
+        />
+        <FlatList
+          data={images}
+          renderItem={renderItem}
+          horizontal
+          pagingEnabled
+          showsHorizontalScrollIndicator={false}
+          initialScrollIndex={index}
+          getItemLayout={getItemLayout}
+          onScroll={handleScroll}
+          scrollEventThrottle={16}
+          keyExtractor={(item, i) => `${item.uri}-${i}`}
+          style={styles.list}
+        />
+        <View style={[styles.footer, { paddingBottom: Math.max(insets.bottom, 20) }]} />
+      </View>
+    </Modal>
+  );
 };

package/src/onboarding/domain/entities/OnboardingSlide.ts

@@ -4,7 +4,9 @@
  * Domain entity representing a single onboarding slide
  */
 
-import type { VideoSource } from "expo-video";
+// Compatible with expo-video VideoSource (optional peer dep)
+type VideoSource = string | { uri: string; headers?: Record<string, string>; [key: string]: unknown };
+
 import type { ImageSourceType } from "../types/ImageSourceType";
 import type { OnboardingQuestion, OnboardingAnswerValue } from "./OnboardingQuestion";
 
@@ -23,132 +25,26 @@ export type ContentPosition = "center" | "bottom";
  * Each slide represents one step in the onboarding flow
  */
 export interface OnboardingSlide {
-  /**
-   * Unique identifier for the slide
-   */
   id: string;
-
-  /**
-   * Slide type (default: "info")
-   */
   type?: SlideType;
-
-  /**
-   * Slide title
-   */
   title: string;
-
-  /**
-   * Slide description/body text
-   */
   description: string;
-
-  /**
-   * Icon to display (emoji or icon name)
-   */
   icon?: string;
-
-  /**
-   * Type of icon: 'emoji' or 'icon' (default: 'icon')
-   */
   iconType?: 'emoji' | 'icon';
-
-  /**
-   * Hide icon even if provided (default: false)
-   */
   hideIcon?: boolean;
-
-  /**
-   * Content position: 'center' or 'bottom' (default: 'center')
-   */
   contentPosition?: ContentPosition;
-
-  /**
-   * Background color for the slide background (optional)
-   * Only used if useCustomBackground is true
-   */
   backgroundColor?: string;
-
-  /**
-   * Use custom background color instead of theme defaults (default: false)
-   * If true and backgroundColor is provided, it will be used
-   */
   useCustomBackground?: boolean;
-
-  /**
-   * Optional image URL (alternative to icon)
-   */
   image?: ImageSourceType;
-
-  /**
-   * Optional background image (URL or require path)
-   * Stretches to fill the screen behind content
-   */
   backgroundImage?: ImageSourceType;
-
-  /**
-   * Optional multiple background images (URLs or require paths)
-   * Displayed in a collage/grid pattern behind content
-   * If provided, takes precedence over single backgroundImage
-   */
   backgroundImages?: ImageSourceType[];
-
-  /**
-   * Layout pattern for multiple background images
-   * 'grid' - Equal sized grid (auto columns)
-   * 'dense' - Dense grid with many small images (6 columns)
-   * 'masonry' - Pinterest-style masonry layout
-   * 'collage' - Random sizes and positions
-   * 'scattered' - Small randomly placed images
-   * 'tiles' - Fixed size tiles centered
-   * 'honeycomb' - Hexagonal pattern
-   * Default: 'grid'
-   */
   backgroundImagesLayout?: 'grid' | 'dense' | 'masonry' | 'collage' | 'scattered' | 'tiles' | 'honeycomb';
-
-  /**
-   * Number of columns for grid-based layouts
-   * Only applies to: grid, dense, masonry, tiles
-   */
   backgroundImagesColumns?: number;
-
-  /**
-   * Gap between images in pixels
-   */
   backgroundImagesGap?: number;
-
-  /**
-   * Border radius for images
-   */
   backgroundImagesBorderRadius?: number;
-
-  /**
-   * Optional background video (URL or require path)
-   * Plays in loop behind content
-   */
   backgroundVideo?: VideoSource;
-
-  /**
-   * Opacity of the overlay color on top of background media
-   * Range: 0.0 to 1.0 (Default: 0.5)
-   */
   overlayOpacity?: number;
-
-  /**
-   * Optional features list to display
-   */
   features?: string[];
-
-  /**
-   * Optional question for personalization
-   * Only used when type is "question"
-   */
   question?: OnboardingQuestion;
-
-  /**
-   * Skip this slide if condition is met
-   * @param answers - Previous answers
-   * @returns true to skip, false to show
-   */
   skipIf?: (answers: Record<string, OnboardingAnswerValue>) => boolean;
 }

package/src/onboarding/domain/types/ImageSourceType.ts

@@ -1,8 +1,10 @@
 /**
  * Image Source Type
- * Domain type for image sources used in onboarding slides
+ * Domain type for image sources used in onboarding slides.
+ * Compatible with expo-image ImageSource (optional peer dep).
  */
 
-import type { ImageSource } from "expo-image";
-
-export type ImageSourceType = ImageSource | number | string;
+export type ImageSourceType =
+  | number  // require() static assets
+  | string  // URI string
+  | { uri: string; headers?: Record<string, string>; cacheKey?: string; [key: string]: unknown };

package/src/onboarding/presentation/components/BackgroundImageCollage.tsx

@@ -1,11 +1,11 @@
 /**
  * Background Image Collage Component
- * Displays multiple images in various layout patterns with safe area support
+ * Displays multiple images in various layout patterns with safe area support.
+ * Uses expo-image when available, falls back to React Native Image.
  */
 
 import React, { useMemo } from "react";
-import { View, StyleSheet } from "react-native";
-import { Image } from "expo-image";
+import { View, Image as RNImage, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "../../../safe-area/hooks/useSafeAreaInsets";
 import {
   generateGridLayout,
@@ -20,6 +20,15 @@ import {
   type ImageSourceType,
 } from "../../infrastructure/utils/layouts";
 
+// Lazy-load expo-image (optional peer dep)
+let ExpoImage: React.ComponentType<any> | null = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  ExpoImage = require('expo-image').Image;
+} catch {
+  // expo-image not installed — using React Native Image fallback
+}
+
 export type CollageLayout =
   | "grid"
   | "dense"
@@ -62,28 +71,34 @@ export const BackgroundImageCollage: React.FC<BackgroundImageCollageProps> = ({
 
   const imageLayouts = useMemo(() => {
     if (!images || images.length === 0) return [];
-
     const generator = LAYOUT_GENERATORS[layout] ?? generateGridLayout;
-    return generator(images, {
-      columns,
-      gap,
-      borderRadius,
-      safeAreaInsets: insets
-    });
+    return generator(images, { columns, gap, borderRadius, safeAreaInsets: insets });
   }, [images, layout, columns, gap, borderRadius, insets]);
 
   if (imageLayouts.length === 0) return null;
 
   return (
     <View style={[StyleSheet.absoluteFill, { opacity }]} pointerEvents="none">
-      {imageLayouts.map((item) => (
-        <Image
-          key={String(item.source)}
-          source={item.source}
-          style={item.style}
-          contentFit="cover"
-        />
-      ))}
+      {imageLayouts.map((item) => {
+        if (ExpoImage) {
+          return (
+            <ExpoImage
+              key={String(item.source)}
+              source={item.source}
+              style={item.style}
+              contentFit="cover"
+            />
+          );
+        }
+        return (
+          <RNImage
+            key={String(item.source)}
+            source={item.source as any}
+            style={item.style as any}
+            resizeMode="cover"
+          />
+        );
+      })}
     </View>
   );
 };

package/src/onboarding/presentation/components/BackgroundVideo.tsx

@@ -1,25 +1,47 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { useVideoPlayer, VideoView } from 'expo-video';
-import type { VideoSource, VideoPlayer } from 'expo-video';
+
+// Compatible with expo-video VideoSource (optional peer dep)
+type VideoSource = string | { uri: string; [key: string]: unknown };
 
 interface BackgroundVideoProps {
-    source: VideoSource;
-    overlayOpacity?: number;
+  source: VideoSource;
+  overlayOpacity?: number;
 }
 
-export const BackgroundVideo = ({ source, overlayOpacity = 0.5 }: BackgroundVideoProps) => {
-    const player = useVideoPlayer(source, (p: VideoPlayer) => {
-        p.loop = true;
-        p.play();
-        p.muted = true;
+// Try to build the video component only when expo-video is available
+let BackgroundVideoImpl: React.FC<BackgroundVideoProps> | null = null;
+
+try {
+  const { useVideoPlayer, VideoView } = require('expo-video'); // eslint-disable-line @typescript-eslint/no-require-imports
+
+  BackgroundVideoImpl = ({ source, overlayOpacity = 0.5 }: BackgroundVideoProps) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const player = useVideoPlayer(source, (p: any) => {
+      p.loop = true;
+      p.play();
+      p.muted = true;
     });
 
     return (
-        <View style={StyleSheet.absoluteFill}>
-            <VideoView player={player} style={StyleSheet.absoluteFill} contentFit="cover" nativeControls={false} />
-            <View style={[StyleSheet.absoluteFill, { backgroundColor: `rgba(0,0,0,${overlayOpacity})` }]} />
-        </View>
+      <View style={StyleSheet.absoluteFill}>
+        <VideoView player={player} style={StyleSheet.absoluteFill} contentFit="cover" nativeControls={false} />
+        <View style={[StyleSheet.absoluteFill, { backgroundColor: `rgba(0,0,0,${overlayOpacity})` }]} />
+      </View>
     );
-};
+  };
+} catch {
+  // expo-video not installed — BackgroundVideoImpl stays null
+}
 
+export const BackgroundVideo: React.FC<BackgroundVideoProps> = (props) => {
+  if (BackgroundVideoImpl) {
+    return React.createElement(BackgroundVideoImpl, props);
+  }
+  // Fallback: dark overlay only
+  return (
+    <View
+      style={[StyleSheet.absoluteFill, { backgroundColor: `rgba(0,0,0,${props.overlayOpacity ?? 0.5})` }]}
+    />
+  );
+};

package/src/uuid/infrastructure/utils/UUIDUtils.ts

@@ -1,46 +1,49 @@
 /**
  * UUID Generation Utility
  *
- * Provides cross-platform UUID generation using expo-crypto.
- * Compatible with React Native (iOS, Android) and Web.
+ * Provides cross-platform UUID generation.
+ * Uses expo-crypto when available, falls back to Math.random-based v4 UUID.
  */
 
-import * as Crypto from 'expo-crypto';
 import type { UUID } from '../../types/UUID';
 import { UUID_CONSTANTS } from '../../types/UUID';
 
+// Lazy-load expo-crypto to avoid crash when native module is not available
+let _cryptoModule: typeof import('expo-crypto') | null = null;
+
+const getCryptoModule = (): typeof import('expo-crypto') | null => {
+  if (_cryptoModule !== null) return _cryptoModule;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    _cryptoModule = require('expo-crypto') as typeof import('expo-crypto');
+    return _cryptoModule;
+  } catch {
+    return null;
+  }
+};
+
+const fallbackUUID = (): UUID => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  }) as UUID;
+};
+
 /**
  * Generate a v4 UUID
- * Uses expo-crypto's randomUUID() for secure UUID generation
- *
- * @returns A v4 UUID string
- *
- * @example
- * ```typescript
- * import { generateUUID } from '@umituz/react-native-uuid';
- *
- * const id = generateUUID();
- * // Returns: "550e8400-e29b-41d4-a716-446655440000"
- * ```
+ * Uses expo-crypto's randomUUID() when available, otherwise Math.random fallback
  */
 export const generateUUID = (): UUID => {
-  return Crypto.randomUUID() as UUID;
+  const Crypto = getCryptoModule();
+  if (Crypto) {
+    return Crypto.randomUUID() as UUID;
+  }
+  return fallbackUUID();
 };
 
 /**
  * Validate UUID format
- * Checks if a string is a valid v4 UUID
- *
- * @param value - The value to validate
- * @returns True if the value is a valid v4 UUID
- *
- * @example
- * ```typescript
- * import { isValidUUID } from '@umituz/react-native-uuid';
- *
- * isValidUUID('550e8400-e29b-41d4-a716-446655440000'); // true
- * isValidUUID('invalid-uuid'); // false
- * ```
  */
 export const isValidUUID = (value: string): value is UUID => {
   return UUID_CONSTANTS.PATTERN.test(value);
@@ -48,19 +51,6 @@ export const isValidUUID = (value: string): value is UUID => {
 
 /**
  * Get version from UUID string
- * Returns the UUID version number (1-5) or null for NIL/invalid
- *
- * @param value - The UUID string
- * @returns UUID version number or null
- *
- * @example
- * ```typescript
- * import { getUUIDVersion } from '@umituz/react-native-uuid';
- *
- * getUUIDVersion('550e8400-e29b-41d4-a716-446655440000'); // 4
- * getUUIDVersion('00000000-0000-0000-0000-000000000000'); // 0 (NIL)
- * getUUIDVersion('invalid'); // null
- * ```
  */
 export const getUUIDVersion = (value: string): number | null => {
   if (value === UUID_CONSTANTS.NIL) {
@@ -72,4 +62,3 @@ export const getUUIDVersion = (value: string): number | null => {
 
   return (version >= 1 && version <= 5) ? version : null;
 };
-