Aprenderás a crear un carrusel horizontal de hábitos sugeridos en React Native usando ScrollView y FlatList, construyendo la segunda tab de tu app: el explorer. Es ideal para quien ya domina componentes básicos y quiere armar interfaces reutilizables que permitan seleccionar y mostrar elementos de forma dinámica.

La idea central es sencilla: tienes un carrusel de sugerencias donde agregas cuantos hábitos quieras, y un listado que te muestra lo que vas seleccionando. Dos piezas que se comunican entre sí mediante estado.

Cómo creo el componente QuickAddChips para sugerencias rápidas

Todo empieza con un componente nuevo. Creas un new file llamado QuickAddChips, pensado como un carrusel de sugerencias que te permita agregar hábitos de manera rápida [00:48].

Para alimentarlo, defines un pequeño arreglo con objetos que representan esos hábitos sugeridos. Luego haces el componente exportable, como se viene trabajando en el curso.

La clave está en el manejo del estado. Aquí trabajas con un onPick, que funciona como el select de cada tarjeta [01:31]. Lo inicializas entregándole el título como un string y una función vacía por defecto.

¿Qué es onPick en este componente? Es la función que se ejecuta al seleccionar una tarjeta del carrusel. Recibe el título del hábito como string y lo envía al estado del explorador para añadirlo al listado.

Por qué uso ScrollView horizontal para el carrusel

El carrusel nace de la etiqueta ScrollView. Lo que lo convierte en carrusel es la dirección: puede ser vertical u horizontal, y en este caso eliges horizontal [02:34].

Hay dos detalles que mejoran la experiencia:

• Ocultas la barra de scroll poniendo esa propiedad en false.
• Agregas un poco de padding al contenido para darle espacio.

Para mostrar las sugerencias, mapeas el objeto dentro de llaves (porque es código JavaScript), recorriendo desde lo general hacia cada sugerencia individual.

Cómo agrego el botón seleccionable a cada sugerencia

Dentro del mapeo colocas el botón que permite seleccionar cada hábito. Usas el mismo Pressable que ya venías manejando [03:43].

A ese botón le pasas propiedades concretas:

• El ID, que corresponde al título de cada sugerencia, para tener un identificador único.
• Algunos estilos con border y espaciado horizontal para decorarlo.

Para cerrar, agregas un texto desde la librería del tema y muestras el título mapeado de forma individual. Así queda lista una forma rápida de agregar hábitos, y solo falta administrarla desde el explorador.

Cómo conecto el explorador con el estado seleccionado

En el explorador usas el state para filtrar qué estás presionando y qué añades a ese grupo de hábitos sugeridos [05:03]. La lógica suma al listado existente los hábitos que agregas de manera rápida.

Primero eliminas lo que había antes y llamas al componente reutilizable Screen, que te da el safe area en la pantalla. Dentro colocas un View y unos textos que indican las secciones: las sugerencias rápidas arriba y los seleccionados debajo.

Luego traes tu nuevo componente QuickAddChips como etiqueta. Aquí lo importante es mandarle el listado de hábitos sugeridos a través de tu useState y la función que los señala [06:28].

¿Para qué sirve useState en este flujo? Guarda el listado de hábitos seleccionados y permite actualizarlo cada vez que tocas un chip. El estado es la memoria que conecta el carrusel con la lista de abajo.

Cómo muestro los seleccionados con FlatList

Para renderizar las selecciones usas una etiqueta nueva: FlatList. Esta te permite mostrar toda la información a medida que la vas visualizando [06:50]. Ojo con el import, porque FlatList viene de una librería distinta a la de los componentes anteriores.

FlatList necesita tres piezas para funcionar:

• data: el estado posicionado en la parte superior, que contiene lo seleccionado.
• keyExtractor: una llave que identifica de forma única cada elemento del listado.
• renderItem: define qué mostrar por cada ítem, en este caso un texto con el título de la sugerencia.

Después de armar estos tres puntos, falta cubrir un caso importante: cuando no hay nada seleccionado.

Qué muestro cuando la lista está vacía

Aquí entra ListEmptyComponent, que verifica si el listado está vacío [08:41]. Si no hay hábitos, muestras el mensaje "Toca un chip para añadir", guiando al usuario sobre qué hacer.

Al guardar y entrar a Explore ves el resultado completo: el listado del componente reutilizable, las sugerencias en el carrusel horizontal y el estado actual de la selección [09:21]. Cada vez que seleccionas un hábito sugerido, se agrega al listado.

Este funcionamiento prepara el terreno para una próxima funcionalidad: agregar hábitos directamente desde Explorer al apartado de Home. Y en la siguiente clase verás la diferencia entre ScrollView y FlatList.

¿Qué parte te costó más conectar, el estado o el FlatList? Cuéntame en los comentarios.