Uso de FlatList en React Native: Listas Eficientes con Scroll Optimizado

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

El componente FlatList se utiliza para renderizar listas largas de datos en React Native, de manera eficiente y con scroll incorporado. Es ideal para listas que pueden crecer en tamaño, ya que solo renderiza los elementos visibles en pantalla, mejorando el rendimiento de la aplicación.

🧱 Estructura básica de FlatList

jsx

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

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 = () => {
const renderItem = ({ item }) => (
  <View style={styles.item}>
    <Text style={styles.texto}>{item.nombre}</Text>
  </View>
);

return (
  <SafeAreaProvider>
    <SafeAreaView style={styles.safeArea}>
      <FlatList
        data={datos}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        ListHeaderComponent={<Text style={styles.encabezado}>📋 Lista de elementos</Text>}
        ListFooterComponent={<Text style={styles.pie}>Fin de la lista</Text>}
        ItemSeparatorComponent={() => <View style={styles.separador} />}
        contentContainerStyle={styles.contenedor}
      />
    </SafeAreaView>
  </SafeAreaProvider>
);
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#fff', // Fondo blanco para toda la vista segura
  },
  contenedor: {
    paddingVertical: 10,
  },
  encabezado: {
    fontSize: 20,
    fontWeight: 'bold',
    padding: 15,
    textAlign: 'center',
    backgroundColor: '#e0f7fa',
  },
  item: {
    padding: 20,
    marginHorizontal: 15,
    backgroundColor: '#fce4ec',
    borderRadius: 10,
    alignItems: 'center', // Centra el texto dentro del View
  },
  texto: {
    fontSize: 16,
    color: '#333',
  },
  separador: {
    height: 10,
  },
  pie: {
    textAlign: 'center',
    padding: 15,
    fontStyle: 'italic',
    color: '#666',
  },
});

export default App;

🔁 Propiedades más comunes

data: Array de datos a renderizar, puede ser un array de objetos.
renderItem: Función que define cómo se ve cada elemento, recibe un objeto con item y index.
keyExtractor: Extrae una key única para cada item, generalmente un ID.
horizontal: Si se desea scroll horizontal (true | false).
ListHeaderComponent: Componente opcional para cabecera.
ListEmptyComponent: Componente que se muestra si data está vacío.

🚫 Lista vacía

Las listas vacías son comunes en aplicaciones, y FlatList permite manejar esto fácilmente con la propiedad ListEmptyComponent.

jsx

<FlatList
  data={[]}
  renderItem={({ item }) => <Text>{item.nombre}</Text>}
  keyExtractor={(item) => item.id}
  ListEmptyComponent={<Text style={{ textAlign: 'center' }}>No hay datos</Text>}
/>

➕ Agregando cabecera a la lista

Puedes agregar una cabecera a la lista utilizando la propiedad ListHeaderComponent. Esto es útil para mostrar un título o información adicional.

jsx

<FlatList
  data={datos}
  renderItem={({ item }) => <Text>{item.nombre}</Text>}
  keyExtractor={(item) => item.id}
  ListHeaderComponent={<Text style={{ fontSize: 20, fontWeight: 'bold' }}>Lista de elementos</Text>}
/>

🔄 Scroll horizontal

Si deseas que la lista se desplace horizontalmente, puedes usar la propiedad horizontal. Esto es útil para listas de imágenes o elementos que se pueden ver uno al lado del otro.

jsx

<FlatList
  horizontal
  data={datos}
  renderItem={({ item }) => (
    <View style={{ padding: 10, backgroundColor: 'skyblue', margin: 5 }}>
      <Text>{item.nombre}</Text>
    </View>
  )}
  keyExtractor={(item) => item.id}
/>

¿Por qué FlatList es ideal para listas largas?

✅ FlatList es ideal para listas largas porque solo renderiza lo que está en pantalla (y un poco más), haciendo que el rendimiento sea mucho mejor comparado con ScrollView.