O SectionList é um componente essencial no React Native, projetado especificamente para renderizar listas com agrupamento por seções. Ele é ideal quando você precisa exibir dados organizados em categorias distintas, como uma lista de contatos ordenados pela primeira letra do nome ou eventos classificados por data. Ao longo deste artigo, você aprenderá como configurar e utilizar o SectionList de forma eficiente, explorando suas funcionalidades e melhorando a experiência do usuário em suas aplicações.

Estrutura Básica do Componente SectionList

O SectionList do React Native é ideal para exibir listas agrupadas em seções. Para configurá-lo, você precisa fornecer a prop sections, que deve ser um array de objetos. Cada objeto define uma seção e contém duas propriedades essenciais:

Aqui está um exemplo básico de configuração do SectionList:

 

    const sections = [
      {
        title: 'Section 1',
        data: [
          { id: '1', name: 'Rodrigo' },
          { id: '2', name: 'João' }
        ]
      },
      {
        title: 'Section 2',
        data: [
          { id: '3', name: 'Maria' },
          { id: '4', name: 'Ana' }
        ]
      }
    ];

Neste exemplo, o SectionList é configurado com duas seções: “Section 1” e “Section 2”. Cada seção contém um array de itens, onde cada item é representado por um objeto com um id e um name. Esta estrutura permite criar listas organizadas e fáceis de navegar.

 

Configurando o SectionList

Para utilizar o SectionList no React Native, você deve importá-lo e configurar suas propriedades principais: sections, keyExtractor, renderItem, e renderSectionHeader. Aqui está um guia passo a passo:

  1. Importação do SectionListPrimeiro, importe o SectionList junto com outros componentes necessários do React Native:
    import React from 'react';
    import { SectionList, Text, View } from 'react-native';

Definindo as Seções

A prop sections deve ser um array de objetos, onde cada objeto representa uma seção com um título e um array de itens. Veja o exemplo:

 


    const sections = [
    {
      title: 'Section 1',
      data: [
        { id: '1', name: 'Rodrigo' },
        { id: '2', name: 'João' }
      ]
    },
    {
      title: 'Section 2',
      data: [
        { id: '3', name: 'Maria' },
        { id: '4', name: 'Ana' }
      ]
    }
  ];

 

Configuração do SectionList

Utilize o SectionList para renderizar suas seções e itens:


    const MySectionList = () => {
      return (
        <SectionList
          sections={sections}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => <Text>{item.name}</Text>}
          renderSectionHeader={({ section: { title } }) => (
            <View>
              <Text style={{ fontWeight: 'bold', fontSize: 18 }}>{title}</Text>
            </View>
          )}
        />
      );
    };
    
    export default MySectionList;

 

keyExtractor={(item) => item.id}

renderItem: Função que renderiza cada item da lista. Recebe um objeto item e retorna um componente React para exibir o item. Neste exemplo, estamos exibindo o nome de cada pessoa dentro de um componente Text:

renderItem={({ item }) => <Text>{item.name}</Text>}

renderSectionHeader: Função que renderiza o cabeçalho de cada seção. Recebe um objeto section e retorna um componente React para exibir o título da seção. O título é exibido em um componente Text com estilo em negrito e tamanho aumentado:

 


    renderSectionHeader={({ section: { title } }) => (
      <View>
        <Text style={{ fontWeight: 'bold', fontSize: 18 }}>{title}</Text>
      </View>
    )}

Com essas configurações, você pode criar listas bem estruturadas e organizadas, facilitando a navegação e a visualização dos dados agrupados.

Estilizando o SectionList

Para melhorar a aparência do seu SectionList, você pode aplicar estilos aos itens e cabeçalhos. O StyleSheet do React Native é uma ferramenta poderosa para definir e aplicar estilos de forma eficiente e organizada. Vamos ver como você pode estilizar o seu SectionList para torná-lo mais atraente.

  1. Importação do StyleSheetPrimeiro, importe o StyleSheet do React Native:

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

Definindo os Estilos

Crie um objeto de estilos utilizando o StyleSheet.create. Isso permite que você defina estilos para diferentes partes do seu SectionList, como o cabeçalho da seção e os itens da lista:


    const styles = StyleSheet.create({
      sectionHeader: {
        backgroundColor: '#f4f4f4',
        padding: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#ddd',
      },
      item: {
        padding: 10,
        fontSize: 16,
        borderBottomWidth: 1,
        borderBottomColor: '#ddd',
      },
      itemContainer: {
        backgroundColor: '#fff',
      },
      title: {
        fontWeight: 'bold',
        fontSize: 18,
      },
    });

Aplicando Estilos ao SectionList

Use os estilos definidos no StyleSheet para estilizar os componentes dentro do SectionList. Aqui está o código atualizado com estilos aplicados:


    const MySectionList = () => {
      return (
        <SectionList
          sections={sections}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => (
            <View style={styles.itemContainer}>
              <Text style={styles.item}<{item.name}</Text>
            </View>
          )}
          renderSectionHeader={({ section: { title } }) => (
            <View style={styles.sectionHeader}>
              <Text style={styles.title}>{title}</Text>
            </View>
          )}
        />
      );
    };
    
    export default MySectionList;

Resultado Final

Com esses estilos, seu SectionList ficará visualmente mais atraente e mais fácil de ler. A personalização dos estilos pode ajudar a melhorar a experiência do usuário e tornar sua aplicação mais agradável visualmente.