¿Quieres que tu app muestre sugerencias dinámicas y las conecte con otra pantalla? Aquí aprenderás a conectar servicios en React Native usando el tab de Explore, renderizar un carrusel con FlatList y manejar estados de carga. Es ideal para quien ya construye apps móviles y busca reutilizar código y mejorar la experiencia de usuario.

La idea central es simple: tomamos la implementación del servicio de sugerencias y la llevamos al tab de Explore para que el usuario vea categorías de hábitos y pueda agregarlas directo a su listado principal. Y aquí viene lo interesante: todo se conecta con el servicio de hábitos que ya teníamos.

Por qué usar FlatList en vez de ScrollView para un carrusel

El carrusel que vemos en Explore no está hecho con scroll view, sino con flat list. Esta decisión importa cuando manejas listas de datos que vienen de un endpoint.

La diferencia práctica es que FlatList renderiza los elementos de forma optimizada a partir de la data que le pasas, mientras que ScrollView carga todo de golpe. Para un carrusel horizontal que depende de información cargada desde un servicio, FlatList te da mejor control.

¿Qué es FlatList en React Native? Es un componente que renderiza listas de datos de forma eficiente, mostrando solo los elementos visibles. Recibe propiedades como data, keyExtractor y renderItem para construir carruseles o listados [03:30].

Para que el carrusel sea horizontal, primero preguntamos si la data está disponible y, si existe, desplegamos la FlatList con toda la información pasada por sus propiedades.

Cómo manejar dos categorías con useState y Promise.all

Para organizar las sugerencias creamos dos estados con useState: uno para energía y otro para concentración o focus. Ambos son de tipo suggestion, el mismo tipo que definimos en el servicio [00:48].

Cada vez que el usuario entra al tab, disparamos una función con useEffect, que nos permite ejecutar código cada vez que entramos en esa tab [01:19]. Dentro de esa función ocurre la magia de cargar los datos.

Los pasos de esta función asíncrona son:

1. Inicializar una constante de carga en false para saber si la información está cargando [01:30].
2. Marcar la función como async porque hacemos un llamado a un endpoint [01:38].
3. Usar un try catch para el manejo de errores [01:48].
4. Esperar una Promise.all con dos llamadas al servicio suggestFor, una para energía y otra para enfoque [01:54].

¿Para qué sirve Promise.all? Permite esperar varias promesas al mismo tiempo y continuar solo cuando todas se resuelven. Aquí hacemos dos llamadas de categorías en paralelo en vez de una tras otra [01:54].

Una vez resueltas las promesas, guardamos la primera categoría (A) con su setter y la segunda (B) con setFocus, almacenándolas en los estados creados arriba [02:30].

Qué hacer cuando falla la carga de datos

En el bloque catch creamos un console.warn que indica si las funcionalidades se cargaron o no [02:47]. Cuando todo termina, tomamos la variable de carga y la volvemos a setear a false en el return, señalando que el proceso terminó [03:10].

Así tenemos un useEffect que, apenas das clic al tab, ejecuta toda esta funcionalidad de forma confiable.

Cómo renderizar cada tarjeta y evitar código duplicado

Para mostrar cada sugerencia necesitamos que la card se renderice según el ítem que le pasemos. Creamos una funcionalidad que retorna la tarjeta, la cual recibe un emoji, un título, un subtítulo y una función [04:00].

También creamos un key extractor, igual que en la parte de hábitos, que trae el ID de esa información para usarlo como identificador único [04:25].

La parte más valiosa es la sección reutilizable. En vez de repetir todo el bloque de texto y etiquetas, creamos una constante que recibe un título de tipo string y una data de tipo suggestion, que puede venir como arreglo o nulo [04:40]. Con esto reducimos el tamaño del return principal y evitamos duplicar código.

En el return principal solo llamamos a la sección dos veces:

• Una para energía, pasándole el state de energía.
• Otra para enfoque, pasándole el state de focus [07:00].

Por qué mostrar un estado de carga mejora la experiencia

Cuando la data no viene o está cargando, mostramos un objeto de carga con estilo de sombras [05:50]. Reusamos las explore card, pero en vez del subtítulo y la información completa, indicamos simplemente que está cargando.

Al hacer un reload, vemos que antes de mostrar las sugerencias aparece un espacio de carga, y luego podemos agregar un hábito directo desde el carrusel al home [07:25].

El onPick también cambia: ahora enviamos información de tipo suggestion, usando s.title en vez de un valor fijo, y la prioridad ya no se quema porque cada sugerencia trae su propia prioridad definida en el servicio [03:30]. Al agregar una, aparece una alerta nativa de JavaScript que avisa al cliente qué está sucediendo por debajo [03:48].

Cada sugerencia añadida se ve en el listado principal según la prioridad, nombre y subtítulo que configuramos en el servicio. Y lo mejor: puedes agregar todas las que quieras desde ese carrusel.

Con esto ya sabes aplicar estilos predeterminados según el sistema operativo y conectar un servicio con otro, en este caso el tab de Explore con el servicio de hábitos. ¿Qué otra pantalla te gustaría conectar con este flujo? Cuéntame en los comentarios.