Guía completa de Expo Image Picker para 2026

Probablemente estás en el punto donde la interfaz de usuario está lista, la pantalla de perfil tiene un botón 'Subir foto' y ahora la parte fácil de repente no es fácil. El flujo real de selección de imágenes toca permisos nativos, interfaces controladas por el sistema, diferentes formas de retorno que muchos desarrolladores esperan y un puñado de detalles de tiempo de compilación que solo se muestran después de enviar un verdadero build.

Es ahí donde entra en juego Expo Image Picker. Es la biblioteca oficial de Expo para abrir la interfaz de sistema para elegir imágenes y videos de la biblioteca del dispositivo o tomar una foto con la cámara, como se describe en Repositorio de paquetes de Expo. En la práctica, eso significa que obtienes un puente confiable a la entrada de medios nativos, pero no una experiencia de medios personalizada que se comporte de manera idéntica en todos los dispositivos.

Esta guía está escrita para la primera implementación, no para la demo. Se centra en las decisiones que importan en producción: configuración de flujo de trabajo gestionado versus desnudo, manejo de permisos que no te sorprenderán más tarde, análisis de resultados seguro, y un patrón de carga práctico después de que el usuario elija un archivo. Si estás trabajando en un conjunto de configuración nativa personalizado, también ayuda a entender cómo esto difiere de un flujo de trabajo de cliente de desarrollo de Expo. Índice.

Iniciación con el selector de imágenes de Expo

• Instalación y configuración esencial
• Configuración de flujo de trabajo gestionado
  • Detalles de configuración de React Native desnudo
  • Acceso a la cámara y la biblioteca de medios
• Un componente mínimo pero seguro
  • Flujos de biblioteca y cámara
  • ¿Qué esperar del UI del sistema
  • __CAPGO_KEEP_0__
• Manejo de Resultados y Opciones del Selector
  • Leer el objeto de resultados correctamente
  • Opciones que cambian el comportamiento downstream
  • URI versus base64
  • Un patrón de resultados más seguro para aplicaciones reales
• Patrones Avanzados y Diferencias de Plataforma
  • Un patrón de carga práctico
  • Dónde las diferencias de plataforma importan realmente
  • Diferencias entre flujo administrado y desnudo
• Resolución de Problemas Comunes
  • Verificaciones rápidas para fallas comunes
  • Un breve checklist de producción

Iniciación con Expo Image Picker

Un gerente de productos solicita fotos de perfil. Una semana más tarde, la misma característica también necesita subir recibos, capturar la cámara para informes de incidentes y reintentar cuando los usuarios denieguen la autorización la primera vez. El input de imágenes se expande rápidamente porque toca permisos nativos, UI propiedad del sistema, manejo de archivos temporales y flujos de carga de backend.

expo-image-picker ¿Es el módulo Expo SDK para ese trabajo. Abre el selector de plataforma o la interfaz de cámara y devuelve la media seleccionada en una forma que tu React Native code puede manejar. El JavaScript API es pequeño. El principal desafío reside en obtener la configuración nativa, el flujo de permisos y el manejo de resultados correctos en proyectos administrados y desnudos.

El principal equilibrio es claro. Dejas que iOS y Android presenten sus propias interfaces de media en lugar de construir un selector personalizado. Eso suele dar un mejor resultado: los usuarios ya entienden las pantallas del sistema, las solicitudes de permiso se comportan de la manera que el sistema espera y tu equipo evita mantener una implementación de galería en JavaScript.

Trata esto como una característica de integración nativa con una interfaz de React.

Ese enfoque ayuda porque los modos de falla rara vez están en el botón que llama al selector. Normalmente provienen de uno de tres lugares:

• Configuración nativa: configuración de plugin faltante, cadenas de permiso incorrectas o una compilación obsoleta después de cambiar la configuración
• Comportamiento en tiempo de ejecución: los usuarios pueden denegar el acceso, conceder acceso limitado a la biblioteca en iOS o cancelar el flujo sin seleccionar nada
• Análisis de resultados: el actual API devuelve un assets array, por lo tanto, ejemplos más antiguos que leen result.uri directamente fallan

La elección de flujo de trabajo también cambia el camino de configuración. En una aplicación Expo administrada, la mayoría del trabajo nativo vive en la configuración de la aplicación y requiere una reconstrucción cuando esa configuración cambia. En una aplicación desnuda, todavía obtiene el módulo de Expo API, pero necesita verificar los ajustes de proyecto iOS y Android subyacentes de manera más directa. Si su equipo está utilizando un cliente personalizado en lugar de Expo Go, esta guía se combina bien con Capgo’s explicación de cómo un cliente de desarrollo de Expo cambia la prueba de módulos nativos.

