Contexto de perfil con persistencia y avatar aleatorio usando IA

Conecta tu tercer tab Mi perfil con un contexto de perfil persistente y un servicio de avatar aleatorio con IA en React Native. Aquí verás cómo estructurar el context, preparar el provider, reutilizar una función de persistencia y componer una URL que genera un avatar distinto en cada carga.

¿Cómo crear un contexto de perfil con persistencia en React Native?

Para sumar Mi perfil a los tabs de home y explore, se crea un context en un archivo TSX con tipos claros, constantes y un flujo de carga. La persistencia se resuelve con Async Storage usando una store key dedicada y un modelo de datos simple: nombre, rol y avatar.

¿Qué modelo e interfaz definen el avatar y el perfil?

• Modelo de datos: name, role y avatar como link o imagen.
• Respuesta del context: loading, profile y funciones para actualizar y setear avatar.
• Store key para Async Storage: clave única para leer y escribir el perfil.
• Datos por defecto: valores iniciales para name, role y avatar cuando no exista persistencia.

¿Cómo se inicializa el context y el hook de acceso?

• Creación de profile context con createContext y estado inicial: loading en true, profile por defecto y funciones asíncronas vacías.
• Exportación de un useProfile que consume el context vía useContext.

¿Cómo funciona el provider con estado, carga y efectos?

• Provider que retorna un nodo con children y un value del context.
• useState para loading y profile inicial por defecto.
• useEffect asíncrono con try/catch: lee de Async Storage mediante getItem usando la store key y, si hay datos válidos, los guarda en el estado.
• Manejo de carga: al finalizar, setLoading(false) para habilitar la UI sin bloquear la app.

¿Cómo persistir y actualizar el perfil y el avatar?

La clave está en una función reutilizable que escribe en el estado y en Async Storage, asegurando que el perfil se mantenga entre sesiones.

¿Qué hace la función persist y cómo se reutiliza?

• Actualiza el estado con el nuevo profile mediante useState.
• Guarda el profile en Async Storage dentro de un try/catch.
• Se reutiliza en update: llama a persist con el profile recibido.
• Se reutiliza en setAvatar: llama a persist con el profile que incluye el nuevo avatar.
• useMemo memoiza el objeto de valor del context para evitar renders innecesarios.
• El provider expone value con loading, profile y funciones; recibe children que usan estas capacidades en los tabs.

¿Cómo generar un avatar aleatorio con una API?

Se implementan helpers que construyen una URL dinámica para una API de imágenes. Cada avatar usa una semilla aleatoria basada en el nombre del usuario y la fecha, además de estilos y fondos elegidos al azar.

¿Qué helpers y keywords intervienen en la generación?

• Semilla aleatoria: mezcla nombre de usuario y fecha con matemática simple para que siempre cambie.
• pick: utilitario que elige un elemento aleatorio de una lista.
• styles: palabras clave que guían el aspecto del avatar generado.
• Colores de fondo: lista de BGS para variar el background.
• Composición de URL: selecciona un style con pick, crea seed con encodeURIComponent(name + fecha), elige un background y arma la URL para la API de imágenes.
• Retorno: la función devuelve la URL final, distinta en cada ejecución.

¿Te animas a crear un componente reusable para mostrar y persistir el avatar generado? Cuéntame cómo lo implementarías y qué estilos agregarías.