SectionList

O SectionList é um componente em React Native que permite criar listas agrupadas em seções. Cada seção pode ter seu próprio título e os itens da seção são passados como um array. O SectionList é especialmente útil quando você precisa organizar dados em categorias ou grupos.

Aqui está um exemplo básico de como usar o componente SectionList:

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

const MeuComponente = () => {
  const dados = [
    {
      title: 'A',
      data: ['Item 1', 'Item 2', 'Item 3'],
    },
    {
      title: 'B',
      data: ['Item 4', 'Item 5', 'Item 6'],
    },
  ];

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item}</Text>
    </View>
  );

  const renderSectionHeader = ({ section }) => (
    <View style={styles.sectionHeader}>
      <Text>{section.title}</Text>
    </View>
  );

  return (
    <SectionList
      sections={dados}
      renderItem={renderItem}
      renderSectionHeader={renderSectionHeader}
      keyExtractor={(item, index) => index.toString()}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  sectionHeader: {
    backgroundColor: '#eee',
    padding: 10,
  },
});

export default MeuComponente;

Neste exemplo, SectionList é usado para renderizar uma lista de itens agrupados em seções (“A” e “B” neste caso). sections recebe um array de objetos, onde cada objeto tem uma propriedade title para o título da seção e uma propriedade data para os itens da seção. A função renderItem é usada para renderizar cada item da lista e renderSectionHeader é usada para renderizar o cabeçalho de cada seção.

Props Importantes do SectionList:

• sections: Um array de objetos com propriedades title e data.
• renderItem: Função para renderizar um item de dados em um componente.
• renderSectionHeader: Função para renderizar o cabeçalho de cada seção.
• keyExtractor: Função que extrai uma chave única para cada item.
• ItemSeparatorComponent: Componente a ser renderizado entre os itens.
• ListHeaderComponent e ListFooterComponent: Componentes que aparecem no início e no final da lista, respectivamente.
• onEndReached: Função chamada quando todos os itens foram renderizados e o usuário está rolando para o fim da lista.
• onRefresh: Função chamada quando o usuário solicita uma atualização puxando a lista para baixo.

O SectionList é uma ótima opção quando você precisa organizar dados em seções claras e apresentar informações de forma estruturada em seu aplicativo React Native. Ele é altamente personalizável e eficiente, sendo uma escolha popular para listas agrupadas em muitos aplicativos móveis.