Ese split importa para el resto de la guía porque el camino feliz solo es la mitad de la historia. Una implementación de selector es sólida cuando funciona en ambos flujos de trabajo, maneja las particularidades de permisos de plataforma sin sorprender al usuario y pasa un archivo usable a su capa de subida en lugar de detenerse en una vista previa local.

Instalación y Configuración Esencial

La instalación requiere un comando. Obtener la configuración nativa correcta es lo que determina si el selector funciona en un dispositivo real, en un cliente de desarrollo personalizado y en su versión de producción.

expo-image-picker proporciona un API React-facing sobre los seleccionadores de plataforma para fotos, videos y captura de cámara. La llamada de JavaScript es simple. La configuración no lo es, porque el acceso a fotos y la captura de cámara están controlados por iOS y Android, no por React Native.

Comience con el instalador de Expo versión consciente:

npx expo install expo-image-picker

Usar expo install en lugar de npm install o yarn add. Expo coincide con la versión del paquete con tu SDK, lo que evita un tipo común de problemas de compatibilidad nativa. Si estás comparando cómo los módulos de Expo se ajustan a tu proceso de lanzamiento, esta Resumen general de herramientas de Expo es una referencia útil.

Configuración de flujo administrado

En el flujo administrado, declara el plugin en la configuración de la aplicación para que Expo pueda aplicar los cambios nativos en tiempo de compilación.

Ejemplo con app.json:

{
  "expo": {
    "plugins": ["expo-image-picker"]
  }
}

Es el mínimo configuración. En la práctica, los equipos suelen agregar texto de permiso también, especialmente en iOS donde la solicitud del sistema debe explicar por qué la aplicación necesita acceso. Mantén el texto específico para la acción del usuario. 'Subir una foto de perfil' es mejor que 'Necesita acceso a medios'.

Un detalle operativo causa un gran desperdicio de tiempo. Cambiar pluginslas cadenas de permiso, o la configuración nativa, requiere una compilación. Recargar JavaScript no aplica esos cambios. En Expo Go, también estás limitado por lo que el cliente ya incluye. En una compilación de desarrollo o producción, el proyecto nativo refleja tu configuración solo después de una nueva compilación.

Detalles de configuración de React Native sin capa

En una aplicación sin capa, el paquete API es el mismo, pero debes verificar más del proyecto nativo tú mismo. Las descripciones de uso de iOS son la primera cosa a verificar. Si tu flujo puede abrir la biblioteca, iniciar la cámara, o grabar video con audio, tu aplicación necesita las cadenas de permiso correspondientes en Info.plist antes de reconstruir.

Una lista práctica de verificación para proyectos sin proyecto es así:

1. Instalar expo-image-picker con npx expo install expo-image-picker.
2. Agregar la configuración del complemento si su proyecto utiliza plugins de configuración de Expo.
3. Confirmar que las descripciones de uso de iOS coinciden con las características que se exponen.
4. Reconstruir las aplicaciones de iOS y Android después de cualquier cambio en la configuración nativa.

El texto de permiso faltante a menudo parece un error de tiempo de ejecución porque la interfaz code está bien y el manipulador de botones se ejecuta. El error está más abajo en la pila. Normalmente, reviso Info.plist, la configuración de la aplicación y si la compilación actual incluye los cambios nativos más recientes antes de tocar el componente code.

Unos pocos hábitos hacen que la configuración sea más predecible:

• Escribir el texto de permiso para la acción real: los usuarios deben entender por qué están viendo la solicitud.
• Configura la cámara y la biblioteca de manera separada: Una puede funcionar mientras la otra sigue fallando.
• Reconstruye después de cambios nativos: La recarga caliente y la actualización rápida no actualizan los permisos nativos.
• Prueba en dispositivo: El comportamiento del simulador puede ocultar problemas de permisos y cámara.

Si el selector de imágenes funciona durante el desarrollo pero se rompe en TestFlight o la versión de la Tienda de Juegos, considera eso como un problema de configuración primero. La mayoría de las veces, es así.

Acceso a la Cámara y Biblioteca de Medios

Un usuario hace clic en ‘Subir foto’, espera que se abra la cámara o la biblioteca, y tu aplicación tiene una sola tarea en ese momento. Abre la interfaz de usuario del sistema adecuada, maneja la negación o la cancelación sin romper la pantalla, y devuelve una referencia local de archivo usable para la vista previa o el envío.

