React Native: utilizando o componente SectionList

O SectionList é um componente poderoso do React Native, projetado para renderizar listas com seções. Ele é particularmente útil quando você tem uma lista de dados agrupados em seções distintas, como uma lista de contatos ordenados por letra inicial ou uma lista de eventos agrupados por data. Durante a leitura deste artigo, você vai ficar por dentro, em detalhes, de como configurar e utilizar o SectionList.

Estrutura Básica do SectionList

O SectionList aceita uma prop sections que é um array de objetos. Cada objeto representa uma seção e deve conter duas propriedades principais:

title: O título da seção.

data: Um array de itens que pertencem à seção.

Vamos ver um exemplo simples de como isso é configurado:


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' }
    ]
  }
];

Configurando o SectionList

Para usar o SectionList, precisamos importá-lo do React Native e configurar as props principais: sections, keyExtractor, renderItem e renderSectionHeader.


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

sections

A prop sections recebe o array de seções que definimos anteriormente. Cada seção no array contém um título e um array de dados.

Agora, vamos para a nossa SectionList:


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

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' }
    ]
  }
];

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

A prop keyExtractor é uma função que extrai a chave única para cada item. Normalmente, usamos o id de cada item como a chave.


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

renderItem

A prop renderItem é uma função que renderiza cada item da lista. Recebe um objeto item e retornamos um componente React para exibir o item. Vamos exibir o nome de cada pessoa em um componente Text.


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

renderSectionHeader

A prop renderSectionHeader é uma função que renderiza o cabeçalho de cada seção. Recebe um objeto section e retornamos um componente React para exibir o título da seção.


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

Estilizando o SectionList

Para tornar a lista mais atraente, podemos adicionar estilos aos itens e cabeçalhos. Vamos usar o StyleSheet do React Native para definir alguns estilos básicos.


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

const sections = [
  {
    title: 'Section 1',
    data: [
      { id: '1', name: 'Rodrigo' },
      { id: '2', name: 'Diego' }
    ]
  },
  {
    title: 'Section 2',
    data: [
      { id: '3', name: 'Paulo' },
      { id: '4', name: 'Mayk' }
    ]
  }
];

export function MySectionList() {
  return (
    <View style={styles.container}>
      <SectionList
        sections={SECTIONS}
        keyExtractor={(item) => item.id}
        renderItem={({item}) => <Text>{item.name}</Text>}
        renderSectionHeader={({section: {title}}) => (
          <View style={styles.header}>
            <Text style={styles.headerText}>{title}</Text>
          </View>
        )}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 20,
    paddingTop: 60,
    backgroundColor: '#fff',
  },
  header: {
    backgroundColor: '#f4f4f4',
    paddingVertical: 10,
    paddingHorizontal: 15,
    marginVertical: 5,
    borderRadius: 5,
  },
  headerText: {
    fontWeight: 'bold',
    fontSize: 18,
  },
  item: {
    paddingVertical: 10,
    paddingHorizontal: 15,
    marginVertical: 5,
    backgroundColor: '#eaeaea',
    borderRadius: 5,
  },
});

export default MySectionList;

Explicação dos Estilos

header: Define o estilo do contêiner do cabeçalho da seção, com um fundo cinza claro e padding.

headerText: Define o estilo do texto do cabeçalho, com fonte em negrito e tamanho de fonte 18.

item: Define o estilo de cada item da lista, com padding e uma borda inferior para separar visualmente os itens.

O SectionList do React Native é uma ferramenta poderosa para exibir listas de dados organizadas em seções. Ele é altamente configurável e permite uma personalização fácil através de props como renderItem e renderSectionHeader. Com a ajuda do StyleSheet, podemos estilizar nossa lista para torná-la visualmente atraente e fácil de usar.

Experimente o SectionList em seu próximo projeto React Native e veja como ele pode simplificar a exibição de listas complexas e organizadas!

Já tem graduação? Dê seu próximo passo...

Última chance do ano de garantir sua matrícula de pós-graduação pelo preço atual antes do reajuste!

Dê seu próximo passo...

Última chance antes do reajuste 🔥