Crear un carrusel con ScrollView horizontal

Clase 12 de 23 • Curso de Fundamentos de React Native

Resumen

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 }}
/>