Suena simple hasta que pruebes tanto compilaciones administradas como compilaciones desnudas en iOS y Android. El JavaScript API se mantiene compacto, pero el comportamiento de ejecución sigue dependiendo de las solicitudes del sistema operativo, el hardware del dispositivo y cómo configuraste los permisos nativos anteriormente.

Un componente mínimo pero seguro

The flujo principal es consistente en proyectos de flujo de Expo administrado y de flujo desnudo. Solicite la autorización relevante, lance el selector, compruebe si el usuario canceló, luego lea el primer activo de result.assets.

Un componente de referencia se parece a esto:

import { useState } from 'react';
import { View, Button, Image, Alert } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

export default function PhotoInput() {
  const [imageUri, setImageUri] = useState<string | null>(null);

  const pickFromLibrary = async () => {
    const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();

    if (!permission.granted) {
      Alert.alert('Permission required', 'Please allow photo library access.');
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ['images'],
      allowsEditing: true,
      quality: 1,
    });

    if (result.canceled) return;

    const asset = result.assets?.[0];
    if (!asset?.uri) return;

    setImageUri(asset.uri);
  };

  const takePhoto = async () => {
    const permission = await ImagePicker.requestCameraPermissionsAsync();

    if (!permission.granted) {
      Alert.alert('Permission required', 'Please allow camera access.');
      return;
    }

    const result = await ImagePicker.launchCameraAsync({
      allowsEditing: true,
      quality: 1,
    });

    if (result.canceled) return;

    const asset = result.assets?.[0];
    if (!asset?.uri) return;

    setImageUri(asset.uri);
  };

  return (
    <View>
      <Button title="Choose from library" onPress={pickFromLibrary} />
      <Button title="Take photo" onPress={takePhoto} />
      {imageUri ? (
        <Image
          source={{ uri: imageUri }}
          style={{ width: 200, height: 200 }}
        />
      ) : null}
    </View>
  );
}

Estos tres detalles importan aquí.

• Solicite permisos de biblioteca y cámara por separado. Fallecen de manera independiente.
• Trate la cancelación como una acción de usuario normal, no como un estado de error.
• Lea de assets[0], porque el selector devuelve un array de activos en lugar de un nivel superior uri.

Flujos de biblioteca y cámara

Comience con el flujo de biblioteca si desea el camino más rápido a una característica que funciona. Es más fácil de probar, funciona en más configuraciones de simulador y evita los casos de hardware de cámara. Agregue el soporte de cámara una vez que el camino de manejo de resultados esté establecido.

El camino de la cámara tiene más formas de fallar en desarrollo. El soporte del simulador de iOS es limitado. Los emuladores de Android pueden no exponer el comportamiento de la cámara que coincide con un dispositivo real. En proyectos desnudos, esas brechas pueden enviar a buscar el componente code aunque el problema real es la configuración nativa o el entorno de prueba.

Un patrón de interfaz de usuario limpio es preguntar al usuario por la fuente antes de llamar al selector API:

const showPickerOptions = () => {
  Alert.alert('Upload image', 'Choose a source', [
    { text: 'Camera', onPress: takePhoto },
    { text: 'Photo Library', onPress: pickFromLibrary },
    { text: 'Cancel', style: 'cancel' },
  ]);
};

Esta separación mantiene cada función enfocada. También lo hace más fácil agregar análisis, banderas de característica o reglas específicas del servidor más tarde. Por ejemplo, algunos equipos permiten subir archivos de biblioteca para imágenes de perfil pero requieren capturas de cámara frescas para la verificación de identidad.

If su aplicación más amplia también admite patrones de acceso a archivos fuera de Expo o estás comparando convenciones entre pilas nativas, esta Capacitor biblioteca de fotos es un contexto útil.

Un demo corto ayuda cuando estás mostrando este flujo a compañeros de equipo o QA:

¿Qué esperar del UI del sistema

expo-image-picker abre el selector de plataforma o UI de cámara. Tu aplicación no controla cada pantalla en ese flujo. Esa distinción importa porque “funciona en mi dispositivo” a menudo significa “el sistema operativo permitió el camino que probé.”

