motorinc-gallery-picker-pro 1.0.0

package/src/components/MainPhotoGallery.tsx

@@ -0,0 +1,2639 @@
+import React, {useState, useEffect, useCallback, useRef, useMemo} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  FlatList,
+  Modal,
+  SafeAreaView,
+  ActivityIndicator,
+  Alert,
+  AppState,
+  Platform,
+  NativeModules,
+  NativeEventEmitter,
+  RefreshControl,
+  Dimensions,
+} from 'react-native';
+import ImagePickerModule, {
+  PhotoAsset,
+  GalleryResult,
+  MultiSelectResult,
+  PermissionStatus,
+  SelectedImage,
+  MediaType,
+} from '../modules/ImagePickerModule';
+import {StyleSheet, ScrollView, Image} from 'react-native';
+import PhotoAssetImage from './PhotoAssetImage';
+import ImageCropper, {CropValues, ImageCropperRef} from './ImageCropper';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
+import {runOnJS} from 'react-native-worklets';
+import {
+  PlayyText,
+  IconComponent,
+  NavigationHeader,
+  icons,
+  SPACING_16,
+  SPACING_24,
+  SPACING_4,
+} from 'motorinc-global-components';
+import { ThemeContext, FontProvider, useTheme } from 'motorinc-global-components';
+const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
+
+export interface CropParams {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  scale: number;
+  aspectRatio: number;
+}
+
+export interface MainPhotoGalleryRef {
+  triggerCropCapture: () => Promise<void>;
+}
+
+interface props {
+  mediaType: MediaType;
+  renderPermissionDeniedState?: (
+    onPermissionRequest?: () => void,
+  ) => React.ReactNode;
+  multiSelect?: boolean;
+  onAssetSelected?: (asset: PhotoAsset) => void;
+  onSelectedAssetsChange?: (assets: PhotoAsset[]) => void;
+  selectedAssets?: PhotoAsset[];
+  hideSelectionHeader?: boolean; // Hide the selection mode header with Cancel/Next buttons
+  showSelectedAssetsHeader?: boolean; // Show selected assets display at top
+  onRemoveSelectedAsset?: (assetId: string) => void; // Callback to remove asset
+  onCropParamsChange?: (assetId: string, cropParams: CropParams | null) => void; // Callback for crop params
+  existingCropParams?: Map<string, CropParams>; // Existing crop parameters for images
+  onAspectRatioChange?: (aspectRatio: number) => void; // Callback for aspect ratio changes
+  onCroppedImagesReady?: (
+    croppedImages: Array<{assetId: string; dataUri: string}>,
+  ) => void; // Callback for cropped images
+  onCancel?: () => void; // Callback for cancel button
+  onNext?: (selectedAssets: PhotoAsset[]) => void; // Callback for next button
+  maxSelectionLimit?: number;
+  statusBarvalue?: number
+}
+
+const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
+  (
+    {
+      mediaType,
+      renderPermissionDeniedState,
+      multiSelect = false,
+      onAssetSelected,
+      onSelectedAssetsChange,
+      selectedAssets,
+      hideSelectionHeader = false,
+      showSelectedAssetsHeader = false,
+      onRemoveSelectedAsset,
+      onCropParamsChange,
+      existingCropParams,
+      onAspectRatioChange,
+      onCroppedImagesReady,
+      onCancel,
+      onNext,
+      maxSelectionLimit = 10,
+      statusBarvalue
+    },
+    ref,
+  ) => {
+    const translateY = useSharedValue(0);
+    const startPosition = useSharedValue(0);
+    const [assets, setAssets] = useState<PhotoAsset[]>([]);
+    const [imagePickerAssets, setimagePickerAssets] = useState<PhotoAsset[]>(
+      [],
+    );
+    const [pickerAssetIds, setPickerAssetIds] = useState<Set<string>>(
+      new Set(),
+    );
+    const [scrollEnabled, setScrollEnabled] = useState(true);
+
+    // Threshold and velocity constants
+    const SNAP_THRESHOLD = screenWidth * 0.5; // 50% of screen width
+    const VELOCITY_THRESHOLD = 1000;
+    const [loading, setLoading] = useState(false);
+    const [refreshing, setRefreshing] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+    const [permissionStatus, setPermissionStatus] =
+      useState<PermissionStatus>('not_determined');
+    const [totalCount, setTotalCount] = useState(0);
+    const [showManageModal, setShowManageModal] = useState(false);
+    const [selectedImages, setSelectedImages] = useState<SelectedImage[]>([]);
+    const [showSelectedImagesModal, setShowSelectedImagesModal] =
+      useState(false);
+    const [selectedAssetIds, setSelectedAssetIds] = useState<Set<string>>(
+      new Set(),
+    );
+    const [selectedAssetOrder, setSelectedAssetOrder] = useState<string[]>([]); // Track selection order
+    const [isSelectionMode, setIsSelectionMode] = useState(false);
+    // maxSelectionLimit is used directly from props
+    const isUpdatingFromProp = useRef(false);
+    const [aspectRatio, setAspectRatio] = useState(0.8);
+    const [imageResizeMode, setImageResizeMode] = useState<
+      'cover' | 'contain' | 'stretch' | 'repeat' | 'center' | 'none'
+    >('contain');
+
+    const cropScale = useSharedValue(1);
+    const cropTranslateX = useSharedValue(0);
+    const cropTranslateY = useSharedValue(0);
+    const savedScale = useSharedValue(1);
+    const savedTranslateX = useSharedValue(0);
+    const savedTranslateY = useSharedValue(0);
+
+    // Store refs for ImageCropper components
+    const imageCropperRefs = React.useRef<
+      Map<string, React.RefObject<ImageCropperRef | null>>
+    >(new Map());
+
+    // Ref for the selected assets FlatList
+    const selectedAssetsFlatListRef = React.useRef<FlatList>(null);
+    const [currentSelectedIndex, setCurrentSelectedIndex] = useState(0);
+
+    // Function to get or create ref for an asset
+    const getCropperRef = (assetId: string) => {
+      if (!imageCropperRefs.current.has(assetId)) {
+        imageCropperRefs.current.set(
+          assetId,
+          React.createRef<ImageCropperRef | null>(),
+        );
+      }
+      return imageCropperRefs.current.get(assetId)!;
+    };
+
+    // Functions to navigate through selected assets
+    const displayPreviousIndex = () => {
+      if (
+        !selectedAssets ||
+        selectedAssets.length === 0 ||
+        currentSelectedIndex === 0
+      )
+        return;
+
+      const newIndex = Math.max(0, currentSelectedIndex - 1);
+      setCurrentSelectedIndex(newIndex);
+
+      try {
+        selectedAssetsFlatListRef.current?.scrollToIndex({
+          index: newIndex,
+          animated: true,
+        });
+      } catch (error) {
+        console.log('ScrollToIndex error in displayPreviousIndex:', error);
+      }
+    };
+
+    const displayNextIndex = () => {
+      if (
+        !selectedAssets ||
+        selectedAssets.length === 0 ||
+        currentSelectedIndex >= selectedAssets.length - 1
+      )
+        return;
+
+      const newIndex = Math.min(
+        selectedAssets.length - 1,
+        currentSelectedIndex + 1,
+      );
+      setCurrentSelectedIndex(newIndex);
+
+      try {
+        selectedAssetsFlatListRef.current?.scrollToIndex({
+          index: newIndex,
+          animated: true,
+        });
+      } catch (error) {
+        console.log('ScrollToIndex error in displayNextIndex:', error);
+      }
+    };
+
+    // Function to capture all cropped images
+    const captureAllCroppedImages = async () => {
+      if (!selectedAssets || selectedAssets.length === 0) return;
+
+      try {
+        const croppedImages = [];
+        for (const asset of selectedAssets) {
+          const cropperRef = getCropperRef(asset.id);
+          if (cropperRef.current) {
+            const dataUri = await cropperRef.current.captureImage();
+            croppedImages.push({assetId: asset.id, dataUri});
+          }
+        }
+
+        if (onCroppedImagesReady) {
+          onCroppedImagesReady(croppedImages);
+        }
+      } catch (error) {
+        console.error('Error capturing cropped images:', error);
+      }
+    };
+
+    // Expose the capture function via ref
+    React.useImperativeHandle(ref, () => ({
+      triggerCropCapture: captureAllCroppedImages,
+    }));
+
+    // Reset and adjust crop values when aspect ratio changes
+    useEffect(() => {
+      // Calculate crop dimensions
+      let cropWidth = screenWidth;
+      let cropHeight = screenWidth;
+
+      if (aspectRatio === 0.8) {
+        cropWidth = screenWidth * 0.8 * 1.07;
+        cropHeight = screenWidth * 1.07;
+      } else if (aspectRatio === 16 / 9) {
+        cropWidth = screenWidth;
+        cropHeight = screenWidth / (16 / 9);
+      }
+
+      // Calculate minimum scale to fill crop area completely
+      // Since container now matches crop dimensions, minimum scale should be 1
+      const minScale = 1;
+
+      // Reset to center position with proper scale
+      cropTranslateX.value = withTiming(0, {duration: 300});
+      cropTranslateY.value = withTiming(0, {duration: 300});
+      cropScale.value = withTiming(minScale, {duration: 300});
+
+      // Notify parent component about aspect ratio change
+      if (onAspectRatioChange) {
+        onAspectRatioChange(aspectRatio);
+      }
+
+      // Reset crop parameters for all selected images
+      if (selectedAssets && onCropParamsChange) {
+        selectedAssets.forEach(asset => {
+          const defaultCropParams: CropParams = {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            scale: 1, // Reset scale to 1 as requested
+            aspectRatio: aspectRatio,
+          };
+          onCropParamsChange(asset.id, defaultCropParams);
+        });
+      }
+    }, [aspectRatio]); // Only depend on aspectRatio, not selectedAssets
+
+    const imageSize = (screenWidth - 24) / 3 - 4;
+
+    const renderSelectedAsset = ({item}: {item: PhotoAsset}) => {
+      // Get crop dimensions based on aspect ratio
+      const getCropDimensions = () => {
+        if (aspectRatio === 0.8) {
+          return {width: screenWidth * 0.8 * 1.07, height: screenWidth * 1.07};
+        } else if (aspectRatio === 16 / 9) {
+          return {width: screenWidth, height: screenWidth / (16 / 9)};
+        }
+        return {width: screenWidth, height: screenWidth};
+      };
+
+      const {width: cropWidth, height: cropHeight} = getCropDimensions();
+
+      // Get existing crop params or use default
+      const existingCrop = existingCropParams?.get(item.id);
+      const initialCropValues = existingCrop
+        ? {
+            scale: existingCrop.scale,
+            translateX: existingCrop.x,
+            translateY: existingCrop.y,
+          }
+        : undefined;
+
+      const handleCropChange = (values: CropValues) => {
+        if (onCropParamsChange) {
+          const cropParams: CropParams = {
+            x: values.translateX,
+            y: values.translateY,
+            width: 0,
+            height: 0,
+            scale: values.scale,
+            aspectRatio: aspectRatio,
+          };
+          onCropParamsChange(item.id, cropParams);
+        }
+      };
+
+      return (
+        <View style={[styles.selectedAssetWrapper, {height: 1.07 * screenWidth, width: screenWidth}]}> 
+          <ImageCropper
+            ref={getCropperRef(item.id)}
+            key={`${item.id}-${aspectRatio}`}
+            asset={item}
+            containerWidth={screenWidth}
+            containerHeight={
+              aspectRatio === 0.8 ? screenWidth * 1.07 : screenWidth
+            }
+            cropWidth={cropWidth}
+            cropHeight={cropHeight}
+            initialCropValues={initialCropValues}
+            onCropChange={handleCropChange}
+            enableGestures={true}
+            showOverlay={true}
+            showGrid={true}
+          />
+        </View>
+      );
+    };
+
+    // Function to notify parent component about crop parameter changes
+    const notifyCropParamsChange = useCallback(() => {
+      if (onCropParamsChange && selectedAssets && selectedAssets.length > 0) {
+        // Get the currently displayed asset (first one for now)
+        const currentAsset = selectedAssets[0];
+        if (currentAsset) {
+          const cropParams: CropParams = {
+            x: cropTranslateX.value,
+            y: cropTranslateY.value,
+            width: 0, // Not needed for recreation
+            height: 0, // Not needed for recreation
+            scale: cropScale.value,
+            aspectRatio: aspectRatio,
+          };
+          onCropParamsChange(currentAsset.id, cropParams);
+        }
+      }
+    }, [onCropParamsChange, selectedAssets, aspectRatio]);
+
+    // Function to extract crop parameters for the current image
+    const getCropParams = () => {
+      const getCropDimensions = () => {
+        if (aspectRatio === 0.8) {
+          return {
+            width: screenWidth * 0.8 * 1.07,
+            height: screenWidth,
+          };
+        } else if (aspectRatio === 16 / 9) {
+          return {
+            width: screenWidth,
+            height: screenWidth / (16 / 9),
+          };
+        } else {
+          return {
+            width: screenWidth,
+            height: screenWidth,
+          };
+        }
+      };
+
+      const {width: cropWidth, height: cropHeight} = getCropDimensions();
+      const cropX = (screenWidth - cropWidth) / 2;
+      const cropY = (screenWidth - cropHeight) / 2;
+
+      // Calculate the actual crop area on the original image
+      const imageWidth = screenWidth * cropScale.value;
+      const imageHeight = screenWidth * cropScale.value;
+
+      // Current image position
+      const imageX = cropTranslateX.value - (imageWidth - screenWidth) / 2;
+      const imageY = cropTranslateY.value - (imageHeight - screenWidth) / 2;
+
+      // Crop area relative to image
+      const relativeCropX = cropX - imageX;
+      const relativeCropY = cropY - imageY;
+
+      return {
+        x: relativeCropX / cropScale.value,
+        y: relativeCropY / cropScale.value,
+        width: cropWidth / cropScale.value,
+        height: cropHeight / cropScale.value,
+        scale: cropScale.value,
+        aspectRatio: cropWidth / cropHeight,
+      };
+    };
+
+    const renderAssetItem = ({item}: {item: PhotoAsset}) => {
+      const isSelected = selectedAssetIds.has(item.id);
+      const selectionIndex = selectedAssetOrder.indexOf(item.id) + 1;
+      const isVideo = item.mediaType === 'video';
+
+      return (
+        <TouchableOpacity
+          style={[styles.assetContainer, {width: imageSize, height: imageSize}]}
+          onPress={() => handleAssetPress(item)}
+          onLongPress={() => handleAssetLongPress(item)}>
+          <PhotoAssetImage
+            uri={item.uri}
+            style={[styles.assetImage, isSelected && styles.selectedAssetImage]}
+            width={imageSize}
+            height={imageSize}
+          />
+
+          {/* Video indicator */}
+          {isVideo && (
+            <View style={styles.videoIndicator}>
+              <Text style={styles.videoIcon}>🎥</Text>
+              {item.duration && (
+                <Text style={styles.videoDuration}>
+                  {Math.floor(item.duration / 60)}:
+                  {(item.duration % 60).toFixed(0).padStart(2, '0')}
+                </Text>
+              )}
+            </View>
+          )}
+
+          {/* Selection indicator - only show for multi-select mode */}
+          {multiSelect && (
+            <View style={styles.selectionIndicator}>
+              {isSelected ? (
+                <View style={styles.selectedIndicator}>
+                  <Text style={styles.selectionNumber}>{selectionIndex}</Text>
+                </View>
+              ) : (
+                isSelectionMode && <View style={styles.unselectedIndicator} />
+              )}
+            </View>
+          )}
+
+          {/* Selection overlay */}
+          {isSelected && <View style={styles.selectionOverlay} />}
+        </TouchableOpacity>
+      );
+    };
+
+    const renderSelectedAssetsHeader = () => {
+      if (!showSelectedAssetsHeader) return null;
+
+      return (
+        <View style={styles.selectedAssetsHeaderContainer}>
+          {selectedAssets && selectedAssets.length > 0 ? (
+            <View style={styles.selectedAssetsContainer}>
+              <FlatList
+                ref={selectedAssetsFlatListRef}
+                data={selectedAssets}
+                renderItem={renderSelectedAsset}
+                keyExtractor={item => item.id}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                contentContainerStyle={styles.selectedAssetsList}
+                pagingEnabled
+                scrollEnabled={false}
+                getItemLayout={(data, index) => ({
+                  length: screenWidth,
+                  offset: screenWidth * index,
+                  index,
+                })}
+              />
+            </View>
+          ) : (
+            <View style={styles.placeholderContainer}>
+              <View style={styles.placeholderBox} />
+            </View>
+          )}
+        </View>
+      );
+    };
+
+    // Helper function to get selected assets from IDs in selection order
+    const getSelectedAssets = useCallback(() => {
+      return selectedAssetOrder
+        .map(id => assets.find(asset => asset.id === id))
+        .filter(asset => asset !== undefined) as PhotoAsset[];
+    }, [assets, selectedAssetOrder]);
+
+    // Sync external selectedAssets prop with internal state
+    useEffect(() => {
+      if (selectedAssets && !isUpdatingFromProp.current) {
+        isUpdatingFromProp.current = true;
+        const newSelectedIds = new Set(selectedAssets.map(asset => asset.id));
+        const newSelectedOrder = selectedAssets.map(asset => asset.id);
+        setSelectedAssetIds(newSelectedIds);
+        setSelectedAssetOrder(newSelectedOrder);
+        // Don't auto-enable selection mode when syncing from external props
+        // Selection mode should only be enabled by long press or toggle button
+        // setIsSelectionMode(newSelectedIds.size > 0 && multiSelect);
+        // Reset flag after state updates
+        setTimeout(() => {
+          isUpdatingFromProp.current = false;
+        }, 0);
+      }
+    }, [selectedAssets, multiSelect]);
+
+    // Call callback when selected assets change
+    useEffect(() => {
+      if (onSelectedAssetsChange && !isUpdatingFromProp.current) {
+        // Add a small delay to prevent rapid updates
+        const timeoutId = setTimeout(() => {
+          if (!isUpdatingFromProp.current) {
+            if (selectedAssetIds.size > 0) {
+              const selectedAssets = getSelectedAssets();
+              onSelectedAssetsChange(selectedAssets);
+            } else {
+              onSelectedAssetsChange([]);
+            }
+          }
+        }, 50);
+
+        return () => clearTimeout(timeoutId);
+      }
+    }, [selectedAssetIds, assets, onSelectedAssetsChange, getSelectedAssets]);
+
+    const checkPermissionStatus = useCallback(async () => {
+      try {
+        const status =
+          await ImagePickerModule.getPhotoLibraryPermissionStatus();
+        console.log('Permission status from native:', status);
+        setPermissionStatus(status);
+        return status;
+      } catch (error) {
+        console.error('Error checking permission status:', error);
+        return 'not_determined';
+      }
+    }, []);
+
+    const requestPermission = useCallback(async () => {
+      try {
+        console.log('Requesting gallery permission...');
+
+        // For iOS, we need to use the PHPhotoLibrary authorization request
+        const currentStatus = await checkPermissionStatus();
+        console.log('Current status before request:', currentStatus);
+
+        if (currentStatus === 'not_determined') {
+          // This will trigger the system permission dialog
+          const granted = await ImagePickerModule.requestGalleryPermission();
+          console.log('System permission request result:', granted);
+
+          // Wait a moment and check the new status
+          await new Promise(resolve => setTimeout(resolve, 500));
+          const newStatus = await checkPermissionStatus();
+          console.log('Status after request:', newStatus);
+
+          return granted;
+        } else if (currentStatus === 'denied') {
+          // If already denied, show alert to go to settings
+          Alert.alert(
+            'Permission Required',
+            'Photo library access is required. Please enable it in Settings.',
+            [
+              {text: 'Cancel', style: 'cancel'},
+              {
+                text: 'Open Settings',
+                onPress: () =>
+                  ImagePickerModule.openPhotoLibraryLimitedSettings(),
+              },
+            ],
+          );
+          return false;
+        }
+
+        return true;
+      } catch (error) {
+        console.error('Error requesting permission:', error);
+        Alert.alert('Error', 'Failed to request photo library permission');
+        return false;
+      }
+    }, [checkPermissionStatus]);
+
+    const [loadingState, setLoadingState] = useState(false);
+
+    const loadAssets = useCallback(
+      async (reset = false) => {
+        // Prevent concurrent loads
+        if (loadingState) {
+          console.log('Already loading, skipping...');
+          return;
+        }
+
+        console.log('Loading assets - reset:', reset);
+
+        try {
+          setLoadingState(true);
+
+          const currentOffset = reset ? 0 : assets.length;
+          console.log('Current offset:', currentOffset);
+
+          console.log(
+            '🚀 Calling fetchPhotoLibraryAssets with mediaType:',
+            mediaType,
+          );
+          console.log('🚀 Options:', {
+            limit: 20,
+            offset: currentOffset,
+            mediaType: mediaType,
+          });
+
+          const result: GalleryResult =
+            await ImagePickerModule.fetchPhotoLibraryAssets({
+              limit: 20,
+              offset: currentOffset,
+              mediaType: mediaType,
+            });
+
+          console.log(
+            '📱 Raw result from Android:',
+            JSON.stringify(result, null, 2),
+          );
+
+          console.log('Fetch result:', {
+            assetsCount: result.assets?.length || 0,
+            hasMore: result.hasMore,
+            totalCount: result.totalCount,
+          });
+
+          if (reset) {
+            setAssets(result.assets || []);
+          } else {
+            setAssets(prev => [...prev, ...(result.assets || [])]);
+          }
+
+          setHasMore(result.hasMore || false);
+          setTotalCount(result.totalCount || 0);
+        } catch (error) {
+          console.error('Error loading assets:', error);
+          if (reset) {
+            setAssets([]);
+            setTotalCount(0);
+          }
+        } finally {
+          setLoadingState(false);
+          setRefreshing(false);
+        }
+      },
+      [loadingState, mediaType],
+    );
+
+    const handleRefresh = useCallback(() => {
+      setRefreshing(true);
+      checkPermissionStatus().then(status => {
+        if (status === 'authorized' || status === 'limited') {
+          loadAssets(true);
+        } else {
+          setRefreshing(false);
+        }
+      });
+    }, [checkPermissionStatus, loadAssets]);
+
+    const handleLoadMore = useCallback(() => {
+      if (
+        hasMore &&
+        !loading &&
+        !loadingState &&
+        (permissionStatus === 'authorized' || permissionStatus === 'limited')
+      ) {
+        loadAssets();
+      }
+    }, [hasMore, loading, loadingState, permissionStatus, loadAssets]);
+
+    const handleGalleryIconPress = async () => {
+      console.log(
+        'Gallery icon pressed, current permission:',
+        permissionStatus,
+      );
+
+      if (
+        permissionStatus === 'denied' ||
+        permissionStatus === 'not_determined'
+      ) {
+        const granted = await requestPermission();
+        console.log('Permission request result:', granted);
+
+        // Check status again after request
+        const newStatus = await checkPermissionStatus();
+        console.log('New permission status:', newStatus);
+
+        if (newStatus === 'authorized' || newStatus === 'limited') {
+          loadAssets(true);
+        }
+      }
+    };
+
+    const handleManagePress = () => {
+      // Check for actual limited status on both iOS and Android 14+
+      const isLimited = permissionStatus === 'limited';
+
+      if (isLimited) {
+        // For limited access, show the 3-option modal first
+        setShowManageModal(true);
+      } else {
+        // For full access, open regular image picker directly
+        handleOpenImagePicker();
+      }
+    };
+
+    const handleOpenImagePicker = async () => {
+      try {
+        console.log(
+          'Opening multi-select picker for full access with mediaType:',
+          mediaType,
+        );
+
+        setLoading(true);
+
+        const result: MultiSelectResult =
+          await ImagePickerModule.openMultiSelectGallery({
+            maxSelectionLimit: maxSelectionLimit, // Use prop value
+            quality: 1,
+            maxWidth: 1024,
+            maxHeight: 1024,
+            includeBase64: true, // Include base64 data
+            mediaType: mediaType,
+          });
+
+        console.log('Multi-select picker result:', result);
+
+        if (result.success && result.images && result.images.length > 0) {
+          console.log(`Selected ${result.images.length} images from picker`);
+
+          // Store the selected images from picker
+          setSelectedImages(result.images);
+
+          // Convert SelectedImages to PhotoAssets for consistency
+          const convertedAssets: PhotoAsset[] = result.images.map(
+            (selectedImage, index) => ({
+              id: selectedImage.id || `picker_${Date.now()}_${index}`,
+              uri: selectedImage.uri,
+              filename: selectedImage.fileName,
+              width: selectedImage.width,
+              height: selectedImage.height,
+              creationDate: Date.now(),
+              mediaType: selectedImage.type.startsWith('video/')
+                ? 'video'
+                : 'image',
+              duration: selectedImage.type.startsWith('video/') ? undefined : 0,
+            }),
+          );
+
+          // Track picker asset IDs
+          const newPickerIds = new Set(convertedAssets.map(asset => asset.id));
+          setPickerAssetIds(newPickerIds);
+          setimagePickerAssets(convertedAssets);
+
+          // Clear previous picker assets and add new ones
+          setAssets(prevAssets => {
+            // Remove any existing picker assets using the tracked IDs
+            const filteredAssets = prevAssets.filter(
+              asset => !pickerAssetIds.has(asset.id),
+            );
+            // Add new picker assets at the beginning
+            return [...convertedAssets, ...filteredAssets];
+          });
+
+          if (multiSelect) {
+            // Multi-select mode: enable selection mode and select all picked images
+            setIsSelectionMode(true);
+            const newSelectedIds = new Set(
+              convertedAssets.map(asset => asset.id),
+            );
+            const newSelectedOrder = convertedAssets.map(asset => asset.id);
+            setSelectedAssetIds(newSelectedIds);
+            setSelectedAssetOrder(newSelectedOrder);
+            setCurrentSelectedIndex(0);
+
+            // Show the selected images modal for review
+            setShowSelectedImagesModal(true);
+          } else {
+            // Single-select mode: select only the first (and only) image
+            const firstAsset = convertedAssets[0];
+            if (firstAsset) {
+              setSelectedAssetIds(new Set([firstAsset.id]));
+              setSelectedAssetOrder([firstAsset.id]);
+              setCurrentSelectedIndex(0);
+
+              // Call single asset selection callback
+              if (onAssetSelected) {
+                onAssetSelected(firstAsset);
+              }
+            }
+          }
+
+          // Call the parent callback to notify about the selection
+          if (onSelectedAssetsChange) {
+            onSelectedAssetsChange(convertedAssets);
+          }
+
+          setLoading(false);
+        } else if (!result.success) {
+          console.log('User cancelled selection');
+          setLoading(false);
+        }
+      } catch (error) {
+        console.error('Error opening multi-select image picker:', error);
+        Alert.alert('Error', 'Failed to open image picker');
+        setLoading(false); // Hide loading state on error
+      }
+    };
+
+    const handleSelectImages = async () => {
+      setShowManageModal(false);
+      try {
+        console.log('📸 Current permission status:', permissionStatus);
+        console.log('📊 Total count:', totalCount);
+
+        if (Platform.OS === 'ios') {
+          // Check current permission status first
+
+          const currentStatus =
+            await ImagePickerModule.getPhotoLibraryPermissionStatus();
+
+          // Check if the method exists
+          if (
+            typeof ImagePickerModule.openPhotoLibraryLimitedPicker !==
+            'function'
+          ) {
+            console.error('❌ openPhotoLibraryLimitedPicker method not found');
+            Alert.alert('Error', 'Photo picker method not available');
+            return;
+          }
+
+          // Try to open the limited picker regardless of reported status
+          // The native code will handle the availability check
+          console.log('🚀 Attempting to call openPhotoLibraryLimitedPicker...');
+          const res = await ImagePickerModule.openPhotoLibraryLimitedPicker();
+
+          console.log('✅ Limited photo picker opened successfully:', res);
+        } else {
+          // Use the universal managePhotoSelection method available on both platforms
+          console.log('🚀 Attempting to call managePhotoSelection...');
+          const res = await ImagePickerModule.managePhotoSelection();
+          console.log(
+            '✅ Photo selection management opened successfully:',
+            res,
+          );
+        }
+
+        // Refresh gallery after potential selection changes
+        setTimeout(() => {
+          console.log('🔄 Refreshing gallery after photo selection changes');
+          handleRefresh();
+        }, 2000);
+      } catch (error) {
+        console.error('❌ Error managing photo selection:', error);
+
+        if (error && typeof error === 'object' && 'code' in error) {
+          switch (error.code) {
+            case 'NOT_LIMITED_ACCESS':
+              Alert.alert(
+                'Info',
+                'This feature is only available when using limited photo access.',
+              );
+              break;
+            case 'METHOD_NOT_AVAILABLE':
+              Alert.alert(
+                'Error',
+                'Photo selection management is not available on this device or OS version',
+              );
+              break;
+            case 'SETTINGS_ERROR':
+              Alert.alert(
+                'Error',
+                'Unable to open photo settings. Please try again.',
+              );
+              break;
+            default:
+              Alert.alert(
+                'Error',
+                `Failed to manage photo selection: ${
+                  'message' in error ? error.message : 'Unknown error'
+                }`,
+              );
+          }
+        } else {
+          Alert.alert(
+            'Error',
+            `Failed to manage photo selection: ${
+              error instanceof Error ? error.message : 'Unknown error'
+            }`,
+          );
+        }
+      }
+    };
+
+    const handleChangePermissionSettings = async () => {
+      setShowManageModal(false);
+      try {
+        console.log('Opening app settings for permission changes...');
+        await ImagePickerModule.openPhotoLibraryLimitedSettings();
+        // Refresh after a short delay
+        setTimeout(() => {
+          handleRefresh();
+        }, 1000);
+      } catch (error) {
+        console.error('Error opening settings:', error);
+      }
+    };
+
+    const handleToggleLimitedAccess = async () => {
+      try {
+        const isCurrentlyLimited = permissionStatus === 'limited';
+        console.log(
+          'Toggling limited access. Currently limited:',
+          isCurrentlyLimited,
+        );
+
+        // Toggle the mode
+        await ImagePickerModule.setLimitedAccessMode(!isCurrentlyLimited);
+
+        // Refresh to get new permission status and assets
+        setTimeout(() => {
+          handleRefresh();
+        }, 500);
+      } catch (error) {
+        console.error('Error toggling limited access:', error);
+      }
+    };
+
+    const handleSingleAssetSelection = (asset: PhotoAsset) => {
+      // For single selection mode - keep the selection persistent
+      console.log('Single asset selected:', asset);
+       translateY.value = withTiming(0, {
+          duration: 300,
+        });
+
+      // Set the selected asset and keep it selected
+      setSelectedAssetIds(new Set([asset.id]));
+      setSelectedAssetOrder([asset.id]);
+
+      // In single select mode, clear picker state if selecting from gallery
+      const isFromPicker = pickerAssetIds.has(asset.id);
+      if (!isFromPicker && !multiSelect) {
+        // Clear picker state
+        setSelectedImages([]);
+        setimagePickerAssets([]);
+        // Remove picker assets from main assets array
+        setAssets(prevAssets =>
+          prevAssets.filter(a => !pickerAssetIds.has(a.id)),
+        );
+        setPickerAssetIds(new Set());
+      }
+
+      // Call callback for single asset selection
+      if (onAssetSelected) {
+        onAssetSelected(asset);
+      }
+    };
+
+    const handleMultiAssetSelection = (asset: PhotoAsset) => {
+        translateY.value = withTiming(0, {
+          duration: 300,
+        });
+
+      if (!isSelectionMode) {
+        // Start selection mode on long press
+        setIsSelectionMode(true);
+        const newSelectedIds = new Set([asset.id]);
+        const newSelectedOrder = [asset.id];
+        setSelectedAssetIds(newSelectedIds);
+        setSelectedAssetOrder(newSelectedOrder);
+      } else {
+        // Toggle selection
+        const newSelectedIds = new Set(selectedAssetIds);
+        let newSelectedOrder = [...selectedAssetOrder];
+
+        if (newSelectedIds.has(asset.id)) {
+          // Remove from selection
+          const removedIndex = newSelectedOrder.indexOf(asset.id);
+          newSelectedIds.delete(asset.id);
+          newSelectedOrder = newSelectedOrder.filter(id => id !== asset.id);
+
+          // If removing a picker asset, also remove from picker state
+          const isFromPicker = pickerAssetIds.has(asset.id);
+          if (isFromPicker) {
+            setSelectedImages(prevSelected =>
+              prevSelected.filter(img => img.id !== asset.id),
+            );
+            setimagePickerAssets(prevAssets =>
+              prevAssets.filter(pickerAsset => pickerAsset.id !== asset.id),
+            );
+            setPickerAssetIds(prevIds => {
+              const newIds = new Set(prevIds);
+              newIds.delete(asset.id);
+              return newIds;
+            });
+            // Remove from main assets array as well
+            setAssets(prevAssets => prevAssets.filter(a => a.id !== asset.id));
+          }
+
+          // Handle current index after removal
+          setTimeout(() => {
+            if (newSelectedOrder.length === 0) {
+              setCurrentSelectedIndex(0);
+            } else {
+              let newCurrentIndex = currentSelectedIndex;
+
+              // If removed item was before current index, shift index back
+              if (removedIndex < currentSelectedIndex) {
+                newCurrentIndex = currentSelectedIndex - 1;
+              }
+              // If removed item was the current item, stay at same position or move to last
+              else if (removedIndex === currentSelectedIndex) {
+                newCurrentIndex = Math.min(
+                  currentSelectedIndex,
+                  newSelectedOrder.length - 1,
+                );
+              }
+              // If removed item was after current index, no change needed
+
+              // Ensure index is within bounds
+              newCurrentIndex = Math.max(
+                0,
+                Math.min(newCurrentIndex, newSelectedOrder.length - 1),
+              );
+              setCurrentSelectedIndex(newCurrentIndex);
+
+              // Scroll to the new current index
+              if (selectedAssetsFlatListRef.current && newCurrentIndex >= 0) {
+                try {
+                  selectedAssetsFlatListRef.current.scrollToIndex({
+                    index: newCurrentIndex,
+                    animated: false,
+                  });
+                } catch (error) {
+                  console.log('ScrollToIndex error after removal:', error);
+                }
+              }
+            }
+          }, 150);
+        } else if (newSelectedIds.size < maxSelectionLimit) {
+          // Add to selection
+          newSelectedIds.add(asset.id);
+          newSelectedOrder.push(asset.id);
+          const newIndex = newSelectedOrder.length - 1;
+
+          // Delay scroll to allow FlatList to update with new data
+          setTimeout(() => {
+            if (selectedAssetsFlatListRef.current && newIndex >= 0) {
+              setCurrentSelectedIndex(newIndex);
+
+              try {
+                selectedAssetsFlatListRef.current.scrollToIndex({
+                  index: newIndex,
+                  animated: false,
+                });
+              } catch (error) {
+                console.log('ScrollToIndex error:', error);
+                // Fallback to scroll to end if index is out of range
+                selectedAssetsFlatListRef.current.scrollToEnd({animated: true});
+              }
+            }
+          }, 150);
+        } else {
+          Alert.alert(
+            'Selection Limit',
+            `You can select up to ${maxSelectionLimit} images.`,
+          );
+          return;
+        }
+
+        setSelectedAssetIds(newSelectedIds);
+        setSelectedAssetOrder(newSelectedOrder);
+
+        // Exit selection mode if no items selected
+        if (newSelectedIds.size === 0) {
+          setIsSelectionMode(false);
+          // Clear all picker state when no selections remain
+          setSelectedImages([]);
+          setimagePickerAssets([]);
+          // Remove all picker assets from main assets array
+          setAssets(prevAssets =>
+            prevAssets.filter(a => !pickerAssetIds.has(a.id)),
+          );
+          setPickerAssetIds(new Set());
+        }
+      }
+    };
+
+    const handleAssetPress = (asset: PhotoAsset) => {
+      if (isSelectionMode) {
+        // In multi-select mode and selection is active
+        handleMultiAssetSelection(asset);
+      } else {
+        // Single select mode (works for both multiSelect={true/false} when not in selection mode)
+        handleSingleAssetSelection(asset);
+      }
+    };
+
+    const handleAssetLongPress = (asset: PhotoAsset) => {
+      if (multiSelect) {
+        // Start multi-selection mode on long press
+        handleMultiAssetSelection(asset);
+          translateY.value = withTiming(0, {
+          duration: 300,
+        });
+
+      }
+    };
+
+    const toggleSelectionMode = () => {
+      if (multiSelect) {
+        if (isSelectionMode) {
+          // If we're currently in selection mode, keep only the first selected asset
+          if (selectedAssetOrder.length > 0) {
+            const firstSelectedAssetId = selectedAssetOrder[0];
+            const firstSelectedAsset = assets.find(
+              asset => asset.id === firstSelectedAssetId,
+            );
+
+            if (firstSelectedAsset) {
+              setSelectedAssetIds(new Set([firstSelectedAssetId]));
+              setSelectedAssetOrder([firstSelectedAssetId]);
+
+              if (onSelectedAssetsChange) {
+                onSelectedAssetsChange([firstSelectedAsset]);
+              }
+            }
+          }
+          setIsSelectionMode(false);
+        } else {
+          // If not in selection mode, enter selection mode
+          setIsSelectionMode(true);
+          // Clear any existing selections when entering selection mode via toggle
+          // setSelectedAssetIds(new Set());
+          // setSelectedAssetOrder([]);
+        }
+      }
+    };
+
+    const handleCancelSelection = () => {
+      setSelectedAssetIds(new Set());
+      setSelectedAssetOrder([]);
+      setIsSelectionMode(false);
+
+      // Clear picker-related state
+      setSelectedImages([]);
+      setimagePickerAssets([]);
+      setPickerAssetIds(new Set());
+
+      // Remove picker assets from main assets array using tracked IDs
+      setAssets(prevAssets =>
+        prevAssets.filter(asset => !pickerAssetIds.has(asset.id)),
+      );
+    };
+
+    const handleNextWithSelectedAssets = async () => {
+      if (selectedAssetIds.size === 0) return;
+
+      try {
+
+        // Capture cropped images first
+        await captureAllCroppedImages();
+        const selectedAssets = assets.filter(asset =>
+          selectedAssetIds.has(asset.id),
+        );
+
+        // Convert PhotoAssets to SelectedImages with base64
+        const processedImages: SelectedImage[] = [];
+
+        for (let i = 0; i < selectedAssets.length; i++) {
+          const asset = selectedAssets[i];
+          try {
+            const isVideo = asset.mediaType === 'video';
+
+            let uri: string;
+            let fileName: string;
+            let fileType: string;
+            let base64: string;
+            let fileSize: number = 0;
+
+            if (isVideo) {
+              fileName = asset.filename || `selected_video_${i + 1}.mp4`;
+              fileType = 'video/mp4';
+
+              if (Platform.OS === 'android') {
+                // For Android, use the URI directly and get base64 via native method
+                uri = asset.uri;
+                base64 = await ImagePickerModule.getVideoBase64(asset.uri);
+                // For videos, estimate size from base64 length (rough approximation)
+                fileSize = base64 ? Math.round((base64.length * 3) / 4) : 0;
+              } else {
+                // For iOS videos, skip base64 conversion and handle gracefully
+                uri = asset.uri; // Keep the ph:// URI for display
+
+                console.log(
+                  'iOS video - skipping base64 conversion for:',
+                  asset.uri,
+                );
+                base64 = ''; // No base64 for iOS videos
+                fileSize = 0; // Unknown file size for iOS videos
+              }
+            } else {
+              // For images, get processed image
+              const assetIdentifier =
+                Platform.OS === 'android' && asset.uri.startsWith('content://')
+                  ? asset.uri
+                  : asset.id;
+
+              uri = await ImagePickerModule.getImageForAsset(
+                assetIdentifier,
+                1024, // maxWidth
+                1024, // maxHeight
+              );
+              fileName = asset.filename || `selected_image_${i + 1}.jpg`;
+              fileType = 'image/jpeg';
+
+              // Convert to base64 for images
+              const response = await fetch(uri);
+              const blob = await response.blob();
+
+              const reader = new FileReader();
+              const base64Promise = new Promise<string>(resolve => {
+                reader.onloadend = () => {
+                  const base64String = reader.result as string;
+                  resolve(base64String);
+                };
+              });
+              reader.readAsDataURL(blob);
+              base64 = await base64Promise;
+
+              // Store file size from blob
+              fileSize = blob.size;
+            }
+
+            const selectedImage: SelectedImage = {
+              uri: uri,
+              fileName: fileName,
+              fileSize: fileSize,
+              width: asset.width,
+              height: asset.height,
+              type: fileType,
+              id: asset.id,
+              base64: base64,
+            };
+
+            processedImages.push(selectedImage);
+          } catch (error) {
+            console.error(`Error processing asset ${asset.id}:`, error);
+          }
+        }
+
+        setSelectedImages(processedImages);
+        setShowSelectedImagesModal(true);
+        setIsSelectionMode(false);
+        setSelectedAssetIds(new Set());
+      } catch (error) {
+        console.error('Error processing selected assets:', error);
+        Alert.alert('Error', 'Failed to process selected media');
+      } finally {
+      }
+    };
+
+    const handleAppStateChange = useCallback(
+      (nextAppState: string) => {
+        if (nextAppState === 'active') {
+          // App came to foreground, check if permissions changed
+          setTimeout(() => {
+            checkPermissionStatus().then(status => {
+              setPermissionStatus(currentStatus => {
+                if (status !== currentStatus) {
+                  if (status === 'authorized' || status === 'limited') {
+                    loadAssets(true);
+                  } else {
+                    setAssets([]);
+                    setTotalCount(0);
+                  }
+                }
+                return status;
+              });
+            });
+          }, 500);
+        }
+      },
+      [checkPermissionStatus, loadAssets],
+    );
+
+    useEffect(() => {
+      const subscription = AppState.addEventListener(
+        'change',
+        handleAppStateChange,
+      );
+      return () => subscription?.remove();
+    }, [handleAppStateChange]);
+
+    useEffect(() => {
+      // Listen for photo library changes from native module
+      let photoLibrarySubscription: any;
+
+      try {
+        if (NativeModules.ImagePickerModule) {
+          const eventEmitter = new NativeEventEmitter(
+            NativeModules.ImagePickerModule,
+          );
+          photoLibrarySubscription = eventEmitter.addListener(
+            'PhotoLibraryChanged',
+            () => {
+              console.log(
+                '📸 Photo library changed event received, refreshing gallery...',
+              );
+              handleRefresh();
+            },
+          );
+        }
+      } catch (error) {
+        console.warn('Failed to setup photo library event listener:', error);
+      }
+
+      return () => {
+        if (photoLibrarySubscription) {
+          photoLibrarySubscription.remove();
+        }
+      };
+    }, [handleRefresh]);
+
+    // Auto-select first asset when assets are loaded (only if no selection exists)
+    useEffect(() => {
+      if (
+        assets.length > 0 &&
+        selectedAssets?.length === 0 &&
+        selectedAssetOrder.length === 0
+      ) {
+        const firstAsset = assets[0];
+        setSelectedAssetIds(new Set([firstAsset.id]));
+        setSelectedAssetOrder([firstAsset.id]);
+
+        if (onSelectedAssetsChange) {
+          onSelectedAssetsChange([firstAsset]);
+        }
+      }
+    }, [assets, selectedAssets, selectedAssetOrder, onSelectedAssetsChange]);
+
+    // Reset current index when selected assets change
+    useEffect(() => {
+      setCurrentSelectedIndex(0);
+    }, [selectedAssets]);
+
+    useEffect(() => {
+      const initializeGallery = async () => {
+        console.log('Initializing gallery...');
+        const status = await checkPermissionStatus();
+        console.log('Initial permission status:', status);
+
+        // Add debug information for Android only
+        if (Platform.OS === 'android') {
+          try {
+            console.log('🔍 Getting Android debug info...');
+            const debugInfo =
+              await ImagePickerModule.debugPermissionsAndMediaStore();
+            console.log(
+              '🔍 Android Debug Info:',
+              JSON.stringify(debugInfo, null, 2),
+            );
+
+            console.log('🎥 Testing video query directly...');
+            const videoTest = await ImagePickerModule.testVideoQuery();
+            console.log(
+              '🎥 Video Test Result:',
+              JSON.stringify(videoTest, null, 2),
+            );
+
+            console.log('🎬 Running SIMPLE video test...');
+            const simpleTest = await ImagePickerModule.simpleVideoTest();
+            console.log(
+              '🎬 Simple Test Result:',
+              JSON.stringify(simpleTest, null, 2),
+            );
+          } catch (error) {
+            console.error('🔍 Debug info error:', error);
+          }
+        }
+
+        if (status === 'authorized' || status === 'limited') {
+          console.log(
+            'Loading assets for status:',
+            status,
+            'with mediaType:',
+            mediaType,
+          );
+          loadAssets(true);
+        }
+      };
+
+      initializeGallery();
+    }, [mediaType]); // Reload when media type changes
+
+    const renderCustomHeader = () => {
+      return (
+        <View style={styles.customHeader}>
+          <TouchableOpacity
+            onPress={toggleSelectionMode}
+            activeOpacity={0.8}
+            hitSlop={30}>
+            <View
+              style={{
+                position: 'absolute',
+                height: 15,
+                width: 15,
+                borderRadius: 2,
+                borderTopColor: isSelectionMode
+                  ? '#fff'
+                  : 'rgba(235, 238, 245, 0.60)',
+                borderRightColor: isSelectionMode
+                  ? '#fff'
+                  : 'rgba(235, 238, 245, 0.60)',
+                borderWidth: 1.5,
+                bottom: 4,
+                left: 4,
+              }}></View>
+            <View
+              style={{
+                position: 'absolute',
+                height: 15,
+                width: 15,
+                borderRadius: 2,
+                borderTopColor: isSelectionMode
+                  ? '#fff'
+                  : 'rgba(235, 238, 245, 0.60)',
+                borderRightColor: isSelectionMode
+                  ? '#fff'
+                  : 'rgba(235, 238, 245, 0.60)',
+                borderWidth: 1.5,
+                bottom: 1,
+                left: 1,
+              }}></View>
+            <View
+              style={{
+                width: 13,
+                height: 13,
+                borderRadius: 2,
+                borderColor: isSelectionMode
+                  ? '#fff'
+                  : 'rgba(235, 238, 245, 0.60)',
+                borderWidth: 1.5,
+              }}></View>
+            {/* <Text style={styles.multiSelectToggleButtonText}>
+              {isSelectionMode ? '✅' : '☑️'}
+            </Text> */}
+          </TouchableOpacity>
+
+          <View style={styles.aspectRatioContainer}>
+            {([0.8, 16 / 9, 1] as const).map(ratio => (
+              <TouchableOpacity
+                activeOpacity={0.8}
+                key={ratio}
+                style={[styles.aspectRatioButton]}
+                onPress={() => setAspectRatio(ratio)}
+                hitSlop={{top: 12, bottom: 12}}>
+                <View
+                  style={{
+                    height: 20,
+                    aspectRatio: ratio,
+                    borderRadius: 2,
+                    borderWidth: 1.5,
+                    borderColor:
+                      aspectRatio === ratio
+                        ? '#fff'
+                        : 'rgba(235, 238, 245, 0.60)',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}>
+                  <View
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                      borderRadius: 2,
+                      borderWidth: 1.5,
+                      borderColor: '#000',
+                      backgroundColor: 'rgba(235, 238, 245, 0.60)',
+                    }}></View>
+                </View>
+              </TouchableOpacity>
+            ))}
+          </View>
+          <View style={styles.navControls}>
+            <TouchableOpacity
+              activeOpacity={0.8}
+              hitSlop={12}
+              disabled={
+                !selectedAssets ||
+                selectedAssets.length === 0 ||
+                currentSelectedIndex === 0
+              }
+              onPress={() => {
+                displayPreviousIndex();
+              }}>
+
+                 <IconComponent
+                name={icons.leftArrow}
+                color={
+                  !selectedAssets ||
+                  selectedAssets.length === 0 ||
+                  currentSelectedIndex === 0
+                    ? 'rgba(235, 238, 245, 0.60)'
+                    : '#fff'
+                }
+              />
+              
+            </TouchableOpacity>
+
+            {/* <Text
+              style={{
+                fontSize:16,
+                color: '#fff',
+              }}>
+              {selectedAssets && selectedAssets.length > 0 ? `${currentSelectedIndex + 1}/${selectedAssets.length}` : '0/0'}
+            </Text> */}
+            <TouchableOpacity
+              activeOpacity={0.8}
+              hitSlop={12}
+              disabled={
+                !selectedAssets ||
+                selectedAssets.length === 0 ||
+                currentSelectedIndex >= selectedAssets.length - 1
+              }
+              onPress={() => {
+                displayNextIndex();
+              }}>
+
+
+
+                   <IconComponent
+                  name={icons.rightArrow}
+                  color={
+                   !selectedAssets ||
+                selectedAssets.length === 0 ||
+                currentSelectedIndex >= selectedAssets.length - 1
+                      ? "rgba(235, 238, 245, 0.60)"
+                      : "#fff"
+                  }
+                />
+              
+            </TouchableOpacity>
+          </View>
+        </View>
+      );
+    };
+
+    const renderHeader = () => {
+      // Show header when we have access to photos (authorized or limited)
+      if (permissionStatus === 'authorized' || permissionStatus === 'limited') {
+        // Check for actual limited status on both iOS and Android 14+
+        const isLimited = permissionStatus === 'limited';
+        const isAuthorize0d = !isLimited;
+
+        // Selection mode header - only show if not hidden
+        if (isSelectionMode && !hideSelectionHeader) {
+          return (
+            <View style={styles.header}>
+              <View style={styles.headerLeft}>
+                <TouchableOpacity
+                  style={styles.selectionCancelButton}
+                  onPress={handleCancelSelection}>
+                  <Text style={styles.selectionCancelButtonText}>Cancel</Text>
+                </TouchableOpacity>
+              </View>
+              <View style={styles.selectionInfo}>
+                <Text style={styles.selectionText}>
+                  {selectedAssetIds.size} of {maxSelectionLimit}
+                </Text>
+              </View>
+              <View style={styles.headerButtons}>
+                {multiSelect && (
+                  <TouchableOpacity
+                    style={[
+                      styles.multiSelectToggle,
+                      styles.multiSelectToggleActive,
+                    ]}
+                    onPress={handleCancelSelection}>
+                    <Text style={styles.multiSelectToggleText}>✅</Text>
+                  </TouchableOpacity>
+                )}
+                <TouchableOpacity
+                  style={[
+                    styles.nextButton,
+                    selectedAssetIds.size === 0 && styles.nextButtonDisabled,
+                  ]}
+                  onPress={handleNextWithSelectedAssets}
+                  disabled={selectedAssetIds.size === 0}>
+                  <Text
+                    style={[
+                      styles.nextButtonText,
+                      selectedAssetIds.size === 0 &&
+                        styles.nextButtonTextDisabled,
+                    ]}>
+                    Next
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          );
+        }
+
+        // Normal header
+        return (
+          <View style={styles.header}>
+            {isLimited && (
+              <View style={styles.headerLeft}>
+                <PlayyText FootnoteRegular style={styles.headerTitle}>
+                  You’ve given MotorInc access to only a select number of photos
+                  and videos.
+                </PlayyText>
+              </View>
+            )}
+
+            <TouchableOpacity
+              style={styles.manageButton}
+              onPress={handleManagePress}>
+              <PlayyText SubheadEmphasized style={styles.manageButtonText}>
+                {isLimited ? 'Manage' : 'Albums'}
+              </PlayyText>
+            </TouchableOpacity>
+          </View>
+        );
+      }
+
+      return null;
+    };
+
+    const renderPermissionDeniedStateDefault = () => (
+      <View style={styles.centerContainer}>
+        <TouchableOpacity
+          style={styles.galleryIcon}
+          onPress={handleGalleryIconPress}>
+          <Text style={styles.galleryIconText}>🖼️</Text>
+        </TouchableOpacity>
+        <Text style={styles.permissionText}>Tap to access your photos</Text>
+      </View>
+    );
+
+    const renderFooter = () => {
+      if (!loading || assets.length === 0) return null;
+      return (
+        <View style={styles.footerLoader}>
+          <ActivityIndicator size="small" color="#007AFF" />
+        </View>
+      );
+    };
+
+    const renderCancelNextButtons = () => {
+      // Only show buttons if we have the callbacks and are in multi-select mode
+      if (!multiSelect || (!onCancel && !onNext)) {
+        return null;
+      }
+
+      const currentSelectedAssets = selectedAssets || [];
+
+      return (
+        <NavigationHeader
+        backIcon
+        statusBarvalue={statusBarvalue!}
+        handleBack={onCancel}
+        buttonTitle='Next'
+        buttontextColor='#fff'
+        backIconColor='#fff'
+        isButton
+        label='Back'
+        labelColor='#fff'
+        // @ts-ignore
+        handlePressButton={onNext}
+      />
+      )      
+    };
+
+    const renderSelectedImagesModal = () => (
+      <Modal
+        animationType="slide"
+        transparent={false}
+        visible={showSelectedImagesModal}
+        onRequestClose={() => setShowSelectedImagesModal(false)}>
+        <SafeAreaView style={styles.selectedImagesContainer}>
+          <View style={styles.selectedImagesHeader}>
+            <TouchableOpacity
+              style={styles.closeButton}
+              onPress={() => setShowSelectedImagesModal(false)}>
+              <Text style={styles.closeButtonText}>✕</Text>
+            </TouchableOpacity>
+            <Text style={styles.selectedImagesTitle}>
+              Selected Media ({selectedImages.length})
+            </Text>
+            <View style={styles.placeholder} />
+          </View>
+
+          <ScrollView style={styles.selectedImagesScrollView}>
+            {selectedImages.map((image, index) => {
+              const isVideo = image.type.startsWith('video/');
+              return (
+                <View key={image.id || index} style={styles.selectedImageItem}>
+                  <View style={styles.mediaPreviewContainer}>
+                    <Image
+                      source={{uri: image.uri}}
+                      style={styles.selectedImage}
+                      resizeMode="cover"
+                    />
+                    {isVideo && (
+                      <View style={styles.videoOverlay}>
+                        <Text style={styles.videoPlayIcon}>▶️</Text>
+                      </View>
+                    )}
+                  </View>
+                  <View style={styles.imageDetails}>
+                    <Text style={styles.imageDetailTitle}>
+                      {isVideo ? `Video ${index + 1}` : `Image ${index + 1}`}
+                    </Text>
+                    <Text style={styles.imageDetailText}>
+                      File: {image.fileName}
+                    </Text>
+                    <Text style={styles.imageDetailText}>
+                      Size: {Math.round(image.fileSize / 1024)}KB
+                    </Text>
+                    <Text style={styles.imageDetailText}>
+                      Dimensions: {image.width} × {image.height}
+                    </Text>
+                    <Text style={styles.imageDetailText}>
+                      Type: {image.type}
+                    </Text>
+                    {image.base64 && (
+                      <Text style={styles.imageDetailText}>
+                        Base64: Available (
+                        {Math.round(image.base64.length / 1024)}KB)
+                      </Text>
+                    )}
+                  </View>
+                </View>
+              );
+            })}
+          </ScrollView>
+        </SafeAreaView>
+      </Modal>
+    );
+
+    const renderManageModal = () => (
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={showManageModal}
+        onRequestClose={() => setShowManageModal(false)}>
+        <View style={styles.modalOverlay}>
+          <SafeAreaView style={styles.modalContainer}>
+            <View style={styles.modalContent}>
+              <Text style={styles.modalTitle}>Manage Photos</Text>
+
+              <TouchableOpacity
+                style={styles.modalButton}
+                onPress={handleSelectImages}>
+                <Text style={styles.modalButtonText}>📷 Select Images</Text>
+                <Text style={styles.modalButtonSubtext}>
+                  Update which photos this app can access
+                </Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={styles.modalButton}
+                onPress={handleChangePermissionSettings}>
+                <Text style={styles.modalButtonText}>
+                  ⚙️ Change Permission Settings
+                </Text>
+                <Text style={styles.modalButtonSubtext}>
+                  Open Settings to change photo permissions
+                </Text>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                style={[styles.modalButton, styles.cancelButton]}
+                onPress={() => setShowManageModal(false)}>
+                <Text style={[styles.modalButtonText, styles.cancelButtonText]}>
+                  Cancel
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </SafeAreaView>
+        </View>
+      </Modal>
+    );
+
+    const sections = ['selectedAssets', 'header', 'assets'];
+
+    const renderAssetsGrid = (): React.ReactElement => {
+      if (
+        permissionStatus === 'denied' ||
+        permissionStatus === 'not_determined'
+      ) {
+        const permissionComponent = renderPermissionDeniedState
+          ? renderPermissionDeniedState(handleGalleryIconPress)
+          : renderPermissionDeniedStateDefault();
+
+        return permissionComponent as React.ReactElement;
+      }
+
+      if (assets.length === 0) {
+        return (
+          <View style={styles.emptyContainer}>
+            <Text style={styles.emptyText}>
+              {loading ? 'Loading photos...' : 'No photos available'}
+            </Text>
+          </View>
+        );
+      }
+
+      return (
+        <FlatList
+          data={assets}
+          renderItem={renderAssetItem}
+          keyExtractor={item => item.id}
+          numColumns={3}
+          style={styles.assetsGridContainer}
+          columnWrapperStyle={{
+            gap: 8,
+          }}
+          contentContainerStyle={styles.assetsGridContent}
+          showsVerticalScrollIndicator={false}
+          onEndReached={handleLoadMore}
+          onEndReachedThreshold={0.5}
+          ListFooterComponent={renderFooter}
+          // refreshControl={
+          //   <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
+          // }
+          scrollEnabled={scrollEnabled}
+        />
+      );
+    };
+
+    const gesture = Gesture.Pan()
+      .onBegin(() => {})
+      .onChange(() => {});
+
+    const selectedAssetGesture = Gesture.Pan();
+
+    const assetGesture = Gesture.Pan()
+      .onBegin(() => {
+        console.log('Asset gesture began, current position:', translateY.value);
+        // Store the starting position when gesture begins
+        startPosition.value = translateY.value;
+      })
+      .onChange(e => {
+        const translation = e.translationY;
+        console.log('dsfjk', e.translationY);
+
+        // Add translation to the starting position
+        const newPosition = startPosition.value + translation;
+
+        // Clamp between 0 and -screenWidth
+        translateY.value = Math.max(
+          Math.min(newPosition, 0),
+          -(screenWidth * 1.07 + 32),
+        );
+      })
+      .onEnd(e => {
+        const translation = e.translationY;
+        const velocity = e.velocityY;
+        const finalPosition = startPosition.value + translation;
+
+        let targetPosition = 0;
+
+        // Determine target based on velocity first
+        if (Math.abs(velocity) > VELOCITY_THRESHOLD) {
+          // Fast swipe - use velocity direction
+          targetPosition = velocity < 0 ? -(screenWidth * 1.07 + 44) : 0;
+
+          console.log(
+            'Asset velocity snap:',
+            velocity < 0 ? 'to -screenWidth' : 'to 0',
+          );
+        } else {
+          // Slow swipe - use position threshold
+          const distanceFromTop = Math.abs(finalPosition);
+          const distanceFromBottom = Math.abs(
+            finalPosition + (screenWidth * 1.07 + 44),
+          );
+
+          if (distanceFromTop < distanceFromBottom) {
+            targetPosition = 0;
+            console.log('Asset position snap: to 0 (closer to top)');
+          } else {
+            targetPosition = -(screenWidth * 1.07 + 44);
+            console.log(
+              'Asset position snap: to -screenWidth (closer to bottom)',
+            );
+          }
+        }
+
+        // Animate to target position with smooth timing
+        translateY.value = withTiming(targetPosition, {
+          duration: 300,
+        });
+      });
+
+    const renderHeaderGesture = Gesture.Pan()
+      .onBegin(() => {
+        console.log(
+          'Header gesture began, current position:',
+          translateY.value,
+        );
+        // Store the starting position when gesture begins
+        startPosition.value = translateY.value;
+      })
+      .onChange(e => {
+        const translation = e.translationY;
+
+        // Add translation to the starting position
+        const newPosition = startPosition.value + translation;
+
+        // Clamp between 0 and -screenWidth
+        translateY.value = Math.max(
+          Math.min(newPosition, 0),
+          -(screenWidth * 1.07 + 44),
+        );
+      })
+      .onEnd(e => {
+        const translation = e.translationY;
+        const velocity = e.velocityY;
+        const finalPosition = startPosition.value + translation;
+
+        let targetPosition = 0;
+
+        // Determine target based on velocity first
+        if (Math.abs(velocity) > VELOCITY_THRESHOLD) {
+          // Fast swipe - use velocity direction
+          targetPosition = velocity < 0 ? -(screenWidth * 1.07 + 44) : 0;
+        } else {
+          // Slow swipe - use position threshold (snap to nearest half)
+          const fullDistance = screenWidth * 1.07 + 44;
+          const midPoint = -fullDistance / 2;
+
+          // If final position is above midpoint, snap to top, otherwise snap to bottom
+          targetPosition = finalPosition < midPoint ? -fullDistance : 0;
+        }
+
+        // Animate to target position with smooth timing
+        translateY.value = withTiming(targetPosition, {
+          duration: 300,
+        });
+      });
+    const animatedStyle = useAnimatedStyle(() => {
+      return {
+        transform: [
+          {
+            translateY: translateY.value,
+          },
+        ],
+        paddingBottom: translateY.value === 0 ? screenWidth * 1.07 + 44 : 0,
+      };
+    });
+
+    return (
+         <FontProvider
+            fonts={{
+              regular: "Playy-Regular",
+              medium: "Playy-Medium",
+
+             bold: "Playy-Bold",
+
+              SemiCondensedExtraBold: Platform.OS === "android"
+
+                ? "OpenSans_SemiCondensed-ExtraBold"
+
+                : "OpenSansSemiCondensed-ExtraBold"
+
+           }}
+
+     >
+      <View
+        style={{
+          backgroundColor: '#000',
+        }}>
+
+        {renderCancelNextButtons()}
+
+        <Animated.View
+          style={[
+            styles.container,
+            animatedStyle,
+            {
+              height: screenHeight + (screenWidth * 1.07 + 44 - 140),
+            },
+          ]}>
+          <GestureHandlerRootView>
+            {(permissionStatus === 'authorized' ||
+              permissionStatus === 'limited') && (
+              <>
+                <GestureDetector gesture={selectedAssetGesture}>
+                  <View>{renderSelectedAssetsHeader()}</View>
+                </GestureDetector>
+
+                <GestureDetector gesture={renderHeaderGesture}>
+                  <Animated.View>
+                    {renderCustomHeader()}
+                    {renderHeader()}
+                  </Animated.View>
+                </GestureDetector>
+              </>
+            )}
+
+            <GestureDetector gesture={assetGesture}>
+              {renderAssetsGrid()}
+            </GestureDetector>
+          </GestureHandlerRootView>
+          {renderManageModal()}
+
+          {/* Loading overlay for album picker processing */}
+          {loading && (
+            <View style={styles.loadingOverlay}>
+              <ActivityIndicator size="large" color="#fff" />
+            </View>
+          )}
+        </Animated.View>
+      </View>
+     </FontProvider>
+
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#000',
+  },
+  topBackground: {
+    backgroundColor: '#000',
+  },
+  selectedAssetWrapper: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#000',
+  },
+  navControls: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  simpleHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: '#000',
+    zIndex: 2,
+  },
+  headerBackButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+  mainFlatList: {
+    flex: 1,
+  },
+  mainContentContainer: {
+    flex: 1,
+    minHeight: screenWidth, // Ensure minimum height for content
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderTopWidth: 0.5,
+    borderTopColor: 'rgba(255, 255, 255, 0.3)',
+    backgroundColor: '#000',
+  },
+  headerLeft: {
+    flex: 1,
+  },
+  headerTitle: {
+    color: 'rgba(235, 238, 245, 0.60)',
+  },
+  headerSubtitle: {
+    fontSize: 14,
+    color: '#666',
+    marginTop: 2,
+  },
+  headerButtons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  toggleButton: {
+    backgroundColor: '#F2F2F2',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: '#E5E5EA',
+  },
+  toggleButtonActive: {
+    backgroundColor: '#FF9500',
+    borderColor: '#FF9500',
+  },
+  toggleButtonText: {
+    color: '#666',
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  toggleButtonTextActive: {
+    color: 'white',
+  },
+  manageButton: {
+    backgroundColor: 'rgba(120, 120, 128, 0.12)',
+    paddingHorizontal: 14,
+    paddingVertical: 7,
+    borderRadius: 40,
+  },
+  manageButtonText: {
+    color: '#0073FF',
+  },
+  multiSelectToggle: {
+    backgroundColor: '#f0f0f0',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    marginRight: 8,
+    borderWidth: 1,
+    borderColor: '#ddd',
+  },
+  multiSelectToggleActive: {
+    backgroundColor: '#007AFF',
+    borderColor: '#007AFF',
+  },
+  multiSelectToggleText: {
+    fontSize: 16,
+    color: '#333',
+  },
+  centerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  galleryIcon: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    backgroundColor: '#F0F0F0',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  galleryIconText: {
+    fontSize: 40,
+  },
+  permissionText: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+  },
+  gridContainer: {
+    padding: 6,
+  },
+  assetContainer: {
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+  assetsGridContainer: {
+    flex: 1,
+  },
+  assetsGridContent: {
+    padding: 12,
+    gap: 8,
+  },
+  assetImage: {
+    width: '100%',
+    height: '100%',
+  },
+  footerLoader: {
+    paddingVertical: 20,
+    alignItems: 'center',
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+  },
+  modalContainer: {
+    backgroundColor: '#000',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  modalContent: {
+    padding: 20,
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: 20,
+    color: '#fff',
+  },
+  modalButton: {
+    backgroundColor: '#F2F2F2',
+    paddingVertical: 16,
+    paddingHorizontal: 20,
+    borderRadius: 12,
+    marginVertical: 6,
+  },
+  modalButtonText: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#333',
+    marginBottom: 4,
+  },
+  modalButtonSubtext: {
+    fontSize: 14,
+    color: '#666',
+  },
+  cancelButton: {
+    backgroundColor: '#FF3B30',
+    marginTop: 10,
+  },
+  cancelButtonText: {
+    color: 'white',
+    textAlign: 'center',
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: 50,
+  },
+  emptyText: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+  },
+  // Selected Images Modal Styles
+  selectedImagesContainer: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  selectedImagesHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E5EA',
+    backgroundColor: '#F8F8F8',
+  },
+  closeButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: '#E5E5EA',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  closeButtonText: {
+    fontSize: 16,
+    color: '#666',
+    fontWeight: '600',
+  },
+  selectedImagesTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+  },
+  placeholder: {
+    width: 32,
+    height: 32,
+  },
+  selectedImagesScrollView: {
+    flex: 1,
+  },
+  selectedImageItem: {
+    flexDirection: 'row',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F0F0F0',
+  },
+  mediaPreviewContainer: {
+    position: 'relative',
+    marginRight: 16,
+  },
+  selectedImage: {
+    width: 80,
+    height: 80,
+    borderRadius: 8,
+  },
+  videoOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    borderRadius: 8,
+  },
+  videoPlayIcon: {
+    fontSize: 24,
+  },
+  imageDetails: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  imageDetailTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 8,
+  },
+  imageDetailText: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 4,
+  },
+  // Selection Mode Styles
+  selectionInfo: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  selectionText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#007AFF',
+  },
+  nextButton: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 20,
+    paddingVertical: 8,
+    borderRadius: 8,
+  },
+  nextButtonDisabled: {
+    backgroundColor: '#C7C7CC',
+  },
+  nextButtonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  nextButtonTextDisabled: {
+    color: '#8E8E93',
+  },
+  selectionCancelButton: {
+    paddingVertical: 8,
+  },
+  selectionCancelButtonText: {
+    color: '#007AFF',
+    fontSize: 16,
+  },
+  // Asset Selection Styles
+  selectedAssetImage: {
+    opacity: 0.6,
+  },
+  selectionIndicator: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    zIndex: 1,
+  },
+  selectedIndicator: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: '#007AFF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 2,
+    borderColor: '#FFFFFF',
+  },
+  unselectedIndicator: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+    borderWidth: 2,
+    borderColor: '#007AFF',
+  },
+  selectionNumber: {
+    color: 'white',
+    fontSize: 12,
+    fontWeight: 'bold',
+  },
+  selectionOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 122, 255, 0.2)',
+    borderRadius: 4,
+  },
+  // Video indicator styles
+  videoIndicator: {
+    position: 'absolute',
+    bottom: 4,
+    left: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+  videoIcon: {
+    fontSize: 12,
+    marginRight: 2,
+  },
+  videoDuration: {
+    color: 'white',
+    fontSize: 10,
+    fontWeight: '500',
+  },
+  // Selected Assets Header Styles
+  selectedAssetsHeaderContainer: {
+    backgroundColor: '#000',
+  },
+  selectedAssetsContainer: {
+    backgroundColor: '#000',
+    borderTopWidth: 0.6,
+    borderBottomWidth: 0.6,
+    borderColor: 'rgba(255, 255, 255, 0.3)',
+  },
+  selectedAssetsTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    paddingHorizontal: 16,
+    marginBottom: 8,
+  },
+  selectedAssetsList: {},
+  selectedAssetContainer: {
+    position: 'relative',
+    width: screenWidth,
+    height: screenWidth,
+    backgroundColor: '#000',
+    overflow: 'hidden',
+  },
+  cropperContainer: {
+    position: 'relative',
+    width: screenWidth,
+    height: screenWidth,
+    backgroundColor: '#000',
+    overflow: 'hidden',
+  },
+  cropImageContainer: {
+    width: screenWidth,
+    height: screenWidth,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cropImage: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover',
+  },
+  cropOverlayContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  cropBorder: {
+    position: 'absolute',
+    backgroundColor: 'transparent',
+  },
+  cropWindow: {
+    position: 'absolute',
+    backgroundColor: 'transparent',
+  },
+  removeButton: {
+    position: 'absolute',
+    top: -4,
+    right: -4,
+    backgroundColor: '#FF3B30',
+    borderRadius: 10,
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 2,
+    borderColor: '#ffffff',
+  },
+  removeButtonText: {
+    color: '#ffffff',
+    fontSize: 12,
+    fontWeight: 'bold',
+  },
+  videoIndicatorSmall: {
+    position: 'absolute',
+    bottom: 4,
+    right: 4,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    borderRadius: 4,
+    padding: 2,
+  },
+  videoIconSmall: {
+    fontSize: 10,
+  },
+  selectedAssetHeaderImage: {
+    resizeMode: 'cover',
+  },
+  cropOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none',
+  },
+  gridLine: {
+    position: 'absolute',
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+  },
+  gridVertical1: {
+    width: 1,
+    height: '100%',
+    left: '33.33%',
+  },
+  gridVertical2: {
+    width: 1,
+    height: '100%',
+    left: '66.66%',
+  },
+  gridHorizontal1: {
+    width: '100%',
+    height: 1,
+    top: '33.33%',
+  },
+  gridHorizontal2: {
+    width: '100%',
+    height: 1,
+    top: '66.66%',
+  },
+  cropMask: {
+    position: 'absolute',
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    pointerEvents: 'none',
+  },
+  placeholderContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderTopWidth: 0.6,
+    borderBottomWidth: 0.6,
+    borderColor: 'rgba(255, 255, 255, 0.3)',
+  },
+  placeholderBox: {
+    width: screenWidth,
+    height: screenWidth * 1.07,
+    backgroundColor: '#000',
+    borderStyle: 'dashed',
+  },
+  // Custom Header Styles
+  customHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    backgroundColor: '#000',
+    paddingVertical: 12,
+  },
+  coverButton: {
+    width: 32,
+    height: 32,
+    backgroundColor: '#333',
+    borderRadius: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  coverButtonText: {
+    fontSize: 16,
+    color: '#fff',
+  },
+  aspectRatioContainer: {
+    flexDirection: 'row',
+    paddingHorizontal: 4,
+  },
+  aspectRatioButton: {
+    paddingHorizontal: 12,
+  },
+  aspectRatioButtonActive: {
+    backgroundColor: '#fff',
+  },
+  aspectRatioText: {
+    fontSize: 12,
+    color: '#fff',
+    fontWeight: '500',
+  },
+  aspectRatioTextActive: {
+    color: '#000',
+  },
+  multiSelectToggleButton: {},
+
+  multiSelectToggleButtonText: {
+    fontSize: 16,
+    color: '#fff',
+  },
+  // Loading overlay styles
+  loadingOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 9999,
+  },
+  loadingText: {
+    color: '#fff',
+    fontSize: 16,
+    marginTop: 12,
+    textAlign: 'center',
+  },
+});
+
+export default MainPhotoGallery;