¿Quieres guardar el avatar de un usuario y que siga ahí aunque cierre la app? En esta guía aprendes a crear un Context en React Native con persistencia y un servicio que genera imágenes aleatorias con una API tipo inteligencia artificial. Es ideal si ya tienes tus tabs de home y explore y te falta construir el tercero: mi perfil.

La idea es sencilla pero potente: un contexto global guarda los datos del perfil, un provider los carga desde el almacenamiento local, y un servicio arma una URL que entrega un avatar distinto cada vez. Vamos paso a paso.

Qué necesitas para crear el context del perfil

Lo primero es crear un archivo nuevo dentro de la carpeta de contexts con extensión .tsx. Ahí viven los tipos, constantes y la lógica que hará todo el trabajo.

El protagonista es la persistencia. Para lograrla usamos AsyncStorage, la librería que almacena datos localmente en el dispositivo. Se apoya en una storeKey, una constante que identifica dónde guardas y de dónde lees la información del avatar [00:28].

Luego defines el modelo del avatar. Tu perfil necesita tres campos concretos:

• Un name para el nombre del usuario.
• Un rol que describe quién es.
• Un avatar con el link de la imagen a mostrar.

Como es un contexto, también describes su respuesta: un objeto que verifica si la información está cargando, guarda la data del perfil y expone dos funcionalidades clave, actualizar y setear el avatar.

¿Para qué sirve AsyncStorage en React Native? Es una librería que guarda datos de forma local y persistente en el dispositivo. Así el avatar sigue ahí aunque el usuario cierre sesión o la aplicación.

Cómo defines el modelo y el estado por defecto

Antes de crear el contexto necesitas un valor por defecto. Esto evita errores cuando todavía no hay información guardada.

Ese objeto default incluye name, rol y avatar inicializados, con el mismo tipo del modelo pero sin datos reales. Es tu red de seguridad: si no hay nada en memoria, el contexto arranca con algo válido en lugar de romperse [01:40].

Con el modelo listo, creas el contexto usando createContext de React y le pasas el tipo que definiste. Aquí indicas los estados iniciales:

• El estado de carga arranca en true.
• El profile empieza con el valor por defecto.
• Las funcionalidades inician vacías como funciones asíncronas.

Para consumirlo cómodamente, exportas un hook propio con const useProfile, que internamente llama a useContext apuntando al contexto que acabas de crear [03:00]. Así, en cualquier componente, llamas useProfile() y listo.

Cómo construyes el provider con useEffect y try catch

El provider es el componente que envuelve tu app y reparte la información. Devuelve un nodo, que en este caso es el ProfileContext.Provider.

Dentro declaras dos estados con useState: uno para la carga y otro para el perfil por defecto. Después usas useEffect para inicializar el provider apenas se monta. Ahí corre una función asíncrona con un bloque try catch, el patrón que repites cada vez que algo puede fallar.

El flujo de inicialización es claro:

1. Lees el ítem guardado en AsyncStorage usando la storeKey.
2. Si existe información válida, la seteas en el estado para guardarla.
3. Capturas cualquier error en el catch.
4. En el finally, pones setLoading en false para cerrar la carga.

Este paso final importa: aunque la lectura falle, el estado de carga siempre se apaga y la interfaz no se queda congelada.

¿Por qué usar useEffect al inicializar un provider? Porque te permite ejecutar la carga de datos una sola vez cuando el componente se monta, sin bloquear el renderizado inicial de la app.

Cómo guardas cambios con una función persist reutilizable

Aquí viene lo interesante: en lugar de repetir código, creas una sola función que persiste la información. Toma el parámetro que le pasas, lo setea con useState y, dentro de un try catch, lo almacena en AsyncStorage [06:10].

Esa función persist se reutiliza en todos lados:

• En update llamas a persist y le pasas el profile que acabas de montar.
• En setAvatar haces lo mismo, pasando la información que necesitas guardar.

Gracias a esto, cada cambio del perfil se guarda localmente y no se pierde al cerrar sesión. Para optimizar, envuelves todo el valor del contexto en un useMemo, que guarda en memoria el objeto y evita recálculos innecesarios. Luego retornas el nodo con value y children, ese parámetro que representa todos los tabs donde ocuparás la funcionalidad.

Cómo generas avatares aleatorios con una API de imágenes

La parte divertida son los helpers o utils que alimentan el servicio de avatares. El primero es una semilla random que genera un valor nuevo y distinto cada vez, combinando el nombre del usuario con la fecha y algo de matemática [08:30].

También defines un conjunto de palabras clave de estilo y una lista de colores de fondo. Estas sirven como guía para que la API sepa qué tipo de imagen generar. Una función pick elige uno al azar de cada lista.

La función principal recibe un name y arma la imagen así:

1. Elige un estilo al azar con pick sobre los styles.
2. Genera la semilla aleatoria para el formato random.
3. Usa encodeURIComponent para combinar la semilla con el nombre del usuario de forma segura en la URL.
4. Elige un color de fondo al azar desde la lista de BGS.
5. Construye la URL final de la API con estilos, semilla, colores y fecha.

Al mezclar nombre, fechas y valores aleatorios, cada llamada devuelve una imagen distinta. La función termina retornando esa URL, lista para mostrarse como avatar.

¿Cómo generas una imagen aleatoria con una API en React Native? Construyes una URL dinámica que combina parámetros variables como una semilla basada en nombre y fecha, un estilo y un color elegidos al azar, de modo que cada petición entregue una imagen diferente.

Con esto ya tienes el contexto y el provider que almacenan ese avatar aleatorio creado con la API. El reto ahora es tuyo: construye un componente reutilizable que guarde esa imagen como avatar. ¿Cómo lo resolverías tú? Déjalo en los comentarios y nos vemos en la próxima clase.