En iOS, los usuarios pueden otorgar acceso limitado a la biblioteca en lugar de acceso completo. En Android, el comportamiento del selector puede variar según la versión del sistema operativo y la piel del proveedor. En proyectos de flujo administrado, Expo maneja más de la cableado nativo por ti. En proyectos de flujo desnudo, debes confirmar que tu aplicación compilada incluye los cambios de permiso nativos que hiciste. El sitio de llamada de JavaScript puede ser idéntico en ambos casos mientras que el resultado en tiempo de ejecución difiere.

Normalmente pruebo estos casos antes de llamar a la característica lista:

• primera solicitud de permiso
• permiso denegado
• cancelación del usuario
• selección de biblioteca exitosa
• captura de cámara exitosa en un dispositivo físico
• preview inmediato de la URI local devuelta

Aquellos casos se traducen directamente a comportamientos de producción reales. También establecen el siguiente paso limpiamente si necesita enviar el archivo a un servidor, una pila de moderación o un punto final de publicación como el publicación de medios de Instagram API.

Gestión de resultados y opciones del selector

El resultado del selector es la parte que usualmente necesita lógica de producción real. La interfaz de usuario del sistema devuelve un objeto estructurado, no solo una ruta de archivo, y pequeños errores aquí llevan a vistas rotas, subidas vacías o crash después de que un usuario cancela

Leer el objeto de resultado correctamente

La forma del resultado que importa en las aplicaciones Expo actuales es result.assets[0].urino un nivel superior result.uriEse detalle afecta tanto proyectos de flujo de trabajo administrados como proyectos de flujo de trabajo desnudo porque el JavaScript API es el mismo aunque la configuración nativa difiera debajo

Utilice un patrón de guardia primero:

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ['images'],
  allowsEditing: true,
  quality: 1,
});

if (result.canceled) {
  return;
}

const asset = result.assets?.[0];
if (!asset) {
  return;
}

const { uri } = asset;
setImageUri(uri);

Esto maneja los dos casos de falla que veo con más frecuencia. Un selector cancelado no te da un activo para leer, y code que asume result.assets[0] Siempre existe y fallará en tiempo de ejecución.

Una vez que tenga la URI, mostrar una vista previa es sencillo:

<Image source={{ uri: imageUri }} style={{ width: 240, height: 240 }} />

Si planea subir más tarde, mantenga todo el asset objeto alrededor, no solo la URI. En la práctica, fileName, mimeType, width, height, y fileSize son comunes para la validación, el registro o la construcción de una solicitud multipart más limpia.

Las opciones que cambian el comportamiento downstream

Un par de opciones del selector afectan más que la pantalla de selección. Modelan el tamaño del archivo, el comportamiento de edición y qué debe aceptar su backend.

A pocos compromisos se les pasa por alto:

• allowsEditing es útil cuando el slot de imagen tiene una forma o tamaño fijo. Es menos útil si tu servidor realiza su propio pipeline de recorte y deseas el archivo original.
• quality influye en el tiempo de carga, la presión de memoria y el almacenamiento del servidor. quality: 1 no es automáticamente la elección correcta.
• mediaTypes debe coincidir con las reglas del backend. Si el servidor rechaza videos, no permitas que el selector devuelva ellos.
• base64 aumenta el tamaño del paquete en memoria. Evítalo a menos que el servicio receptor lo requiera.

Ese último punto importa en dispositivos con memoria baja. Un URI de archivo local suele ser la mejor entrega para la vista previa y el multipart upload. La base64 tiene usos válidos, pero es costoso en comparación con pasar una referencia de archivo.

URI versus base64

Para la mayoría de las aplicaciones, la regla es simple:

• Usa URI para vistas previas.
• Utilice URI para subir archivos.
• Utilice base64 solo cuando el sistema receptor solicita explícitamente contenido codificado.

Ese patrón mantiene al selector code pequeño y más fácil de probar. También se alinea con cómo se construyen muchas flujos de medios de backend, incluidos servicios que eventualmente publican en plataformas externas como el selector de publicación de medios de Instagram API.

Si su equipo envía actualizaciones OTA frecuentes o mueve activos de imágenes a través de la entrega de aplicaciones, las decisiones de tamaño de archivo aquí tienen un impacto en el resto de la canalización. Esta guía sobre optimización de imágenes para actualizaciones de aplicaciones es una compañera útil para la configuración del selector.

Un patrón de resultado más seguro para aplicaciones reales

Para demo code, solo se almacenan imageUri es suficiente. En producción, almacene un objeto normalizado para que el siguiente paso, vista previa, validación, carga o reintento, no necesite reinterpretar la respuesta del selector bruto cada vez.

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ['images'],
  allowsEditing: true,
  quality: 0.8,
});

