@widergy/mobile-ui 1.50.1 → 2.0.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# [2.0.0](https://github.com/widergy/mobile-ui/compare/v1.51.0...v2.0.0) (2025-09-22)
+
+
+* feat!: [OUG-8855] update sdk (#453) ([ac9d0d3](https://github.com/widergy/mobile-ui/commit/ac9d0d3c5033f1bce8641b30f7afbdd15ae9857b)), closes [#453](https://github.com/widergy/mobile-ui/issues/453)
+
+
+### BREAKING CHANGES
+
+* updates core dependencies
+
+# [1.51.0](https://github.com/widergy/mobile-ui/compare/v1.50.1...v1.51.0) (2025-09-18)
+
+
+### Features
+
+* [AUTO-47] Testids for workflowContainer components ([#452](https://github.com/widergy/mobile-ui/issues/452)) ([1fc2bb5](https://github.com/widergy/mobile-ui/commit/1fc2bb5893380f26186e0d089832b88668b91182))
+
 ## [1.50.1](https://github.com/widergy/mobile-ui/compare/v1.50.0...v1.50.1) (2025-09-18)
 
 

package/lib/components/Carousel/components/CarouselContainer/index.js

@@ -20,9 +20,11 @@ const CarouselContainer = ({ style, ...props }, ref) => {
       ]}
     >
       {single ? (
-        <CarouselItem {...itemProps} single>
-          {items.map(renderItem)}
-        </CarouselItem>
+        items.map((item, i) => (
+          <CarouselItem key={`item-${i + 1}`} {...itemProps} single>
+            {renderItem(item)}
+          </CarouselItem>
+        ))
       ) : (
         <CarouselComponent ref={ref} {...props} />
       )}

package/lib/components/FilePicker/constants.js

@@ -1,10 +1,7 @@
-// eslint-disable-next-line import/no-unresolved
-import DocumentPicker from 'react-native-document-picker';
-
 import { MEGABYTE } from '../../utils/fileUtils.js';
 
 export const UPLOAD_ICON = 'file-upload';
 
-export const DEFAULT_ALLOWED_TYPES = [DocumentPicker.types.allFiles];
+export const DEFAULT_ALLOWED_TYPES = ['*/*'];
 
 export const DEFAULT_MAX_SIZE = 10 * MEGABYTE;

package/lib/components/FilePicker/index.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import { View } from 'react-native';
-// eslint-disable-next-line import/no-unresolved
-import DocumentPicker from 'react-native-document-picker';
 import { isEmpty } from '@widergy/web-utils/lib/array';
+import * as ExpoDocumentPicker from 'expo-document-picker';
 
 import Picker from '../Picker';
 import { retrieveFile, isImageByUri, blobToFile } from '../../utils/fileUtils.js';
+import { getMimeType } from '../MultipleFilePicker/utils';
 
 import { UPLOAD_ICON, DEFAULT_ALLOWED_TYPES, DEFAULT_MAX_SIZE } from './constants';
 import filePickerPropTypes from './propTypes';
@@ -21,23 +21,46 @@ class FilePicker extends Component {
 
   handleShowPicker = async () => {
     const {
-      allowedTypes,
+      allowedTypes = DEFAULT_ALLOWED_TYPES,
       onMaxSizeError,
       onError,
       onChange,
-      maxFileByteSize,
+      maxFileByteSize = DEFAULT_MAX_SIZE,
       avoidRetrieveFile,
       fileTypeError,
       allowedPDFUploadSizes,
       pdfFormatError
     } = this.props;
     try {
-      const documents = await DocumentPicker.pick({
-        type: allowedTypes && !onlyPDFAllowed(allowedTypes) ? allowedTypes : DocumentPicker.types.allFiles
+      const normalizeTypes = types => {
+        if (!types || types.length === 0) return DEFAULT_ALLOWED_TYPES;
+        const hasMime = types.some(t => typeof t === 'string' && t.includes('/'));
+        if (hasMime) return types;
+        const mapped = types.map(getMimeType).filter(Boolean);
+        return mapped.length ? mapped : DEFAULT_ALLOWED_TYPES;
+      };
+
+      const pickTypes = !onlyPDFAllowed(allowedTypes) ? normalizeTypes(allowedTypes) : DEFAULT_ALLOWED_TYPES;
+
+      const result = await ExpoDocumentPicker.getDocumentAsync({
+        multiple: false,
+        type: pickTypes
       });
-      const document = documents[0];
-      const isPDF = document.type.includes('pdf');
-      const isImage = document.type.includes('image');
+
+      if (result.canceled) {
+        return;
+      }
+
+      const asset = (result.assets && result.assets[0]) || result;
+      const document = {
+        uri: asset.uri,
+        type: asset.mimeType || asset.type || 'application/octet-stream',
+        size: asset.size,
+        name: asset.name || 'document'
+      };
+
+      const isPDF = (document.type || '').includes('pdf');
+      const isImage = (document.type || '').includes('image');
       if (onlyPDFAllowed(allowedTypes) && !isPDF) {
         throw new Error(fileTypeError || 'El tipo de archivo debe ser PDF.');
       }
@@ -66,9 +89,7 @@ class FilePicker extends Component {
       }
       this.setState({ fileName: document.name });
     } catch (err) {
-      if (!DocumentPicker.isCancel(err)) {
-        onError(err.message);
-      }
+      onError(err.message);
     }
   };
 
@@ -102,11 +123,6 @@ class FilePicker extends Component {
   }
 }
 
-FilePicker.defaultProps = {
-  allowedTypes: DEFAULT_ALLOWED_TYPES,
-  maxFileByteSize: DEFAULT_MAX_SIZE
-};
-
 FilePicker.propTypes = filePickerPropTypes;
 
 export default FilePicker;

package/lib/components/ImagePicker/ModalSelectionOption/index.js

@@ -29,10 +29,22 @@ const ModalSelectionOption = ({
         {title}
       </UTLabel>
       <View style={styles.container}>
-        <UTButton onPress={() => openOptionSelected(true)} style={{ root: styles.button }} variant="text">
+        <UTButton
+          onPress={() => {
+            openOptionSelected(true);
+          }}
+          style={{ root: styles.button }}
+          variant="text"
+        >
           {takePhotoButtonTitle}
         </UTButton>
-        <UTButton onPress={() => openOptionSelected(false)} style={{ root: styles.button }} variant="text">
+        <UTButton
+          onPress={() => {
+            openOptionSelected(false);
+          }}
+          style={{ root: styles.button }}
+          variant="text"
+        >
           {chooseFromLibraryButtonTitle}
         </UTButton>
       </View>

package/lib/components/ImagePicker/index.js

@@ -52,7 +52,11 @@ const ImagePickerComponent = ({
         return;
       }
       const { assets } = response;
-      const item = assets[0];
+      const item = assets && assets.length > 0 ? assets[0] : null;
+      if (!item) {
+        onError('No se pudo obtener el archivo');
+        return;
+      }
       const file = !avoidRetrieveFile && (await retrieveFile(item.uri, item.type));
       if (!avoidRetrieveFile && !file) {
         onError(response.errorCode);

package/lib/components/ImagePicker/layout.js

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { View, Image, TouchableWithoutFeedback, PermissionsAndroid } from 'react-native';
 // eslint-disable-next-line import/no-unresolved
 import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
+import * as ExpoImagePicker from 'expo-image-picker';
 
 import { IS_IOS } from '../../utils/platformUtils/constants';
 import Picker from '../Picker';
@@ -39,6 +40,7 @@ const ImagePicker = ({
   const [openModalSelection, setOpenModalSelection] = useState(false);
   const visibleModalSelection = () => setOpenModalSelection(true);
   const closeModalSelection = () => setOpenModalSelection(false);
+
   const requestPermissionCamera = async () => {
     try {
       const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA);
@@ -52,11 +54,69 @@ const ImagePicker = ({
   };
   const openOptionSelected = async selected => {
     closeModalSelection();
-    return (
-      editable &&
-      onShowImagePicker(
-        selected ? (IS_IOS ? launchCamera : await requestPermissionCamera()) : launchImageLibrary
-      )
+    if (editable === false) return undefined;
+    if (typeof onShowImagePicker !== 'function') return undefined;
+    if (
+      !ExpoImagePicker ||
+      (!ExpoImagePicker.launchImageLibraryAsync && !ExpoImagePicker.launchCameraAsync)
+    ) {
+      // eslint-disable-next-line no-console
+      console.error('No se encontró un ExpoImagePicker válido. instala "expo-image-picker".');
+      return () => {};
+    }
+    if (ExpoImagePicker?.launchImageLibraryAsync || ExpoImagePicker?.launchCameraAsync) {
+      if (selected) {
+        const expoCameraAdapter = async (options, cb) => {
+          try {
+            const perm = await ExpoImagePicker.requestCameraPermissionsAsync?.();
+            if (!perm || perm.status !== 'granted') {
+              cb?.({ didCancel: true, errorCode: 'Son necesarios permisos para utilizar la cámara' });
+              return;
+            }
+            const mediaTypes = ExpoImagePicker.MediaType ? [ExpoImagePicker.MediaType.image] : undefined;
+            const result = await ExpoImagePicker.launchCameraAsync({
+              mediaTypes,
+              allowsMultipleSelection: false,
+              quality: 1
+            });
+            cb?.({ assets: result?.assets || [], didCancel: result?.canceled });
+          } catch (e) {
+            cb?.({ didCancel: true, errorCode: String(e) });
+          }
+        };
+        return onShowImagePicker(expoCameraAdapter);
+      }
+      const expoGalleryAdapter = async (options, cb) => {
+        try {
+          if (
+            !ExpoImagePicker ||
+            (!ExpoImagePicker.launchImageLibraryAsync && !ExpoImagePicker.launchCameraAsync)
+          ) {
+            // eslint-disable-next-line no-console
+            console.error('No se encontró un ExpoImagePicker válido. instala "expo-image-picker".');
+            return;
+          }
+          const perm = await ExpoImagePicker.requestMediaLibraryPermissionsAsync?.();
+          if (!perm || perm.status !== 'granted') {
+            cb?.({ didCancel: true, errorCode: 'Son necesarios permisos para acceder a tus fotos' });
+            return;
+          }
+          const mediaTypes = ExpoImagePicker.MediaType ? [ExpoImagePicker.MediaType.image] : undefined;
+          const result = await ExpoImagePicker.launchImageLibraryAsync({
+            mediaTypes,
+            allowsMultipleSelection: false,
+            quality: 1
+          });
+          cb?.({ assets: result?.assets || [], didCancel: result?.canceled });
+        } catch (e) {
+          cb?.({ didCancel: true, errorCode: String(e) });
+        }
+      };
+      return onShowImagePicker(expoGalleryAdapter);
+    }
+
+    return onShowImagePicker(
+      selected ? (IS_IOS ? launchCamera : await requestPermissionCamera()) : launchImageLibrary
     );
   };
 

package/lib/components/MultipleFilePicker/index.js

@@ -1,20 +1,23 @@
-import { isArray, isEmpty } from 'lodash';
+/* eslint-disable no-undef */
+import isEmpty from 'lodash/isEmpty';
+import isArray from 'lodash/isArray';
 // eslint-disable-next-line import/no-unresolved
 import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
 // eslint-disable-next-line react-native/split-platform-components
-import { View, PermissionsAndroid } from 'react-native';
-// eslint-disable-next-line import/no-unresolved
-import DocumentPicker from 'react-native-document-picker';
-import React, { useEffect, useState } from 'react';
+import React, { View, PermissionsAndroid, Alert } from 'react-native';
+import { useEffect, useState } from 'react';
+import * as ExpoImagePicker from 'expo-image-picker';
+import * as ExpoDocumentPicker from 'expo-document-picker';
 
 import { IS_IOS } from '../../utils/platformUtils/constants';
 import { retrieveFile, blobToFile } from '../../utils/fileUtils.js';
 import UTBottomSheet from '../UTBottomSheet';
 import UTButton from '../UTButton';
+import { DEFAULT_ALLOWED_TYPES } from '../FilePicker/constants';
 
 import { DEFAULT_MAX_SIZE } from './constants';
 import {
-  getDocumentPickerType,
+  getMimeType,
   getInitialValuesFrom,
   isFileFormatInvalid,
   isFileSizeInvaid,
@@ -38,16 +41,16 @@ const MultipleFilePicker = ({
   onChange,
   onError: onError_,
   onMaxSizeError: onMaxSizeError_,
+  permissionPrompt,
   pickerText,
   style,
   title,
   value
 }) => {
   const { files: values } = value || {};
-
   const [newFile, setNewFile] = useState(null);
   const [uploadedFiles, setUploadedFiles] = useState(isArray(values) ? getInitialValuesFrom(values) : []);
-  const [rawFiles, setRawFiles] = useState(isArray(values) ? values : []);
+  const [rawFiles, setRawFiles] = useState(Array.isArray(values) ? values : []);
 
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const closeDrawer = () => setIsDrawerOpen(false);
@@ -64,44 +67,129 @@ const MultipleFilePicker = ({
 
   useEffect(() => {
     onChange?.(isEmpty(rawFiles) ? null : { files: rawFiles });
-  }, [rawFiles]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rawFiles, onChange]);
 
   useEffect(() => {
     if (newFile) {
-      setUploadedFiles([...uploadedFiles, newFile.uploadFile]);
-      setRawFiles([...rawFiles, newFile.rawFile]);
+      setUploadedFiles(prev => [...prev, newFile.uploadFile]);
+      setRawFiles(prev => [...prev, newFile.rawFile]);
     }
   }, [newFile]);
 
+  const remainingSlots = () => Math.max((maxFiles || 0) - uploadedFiles.length, 0);
+
+  const handleAssets = async response => {
+    if (!response || response.didCancel) {
+      return;
+    }
+    if (response.errorCode) {
+      onError(response.errorCode);
+      return;
+    }
+    closeDrawer();
+    response.assets.forEach(async asset => {
+      const file = await retrieveFile(asset.uri, asset.type);
+      if (!file) {
+        onError(response.errorCode || 'No se pudo obtener el archivo');
+        return;
+      }
+      if (isFileTypeInvalid({ type: asset.type }, allowedTypes, fileTypeError, onError)) return;
+      if (isFileSizeInvaid({ size: file.size }, maxFileByteSize, onMaxSizeError)) return;
+      setNewFile({
+        uploadFile: { name: file.data.name, size: file.data.size },
+        rawFile: blobToFile(file, asset.type)
+      });
+    });
+  };
+
   const onPickFiles = async () => {
-    const documents = await DocumentPicker.pick({
-      allowMultiSelection: true,
-      type: isEmpty(allowedTypes) ? DocumentPicker.types.allFiles : allowedTypes.map(getDocumentPickerType)
+    if (!ExpoDocumentPicker || typeof ExpoDocumentPicker.getDocumentAsync !== 'function') {
+      // eslint-disable-next-line no-console
+      console.error('No se encontró un ExpoDocumentPicker válido. instala "expo-document-picker".');
+      return;
+    }
+
+    const normalizeTypes = types => {
+      if (!types || types.length === 0) return DEFAULT_ALLOWED_TYPES;
+      const hasMime = types.some(t => typeof t === 'string' && t.includes('/'));
+      if (hasMime) return types;
+      const mapped = types.map(getMimeType).filter(Boolean);
+      return mapped.length ? mapped : DEFAULT_ALLOWED_TYPES;
+    };
+
+    const types = normalizeTypes(allowedTypes);
+    const result = await ExpoDocumentPicker.getDocumentAsync({
+      multiple: true,
+      type: types
     });
 
-    if (uploadedFiles.length + documents.length > maxFiles)
+    if (result.canceled) {
+      return;
+    }
+
+    const documents = result.assets || [];
+
+    const slots = remainingSlots();
+    if (slots <= 0) {
       onError('La cantidad de archivos supera al máximo permitido');
-    else {
-      closeDrawer();
-      documents.forEach(async document => {
-        if (!uploadedFiles.some(({ name }) => name === document.name)) {
-          if (isFileTypeInvalid(document, allowedTypes, fileTypeError, onError)) return;
-          if (isFileSizeInvaid(document, maxFileByteSize, onMaxSizeError)) return;
-          const file = await retrieveFile(document.uri, document.type, document.name);
-          if (await isFileFormatInvalid(file, allowedPDFUploadSizes, onError)) return;
-          setNewFile({
-            uploadFile: { name: document.name, size: document.size },
-            rawFile: blobToFile(file, document.type)
-          });
-        }
+      return;
+    }
+
+    closeDrawer();
+
+    let added = 0;
+    // eslint-disable-next-line no-restricted-syntax
+    for (const asset of documents) {
+      if (added >= slots) break;
+      // eslint-disable-next-line no-await-in-loop
+      const document = {
+        uri: asset.uri,
+        type: asset.mimeType || asset.type || 'application/octet-stream',
+        size: asset.size,
+        name: asset.name || 'document'
+      };
+
+      if (uploadedFiles.some(({ name }) => name === document.name)) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+      if (isFileTypeInvalid(document, allowedTypes, fileTypeError, onError)) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+      if (isFileSizeInvaid(document, maxFileByteSize, onMaxSizeError)) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+
+      // eslint-disable-next-line no-await-in-loop
+      const file = await retrieveFile(document.uri, document.type, document.name);
+      // eslint-disable-next-line no-await-in-loop
+      if (await isFileFormatInvalid(file, allowedPDFUploadSizes, onError)) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+
+      setNewFile({
+        uploadFile: { name: document.name, size: document.size },
+        rawFile: blobToFile(file, document.type)
       });
+      added += 1;
+    }
+
+    if (documents.length > slots) {
+      onError('Algunos archivos no se agregaron por superar el máximo permitido');
     }
   };
 
   // eslint-disable-next-line consistent-return
   const requestPermissionCamera = async () => {
     try {
-      const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA);
+      const granted = await PermissionsAndroid.request(
+        PermissionsAndroid.PERMISSIONS.CAMERA,
+        permissionPrompt?.androidRationale
+      );
       return granted === PermissionsAndroid.RESULTS.GRANTED
         ? launchCamera
         : { errorCode: 'Son necesarios permisos para utilizar la cámara' };
@@ -111,14 +199,50 @@ const MultipleFilePicker = ({
   };
 
   const handleShowImagePicker = sourceImage => {
+    if (
+      !ExpoImagePicker ||
+      (!ExpoImagePicker.launchImageLibraryAsync && !ExpoImagePicker.launchCameraAsync)
+    ) {
+      // eslint-disable-next-line no-console
+      console.error('No se encontró un ExpoImagePicker válido. instala "expo-image-picker".');
+      return undefined;
+    }
+    if (remainingSlots() <= 0) {
+      onError('La cantidad de archivos supera al máximo permitido');
+      return undefined;
+    }
+    if (!sourceImage || typeof sourceImage !== 'function') {
+      if (ExpoImagePicker?.launchImageLibraryAsync) {
+        const expoGalleryAdapter = async (options, cb) => {
+          try {
+            const selectionLimit = options?.selectionLimit ?? 1;
+            const mediaTypes = ExpoImagePicker.MediaType ? [ExpoImagePicker.MediaType.image] : undefined;
+            const result = await ExpoImagePicker.launchImageLibraryAsync({
+              mediaTypes,
+              allowsMultipleSelection: selectionLimit && selectionLimit > 1,
+              quality: 1
+            });
+            cb?.({ assets: result?.assets || [], didCancel: result?.canceled });
+          } catch (e) {
+            cb?.({ didCancel: true, errorCode: String(e) });
+          }
+        };
+        handleShowImagePicker(expoGalleryAdapter);
+        return undefined;
+      }
+      onError('No hay selector de imágenes disponible en este entorno.');
+      return undefined;
+    }
+
     if (sourceImage?.errorCode) {
       onError(sourceImage.errorCode);
-      return;
+      return undefined;
     }
+    closeDrawer();
     sourceImage(
       {
         mediaType: 'photo',
-        selectionLimit: Math.max(maxFiles - uploadedFiles.length, 0)
+        selectionLimit: Math.max(remainingSlots(), 1)
       },
       async response => {
         if (response.didCancel) return;
@@ -134,8 +258,8 @@ const MultipleFilePicker = ({
             onError(response.errorCode);
             return;
           }
-          if (isFileTypeInvalid(file, allowedTypes, fileTypeError, onError)) return;
-          if (isFileSizeInvaid(file, maxFileByteSize, onMaxSizeError)) return;
+          if (isFileTypeInvalid({ type: asset.type }, allowedTypes, fileTypeError, onError)) return;
+          if (isFileSizeInvaid({ size: file.size }, maxFileByteSize, onMaxSizeError)) return;
 
           setNewFile({
             uploadFile: { name: file.data.name, size: file.data.size },
@@ -144,12 +268,128 @@ const MultipleFilePicker = ({
         });
       }
     );
+    return undefined;
   };
 
-  const onPickCamera = async () =>
+  const onPickCamera = async () => {
+    if (
+      !ExpoImagePicker ||
+      (!ExpoImagePicker.launchImageLibraryAsync && !ExpoImagePicker.launchCameraAsync)
+    ) {
+      // eslint-disable-next-line no-console
+      console.error('No se encontró un ExpoImagePicker válido. instala "expo-image-picker".');
+      return undefined;
+    }
+    if (remainingSlots() <= 0) {
+      onError('La cantidad de archivos supera al máximo permitido');
+      return undefined;
+    }
+    if (ExpoImagePicker?.launchCameraAsync) {
+      const openCamera = async () => {
+        try {
+          const mediaTypes = ExpoImagePicker.MediaType ? [ExpoImagePicker.MediaType.image] : undefined;
+          closeDrawer();
+          const result = await ExpoImagePicker.launchCameraAsync({
+            mediaTypes,
+            allowsMultipleSelection: false,
+            quality: 1
+          });
+          await handleAssets({ assets: result?.assets || [], didCancel: result?.canceled }, 'expo:camera');
+        } catch (e) {
+          await handleAssets({ didCancel: true, errorCode: String(e) }, 'expo:camera');
+        }
+      };
+      const askAndOpenCamera = async () => {
+        try {
+          const perm = await ExpoImagePicker.requestCameraPermissionsAsync?.();
+          if (!perm || perm.status !== 'granted') {
+            onError('Son necesarios permisos para utilizar la cámara');
+            return;
+          }
+          openCamera();
+        } catch (e) {
+          onError('Son necesarios permisos para utilizar la cámara');
+        }
+      };
+
+      const pre = permissionPrompt?.expoPrePrompt;
+      if (pre?.title || pre?.message) {
+        Alert.alert(
+          pre.title || 'Permiso de cámara',
+          pre.message || 'Necesitamos acceso a la cámara para tomar fotos.',
+          [
+            { text: pre.cancelText || 'Cancelar', style: 'cancel' },
+            { text: pre.confirmText || 'Continuar', onPress: askAndOpenCamera }
+          ]
+        );
+      } else {
+        askAndOpenCamera();
+      }
+      return undefined;
+    }
     handleShowImagePicker(IS_IOS ? launchCamera : await requestPermissionCamera());
+    return undefined;
+  };
+
+  const onPickGallery = () => {
+    if (
+      !ExpoImagePicker ||
+      (!ExpoImagePicker.launchImageLibraryAsync && !ExpoImagePicker.launchCameraAsync)
+    ) {
+      // eslint-disable-next-line no-console
+      console.error('No se encontró un ExpoImagePicker válido. instala "expo-image-picker".');
+      return undefined;
+    }
+    if (remainingSlots() <= 0) {
+      onError('La cantidad de archivos supera al máximo permitido');
+      return undefined;
+    }
+    if (ExpoImagePicker?.launchImageLibraryAsync) {
+      const openGallery = async () => {
+        try {
+          const mediaTypes = ExpoImagePicker.MediaType ? [ExpoImagePicker.MediaType.image] : undefined;
+          closeDrawer();
+          const result = await ExpoImagePicker.launchImageLibraryAsync({
+            mediaTypes,
+            allowsMultipleSelection: false,
+            quality: 1
+          });
+          await handleAssets({ assets: result?.assets || [], didCancel: result?.canceled }, 'expo:gallery');
+        } catch (e) {
+          await handleAssets({ didCancel: true, errorCode: String(e) }, 'expo:gallery');
+        }
+      };
 
-  const onPickGallery = () => handleShowImagePicker(launchImageLibrary);
+      const askPermissionAndOpen = async () => {
+        try {
+          const perm = await ExpoImagePicker.requestMediaLibraryPermissionsAsync?.();
+          if (!perm || perm.status !== 'granted') {
+            onError('Son necesarios permisos para acceder a tus fotos');
+            return;
+          }
+          openGallery();
+        } catch (e) {
+          onError('Son necesarios permisos para acceder a tus fotos');
+        }
+      };
+
+      const pre = permissionPrompt?.expoGalleryPrePrompt;
+      if (pre?.title || pre?.message) {
+        Alert.alert(
+          pre.title || 'Acceso a fotos',
+          pre.message || 'Necesitamos acceder a tu galería para seleccionar imágenes.',
+          [
+            { text: pre.cancelText || 'Cancelar', style: 'cancel' },
+            { text: pre.confirmText || 'Continuar', onPress: askPermissionAndOpen }
+          ]
+        );
+      } else {
+        askPermissionAndOpen();
+      }
+      return undefined;
+    }
+    return handleShowImagePicker(launchImageLibrary);
+  };
 
   const handleDeleteFile = index => {
     onChange?.(null);