Guías Técnicas

SectionList en React Native: Listas Seccionadas con Cabeceras

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

El componente SectionList se utiliza para renderizar listas de datos agrupados en secciones, con cabeceras que permiten distinguir los grupos. Es ideal para listas largas y complejas con categorías.

Estructura básica de SectionList

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

const datos = [
  {
    title: 'Sección 1',
    data: ['Elemento 1', 'Elemento 2', 'Elemento 3'],
  },
  {
    title: 'Sección 2',
    data: ['Elemento A', 'Elemento B', 'Elemento C'],
  },
  {
    title: 'Sección 3',
    data: ['Elemento X', 'Elemento Y', 'Elemento Z'],
  },
  {
    title: 'Sección 4',
    data: ['Elemento 1', 'Elemento 2', 'Elemento 3'],
  },
  {
    title: 'Sección 5',
    data: ['Elemento A', 'Elemento B', 'Elemento C'],
  },
  {
    title: 'Sección 6',
    data: ['Elemento X', 'Elemento Y', 'Elemento Z'],
  }
];

const App = () => {
return (
  <SectionList
    sections={datos}
    renderItem={({ item }) => (
      <View style={styles.item}>
        <Text>{item}</Text>
      </View>
    )}
    renderSectionHeader={({ section }) => (
      <Text style={styles.header}>{section.title}</Text>
    )}
    keyExtractor={(item, index) => index}
  />
);
};

const styles = StyleSheet.create({
  item: {
    padding: 15,
    marginVertical: 8,
    backgroundColor: '#f9c2ff',
    borderRadius: 10,
  },
  header: {
    fontSize: 22,
    fontWeight: 'bold',
    backgroundColor: '#ddd',
    padding: 10,
  },
});

export default App;


Propiedades más comunes

  • sections: Array de secciones, cada sección debe tener un title y un data (array de elementos).
  • renderItem: Función que define cómo se ve cada elemento dentro de la sección.
  • renderSectionHeader: Función que define cómo se ve la cabecera de cada sección.
  • keyExtractor: Extrae una key única para cada item (se recomienda usar el índice si los datos son dinámicos).
  • ListHeaderComponent: Componente opcional para agregar una cabecera a la lista completa.
  • ListFooterComponent: Componente opcional para agregar un pie de lista.

Lista vacía

Esta propiedad se utiliza para mostrar un mensaje o componente cuando la lista no tiene datos. Puedes usar ListEmptyComponent para mostrar un mensaje personalizado.

jsx 
<SectionList
sections={[]}
renderItem={({ item }) => <Text>{item}</Text>}
renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
ListEmptyComponent={<Text style={{ textAlign: 'center' }}>
  No hay datos disponibles
</Text>}
/>

Agregando cabecera a la lista

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

jsx 
<SectionList
sections={datos}
renderItem={({ item }) => <Text>{item}</Text>}
renderSectionHeader={({ section }) => 
  <Text style={styles.header}>{section.title}</Text>
}
ListHeaderComponent={<Text style={{ fontSize: 24, fontWeight: 'bold' }}>
Lista de Elementos por Sección</Text>}
/>

Scroll horizontal por sección

Puedes hacer que cada sección tenga un scroll horizontal utilizando la propiedad horizontal en el SectionList. Esto es útil para mostrar elementos en una fila dentro de cada sección.

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

const datos = [
{
  title: 'Frutas',
  data: ['Manzana', 'Banana', 'Naranja', 'Mango'],
},
{
  title: 'Verduras',
  data: ['Zanahoria', 'Brócoli', 'Lechuga', 'Espinaca'],
},
];

export default function App() {
return (
  <SafeAreaProvider>
    <SafeAreaView style={styles.safeArea}>
      <SectionList
        horizontal
        sections={datos}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.itemText}>{item}</Text>
          </View>
        )}
        renderSectionHeader={({ section: { title } }) => (
          <View style={styles.headerContainer}>
            <Text style={styles.header}>{title}</Text>
          </View>
        )}
        showsHorizontalScrollIndicator={false}
      />
    </SafeAreaView>
  </SafeAreaProvider>
);
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    paddingTop: 20,
    backgroundColor: '#fff',
  },
  item: {
    backgroundColor: 'skyblue',
    padding: 15,
    marginHorizontal: 8,
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemText: {
    fontSize: 16,
    fontWeight: '500',
    color: '#333',
  },
  headerContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    marginHorizontal: 10,
  },
  header: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#007AFF',
    marginBottom: 8,
  },
});
  Resumen

SectionList es ideal cuando necesitas mostrar listas con cabeceras para secciones, ofreciendo una manera eficiente de manejar grupos de datos con scroll.