if (result.canceled || !result.assets?.length) {
  return;
}

const asset = result.assets[0];

setSelectedImage({
  uri: asset.uri,
  fileName: asset.fileName ?? 'upload.jpg',
  mimeType: asset.mimeType ?? 'image/jpeg',
  width: asset.width,
  height: asset.height,
  fileSize: asset.fileSize ?? null,
});

Esto le da una forma predecible dentro de la aplicación. También hace que los proyectos administrados y bare sean más fáciles de mantener alineados porque la aplicación code permanece estable mientras trabaja a través de las diferencias nativas en otro lugar.

Una última comprobación ayuda. No habilite campos de resultados adicionales solo por si acaso. Solicite los datos que sabe que necesita, y mantenga al selector enfocado en la selección en lugar de convertirlo en un paso general de procesamiento de archivos.

Patrones avanzados y diferencias de plataforma

Un característica de selector suele dejar de ser simple en el momento en que la primera imagen seleccionada debe sobrevivir a los reintentos, encabezados de autenticación, diferencias de permisos nativos y un endpoint de carga real. expo-image-picker maneja la selección bien. El resto de la característica está en su aplicación.

Un patrón de carga práctico

Para APIs que esperan una subida de archivo, FormData es todavía la opción de seguridad más segura por defecto. Funciona en backends comunes de Rails, Node, Laravel, Django y Go, y mantiene al selector separado de las preocupaciones de transporte.

async function uploadImage(imageUri: string) {
  const formData = new FormData();

  formData.append('file', {
    uri: imageUri,
    name: 'upload.jpg',
    type: 'image/jpeg',
  } as any);

  const response = await fetch('https://your-api.example.com/uploads', {
    method: 'POST',
    body: formData,
    headers: {
      Accept: 'application/json',
    },
  });

  if (!response.ok) {
    throw new Error('Upload failed');
  }

  return response.json();
}

Eso code es suficiente para probar que el camino funciona, pero las aplicaciones de producción suelen necesitar una capa adicional. Derive name y desde el activo seleccionado cuando sea posible, adjunta autenticación fuera de la función del selector y mantiene el estado de carga separado del estado del selector para que una solicitud fallida no fuerce al usuario a abrir de nuevo la biblioteca. type Un par de comprobaciones previenen las fallas comunes que veo en la revisión:

Confirmar la versión local

• existe antes de construir la solicitud uri Vincula una vista previa antes de la carga para que los usuarios detecten el archivo incorrecto temprano
• Prevenir pulsaciones repetidas mientras la solicitud está en vuelo
• Maneja fallas de red por separado de la cancelación del selector o errores de permiso
• Espera que la validación del servidor rechace archivos grandes, tipos MIME no admitidos o autenticación faltante
• Si tu servidor requiere base64 en lugar de multipart, eso es usualmente una restricción del servidor, no una exigencia del selector. Multipart es más barato en memoria y más fácil de razonar sobre en móviles.

Donde las diferencias de plataforma importan realmente

La interfaz del selector es nativa, por lo que hereda el comportamiento nativo. Eso afecta tanto lo que los usuarios ven como lo que tu __CAPGO_KEEP_0__ debe asumir.

La UI del selector es nativa, por lo que hereda el comportamiento nativo. Eso afecta tanto lo que los usuarios ven como lo que tu code debe asumir.

En iOS, los flujos de edición y las solicitudes de permiso siguen las convenciones de Apple. El acceso limitado a Fotos puede devolver un conjunto más estrecho de activos que lo que vio su cuenta de prueba en un dispositivo con acceso completo. En Android, el comportamiento del selector varía más según la versión del sistema operativo y la capa de la marca del fabricante, especialmente alrededor de álbumes, nombres de archivo y cómo se devuelven las capturas de la cámara. Las aplicaciones de React Native puro sienten estas diferencias de manera más directa porque se tiene más control sobre la configuración nativa, pero las aplicaciones de Expo administradas todavía necesitan code que trata al selector como una forma de plataforma en lugar de perfectamente uniforme.

La regla práctica es simple. Confíe en los campos que puede validar, no en la interfaz de usuario o la metadata idéntica entre dispositivos.

Unos pocos ejemplos importan en aplicaciones reales:

