Guías Técnicas

Desplazamiento Horizontal con FlatList en React Native: Guía Práctica

  ¿Qué es FlatList Horizontal y para qué se usa?

El componente FlatList permite renderizar listas de manera eficiente. Al habilitar la propiedad horizontal, se transforma en una lista desplazable horizontalmente, útil para crear carruseles de imágenes, menús de categorías y más.

Estructura Básica de FlatList Horizontal

Para crear una lista horizontal, simplemente debes agregar la propiedad horizontal={true} al componente FlatList.

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

const datos = [
  { id: '1', nombre: 'Elemento 1' },
  { id: '2', nombre: 'Elemento 2' },
  { id: '3', nombre: 'Elemento 3' },
  { id: '4', nombre: 'Elemento 4' },
  { id: '5', nombre: 'Elemento 5' },
  { id: '6', nombre: 'Elemento 6' },
  { id: '7', nombre: 'Elemento 7' },
  { id: '8', nombre: 'Elemento 8' },
  { id: '9', nombre: 'Elemento 9' },
  { id: '10', nombre: 'Elemento 10' }
];

const App = () => {
return (
  <FlatList
    horizontal={true}
    data={datos}
    renderItem={({ item }) => (
      <View style={styles.item}>
        <Text>{item.nombre}</Text>
      </View>
    )}
    keyExtractor={(item) => item.id}
  />
);
};

const styles = StyleSheet.create({
item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginHorizontal: 8,
    borderRadius: 10,
  },
});

export default App;

Propiedades Importantes

  • horizontal: Cuando se establece en true, hace que el FlatList se desplace horizontalmente.
  • data: El array de datos a renderizar.
  • renderItem: Función que define cómo se renderiza cada item.
  • keyExtractor: Extrae una clave única para cada item, imprescindible cuando se usa con FlatList.
  • showsHorizontalScrollIndicator: Controla la visibilidad del indicador de desplazamiento horizontal.
  • contentContainerStyle: Estilo que aplica a la vista interna de la lista (útil para personalizar el espaciado o alineación).

🚀 Ejemplo de Lista Horizontal

Este ejemplo muestra cómo configurar una lista que se desplaza horizontalmente con FlatList.

jsx 
import React from 'react';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { FlatList, View, Text, StyleSheet } from 'react-native';

const datos = [
{ id: '1', nombre: 'Elemento 1' },
{ id: '2', nombre: 'Elemento 2' },
{ id: '3', nombre: 'Elemento 3' },
{ id: '4', nombre: 'Elemento 4' },
{ id: '5', nombre: 'Elemento 5' },
{ id: '6', nombre: 'Elemento 6' },
{ id: '7', nombre: 'Elemento 7' },
{ id: '8', nombre: 'Elemento 8' },
{ id: '9', nombre: 'Elemento 9' },
{ id: '10', nombre: 'Elemento 10' }
];

const App = () => {
return (
  <SafeAreaProvider>
    <SafeAreaView style={styles.safeArea}>
      <FlatList
        horizontal
        data={datos}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.text}>{item.nombre}</Text>
          </View>
        )}
        keyExtractor={(item) => item.id}
      />
    </SafeAreaView>
  </SafeAreaProvider>
);
};

const styles = StyleSheet.create({
safeArea: {
  flex: 1,
  backgroundColor: '#fff',
  paddingHorizontal: 10,
},
item: {
  backgroundColor: 'orange',
  padding: 20,
  marginHorizontal: 8,
  borderRadius: 10,
  alignItems: 'center',
  justifyContent: 'center',
},
text: {
  fontSize: 16,
  fontWeight: 'bold',
  color: '#333',
},
});

export default App;

🧑‍💻 Personalizando el Estilo del Contenido

Puedes personalizar el estilo del contenido de la lista usando la propiedad contentContainerStyle para agregar márgenes o alineación adicional.

jsx 
<FlatList
  horizontal={true}
  data={datos}
  renderItem={({ item }) => (
    <View style={styles.item}>
      <Text>{item.nombre}</Text>
    </View>
  )}
  keyExtractor={(item) => item.id}
  contentContainerStyle={{ paddingHorizontal: 20 }}
/>

Lista Vacía en FlatList Horizontal

Para manejar una lista vacía, puedes usar la propiedad ListEmptyComponent, que mostrará un mensaje o componente cuando la lista esté vacía.

jsx 
<FlatList
  horizontal={true}
  data={[]}
  renderItem={({ item }) => (
    <View style={styles.item}>
      <Text>{item.nombre}</Text>
    </View>
  )}
  keyExtractor={(item) => item.id}
  ListEmptyComponent={<Text>No hay elementos</Text>}
/>

💨 Desplazamiento Suave

Si deseas desactivar el movimiento del indicador de desplazamiento horizontal, puedes usar la propiedad scrollEnabled y establecerla en false para deshabilitar el desplazamiento.

jsx 
<FlatList
  horizontal={true}
  data={datos}
  renderItem={({ item }) => (
    <View style={styles.item}>
      <Text>{item.nombre}</Text>
    </View>
  )}
  keyExtractor={(item) => item.id}
  scrollEnabled={false}
/>
  Resumen

El FlatList horizontal es una poderosa herramienta en React Native para crear listas desplazables horizontalmente. Usando la propiedad horizontal, puedes transformar cualquier lista en una experiencia de desplazamiento horizontal eficiente. Es importante tener en cuenta que a diferencia de otras opciones, FlatList solo renderiza los elementos visibles, lo que optimiza el rendimiento incluso con grandes listas de datos.

Recuerda siempre aprovechar propiedades como contentContainerStyle y ListEmptyComponent para personalizar tu lista y mejorar la experiencia del usuario.