Guías Técnicas

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.