• Edición y recorte: La interfaz de usuario y el comportamiento de recorte no son idénticos entre iOS y Android
• Los metadatos devueltos: fileName, mimeType, y fileSize pueden estar ausentes o inconsistentes, por lo que agregue fallbacks
• Permisos: El acceso a fotos de iOS puede estar limitado a artículos seleccionados, mientras que el comportamiento de Android depende más de la versión del sistema operativo y el soporte del selector del sistema
• Salida de cámara: Las imágenes capturadas pueden regresar con diferentes nombres, orientación o características de compresión que los activos de la biblioteca

Si su equipo también trabaja fuera de Expo, esta Guía de desarrollo de aplicaciones de DesignStack proporciona contexto de Android útil para las decisiones de manejo de medios que se muestran más allá de una sola biblioteca.

Diferencias entre flujo de trabajo administrado y desnudo

En este punto, las opciones de configuración comienzan a importar operativamente.

En el flujo de trabajo administrado, las cadenas de permiso y la configuración del plugin suelen vivir en la configuración de la aplicación, y los cambios nativos se aplican cuando creas una nueva compilación. Esto mantiene la superficie de JavaScript limpia, pero también significa que una corrección de configuración no es visible hasta la próxima compilación nativa. Los actualizaciones OTA no parchean permisos nativos faltantes.

En el flujo de trabajo desnudo, la misma característica tiene más partes en movimiento. Necesitas verificar el uso de descripciones de iOS nativas, el comportamiento del manifiesto de Android, la instalación de paquetes y el tiempo de compilación por tu cuenta. El beneficio es el control. El costo es que un problema de selector puede estar causado por la configuración nativa, no por el sitio de llamada de JavaScript.

Los equipos que cambian entre Expo y Capacitor subestiman a menudo cuán diferentes son estas capas de abstracción. Capgo tiene una explicación útil de cómo Capacitor maneja las diferencias de plataforma, y es un punto de comparación bueno si estás decidido a saber cuánta configuración nativa quieres que tu equipo tenga.

Mi preferencia es consistente en ambos flujos de trabajo. Mantén el selector code estrecho, normaliza el resultado una vez, sube a través de una capa de API dedicada, y trata el comportamiento específico de la plataforma como algo que configurar y probar explícitamente en lugar de suavizarlo con suposiciones.

Resolución de problemas de problemas comunes

La mayoría de los errores de la herramienta de selección de imágenes de Expo se clasifican en un pequeño conjunto de categorías. La solución más rápida suele ser identificar qué capa está fallando: configuración, permisos, manejo de resultados o renderizado.

Verificación rápida de fallas comunes

Si la pestaña no se abre o los permisos fallan, compruebe la configuración nativa primero. En aplicaciones bare, especialmente, las descripciones de uso de iOS faltantes son una causa común de raíz.

Si la aplicación se bloquea después de que un usuario cierra la pestaña, inspeccione el manejo de resultados. Muchas implementaciones asumen aún una URI directa y saltan la canceled comprobación.

Unos pocos mapeos rápidos ayudan:

• Errores de permisos denegados: Verifique la configuración de la aplicación y las cadenas de permisos nativos, luego reconstruya.
• undefined URI de imagen: Lee desde result.assets?.[0]?.uri, no result.uri.
• No sucede nada después de cancelar: Eso puede ser correcto. Trata a cancelar como un estado de no-op.
• La imagen no se renderiza: Confirma que la URI se almacenó en estado y se pasó a <Image source={{ uri }} />.
• La cámara actúa de manera extraña en el simulador: Prueba en un dispositivo físico antes de perseguir un error de biblioteca.

Lista de comprobación de producción corta

Utiliza esto como paso final antes de enviar:

• Instala con herramientas de Expo: Utiliza npx expo install expo-image-picker.
• Configura piezas nativas: Agrega la descripción del plugin y las permisos requeridos.
• Solicite permisos de manera intencional: Flujos de cámara y biblioteca de medios separados.
• Proteja cada resultado: Comprobar result.canceled y leer de manera segura assets[0].
• Preferir subidas basadas en URI: Mantenga base64 solo para casos especiales.
• Pruebe dispositivos reales: Es especialmente relevante para la captura de cámara y las solicitudes de permisos.

Si su equipo envía Capacitor o aplicaciones de Electron junto con proyectos de React Native, Capgo es una opción para entregar actualizaciones de JavaScript, CSS, configuración y recursos sin tener que esperar a la revisión de la tienda para cada cambio. Es relevante cuando se resuelven problemas relacionados con imágenes en su capa web, como la interfaz de usuario de carga, las reglas de validación, la copia o el manejo de recursos alrededor del flujo del selector.