¿Quieres que tu app acceda a la cámara y la galería del dispositivo? Con la librería ImagePicker en React Native puedes tomar fotos, elegir imágenes desde el almacenamiento del sistema operativo y usarlas como avatar dentro de un formulario de perfil. Esta guía es para desarrolladores que ya trabajan con componentes reciclables y manejo de estado y quieren sumar funcionalidades nativas reales.
La clase parte de un formulario de perfil donde escribes un nombre y una profesión, y desde ahí puedes tomar una foto, elegir una de la galería o generar un avatar aleatorio con inteligencia artificial. Todo se guarda en la memoria del dispositivo, así que al salir y regresar la información sigue ahí.
Cómo construir el componente de avatar reutilizable
El punto de partida es un componente de avatar exportable que recibe tres cosas: el tamaño, el nombre y la URL que se va a generar [00:52]. También se le agrega la posibilidad de que sea presionable, reutilizando el botón que ya veníamos usando junto con las etiquetas view y text.
La novedad aquí es la etiqueta image, que mediante la propiedad source coloca la URL de la imagen, y con los estilos ajustas su apariencia. El detalle del border-radius está configurado para formar un círculo perfecto [01:20].
Hay un respaldo elegante: si no existe imagen, el componente muestra las iniciales del nombre. Esa funcionalidad venía de un archivo utils anterior y se integró para cubrir ese caso [01:33].
¿Qué hace la propiedad source en la etiqueta Image? Es la propiedad que recibe la URL o referencia de la imagen que quieres mostrar dentro del componente Image en React Native.
Cómo cargar y guardar los datos del perfil
Lo primero fue renombrar el profile que antes se llamaba about, tanto en el archivo como en su referencia [02:10]. Después se traen todas las funcionalidades del context mediante un useProfile, junto con los estilos.
Como siempre se puede entrar directo a la pantalla de perfil, los states se llenan con el estado que ya existe. El zustate maneja setName y name con un valor por defecto desde el inicio, y lo mismo aplica para el rol [02:40]. Además se agrega un estado para saber si la app está ocupada o cargando algo.
Un useEffect se encarga de la primera carga: llama a setName con profile.name y hace lo mismo con profile.role. Este efecto depende de ambos valores para reaccionar a sus cambios [03:17].
Para persistir los datos se crea una función save:
- Coloca el estado de ocupado en true al iniciar.
- Hace un await sobre el update del contexto del perfil.
- Envía el name con trim, y si está vacío indica que no tiene nombre.
- Repite la lógica para el rol, marcándolo como sin rol si está vacío.
- Al finalizar, regresa el estado a false y lanza una alerta de confirmación.
Con eso ya tienes el ciclo completo de leer y escribir la información del perfil.
Cómo integrar la cámara y la galería con ImagePicker
Aquí viene lo interesante. Para acceder a imágenes nativas se instala una librería mediante un comando que queda disponible en la zona de recursos [01:55]. Luego la importas en la parte superior trayendo todas sus funcionalidades como ImagePicker [05:30].
La función para la galería define el tipo de imagen y la calidad, que va de cero a uno. En la clase se usó un valor de 0.8 [05:50]. Si no se toma ninguna foto, se mantiene el avatar ya seleccionado.
Para la cámara el flujo es parecido pero suma un paso clave: los permisos. Se solicita el acceso a la cámara del sistema operativo y se verifica el status. Si no hay permisos, se levanta una alerta para que el usuario los otorgue y la función no retorna nada [06:30].
- Se usa launchCameraAsync para abrir la cámara.
- Si el usuario no cancela, la imagen se almacena en setAvatar.
- Para la galería se replica la lógica con el flujo fromGallery.
Un punto que vale subrayar: no estás usando una cámara ni galería externas, sino las mismas del sistema operativo, ya sea iOS o Android [09:00].
¿Por qué hay que pedir permisos para usar la cámara? Porque el sistema operativo protege el acceso a hardware sensible. Debes verificar el status del permiso y, si falta, mostrar una alerta para que el usuario lo conceda antes de abrir la cámara.
Cómo generar un avatar con inteligencia artificial
La tercera opción es una función asíncrona llamada makeInteligenciaArtificial. Primero coloca su flag de carga en true porque va a procesar [07:00]. Después llama al servicio que ya existía, le pasa el nombre del usuario y almacena en el avatar la URL que ese servicio retorna.
Al terminar, el estado de carga vuelve a su valor inactivo. El avatar generado depende de una semilla aleatoria basada en lo escrito en el nombre y en los estilos disponibles [08:40].
¿Qué determina el avatar generado por IA? Una semilla aleatoria que toma como base el nombre escrito en el formulario y los estilos configurados, por lo que cada nombre produce una variación distinta.
Cómo armar la interfaz y mostrar el estado de carga
Mientras se trae la información se usa un if que muestra un componente de carga propio, importado desde los componentes que creamos [07:30]. Así evitas que la pantalla aparezca vacía durante la espera.
Para la vista se emplea una etiqueta que evita que el teclado interrumpa la pantalla al abrirse, y se usa platform para aplicar un padding distinto cuando el sistema es iOS [07:50]. Como hay pocos datos, se opta por un ScrollView en lugar de un FlatList.
Dentro se arma el diseño con estos elementos:
- Una vista centrada con margen que llama al componente de avatar con nombre y URL.
- Un text input para el nombre, enlazado a name y setName.
- Otro text input idéntico para el rol o profesión.
- Un botón para tomar foto y otro para elegirla desde la galería.
- Un primary button para generar con IA y un botón de guardar.
Cada botón reutiliza los componentes reciclables, donde solo colocas el título y la funcionalidad. A los estilos del input se les da un border y un redondeado [08:20].
El paso más importante es agregar el provider en la raíz de las etiquetas, para que todas las tabs puedan acceder al contexto del perfil [08:30]. Con esto ya puedes escribir nombre y profesión, guardarlos, generar avatares, tomar fotos, elegir de la galería y, al regresar, encontrar todo persistido en el almacenamiento del dispositivo.
¿Qué te gustaría construir primero con la cámara nativa en tu app? Cuéntalo en los comentarios.
