Crear un carrusel con ScrollView horizontal

Construye un carrusel horizontal de hábitos sugeridos en la pestaña Explore con una experiencia ágil y clara. Aquí verás cómo crear el componente QuickAddChips con ScrollView, capturar selecciones con useState y renderizar lo elegido con FlatList. Todo centrado en componentización, manejo de estado y renderizado eficiente de listas.

¿Cómo crear un carrusel horizontal con ScrollView?

Para un carrusel de sugerencias, crea el componente QuickAddChips. La idea es mapear un arreglo de hábitos y mostrarlos como chips presionables. Define una prop onPick para notificar el hábito elegido y oculta la barra de scroll para una UI limpia. El carrusel se logra con ScrollView horizontal, showsHorizontalScrollIndicator: false y un ligero padding.

import React from 'react';
import { ScrollView, Pressable, Text, StyleSheet } from 'react-native';

type Suggestion = { title: string };

// Arreglo de sugerencias: define tus hábitos aquí.
const suggestions: Suggestion[] = [
  // { title: '...' },
];

interface Props {
  onPick?: (title: string) => void; // callback para el hábito seleccionado.
}

export function QuickAddChips({ onPick = () => {} }: Props) {
  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={{ paddingHorizontal: 16 }}
    >
      {suggestions.map((s) => (
        <Pressable
          key={s.title} // ID por título para identificar el chip.
          onPress={() => onPick(s.title)}
          style={styles.chip}
        >
          <Text>{s.title}</Text>
        </Pressable>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  chip: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 999,
    paddingVertical: 8,
    paddingHorizontal: 12,
    marginRight: 8,
  },
});

¿Qué props clave usar?

• horizontal: activa el carrusel horizontal.
• showsHorizontalScrollIndicator: false para ocultar la barra.
• contentContainerStyle: padding para respiración visual.
• key con el título: identificador único por chip.
• onPress en Pressable: ejecuta onPick con el título.

¿Cómo capturar selecciones y administrar el estado con useState?

En Explore, necesitas registrar lo que el usuario selecciona. Usa useState para un arreglo de hábitos sugeridos elegidos y pásale al componente QuickAddChips un callback que agregue ítems al estado. Además, incluye textos guía como “Sugerencias rápidas” y “Seleccionados” para claridad.

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { QuickAddChips } from './QuickAddChips';

export function ExploreScreen() {
  const [selected, setSelected] = useState<string[]>([]);

  return (
    // Si usas un contenedor reusable screen, envuélvelo aquí.
    <View style={{ flex: 1, padding: 16 }}>
      <Text style={{ fontSize: 16, fontWeight: '600' }}>Sugerencias rápidas</Text>
      <QuickAddChips onPick={(title) => setSelected((prev) => [...prev, title])} />

      <Text style={{ marginTop: 16, fontSize: 16, fontWeight: '600' }}>Seleccionados</Text>
      {/* FlatList irá aquí para mostrar lo elegido. */}
    </View>
  );
}

¿Cómo integrar el componente en Explorer?

• Importa QuickAddChips desde su archivo.
• Declara el estado con useState para los seleccionados.
• Pasa onPick para agregar títulos al estado.
• Muestra textos guía para la sección.

¿Cómo listar hábitos seleccionados con FlatList?

Para renderizar lo seleccionado de forma declarativa y eficiente, usa FlatList. Define la data con tu estado, una keyExtractor basada en el título y un renderItem que muestre cada ítem. Si la lista está vacía, expón un ListEmptyComponent con el mensaje “toca un chip para añadir”.

import React from 'react';
import { FlatList, Text } from 'react-native';

// Dentro de ExploreScreen, debajo de “Seleccionados”.
<FlatList
  data={selected}
  keyExtractor={(t) => t}
  renderItem={({ item }) => <Text>- {item}</Text>}
  ListEmptyComponent={<Text>toca un chip para añadir.</Text>}
  style={{ marginTop: 8 }}
/>

¿Qué detalles cuidan la experiencia?

• ID por título: simplifica claves únicas y evita colisiones.
• Mensaje de lista vacía: guía la interacción cuando no hay datos.
• Estilos con borde y espaciado: chips claros y legibles.
• Scroll horizontal sin barra: interfaz más limpia.
• Componentización: QuickAddChips se reutiliza y mantiene el código ordenado.

¿Te gustaría ver otra variante de chips o cómo manejar duplicados en el estado? Comparte tus dudas y comenta qué hábito agregarías primero.