Section List

Continuando o conhecimento sobre listas, entraremos agora no * Section List**.

Section List

O que difere o FlatList do Section List é o fato de que um faz a listagem em sequência e o outro divide em seções em sua visualização.

Simulando dados

Assim como na listagem com FlatList, precisamos de dados para listar na tela. Para fazer isso, iremos criar um conjuto de dados, porém, dessa vez terá um novo formato: cada seção terá um título e um conjunto de dados associados a ela.

Abaixo podemos ver um exemplo:

const DATA = [
  { title: "Pratos principais", data: ["Pizza", "Burger", "Risoto"] },
  { title: "Entradas", data: ["Batata Frita", "Onion Rings"] },
  { title: "Sobremesas", data: ["Sorvete de Creme", "Petit Gateau"] }
]

Sections

Assim como no FlatList, o SectionList necessita de uma pequena configuração que é feita através dos parâmetros.

RenderItem

Assim como no FlatList, existe o parâmetro renderItem, o qual recebe um componente que será utilizado para representar a renderização de um único item, uma espécie de modelo.

Então, criaremos o componente abaixo:

function Item(props) {
  return (
    <View style={{ height: 30, backgroundColor: '#AFC', padding: 10, margin: 10 }}>
      <Text>{props.title}</Text>
    </View>
  )
}

RenderSectionHeader

Até agora, não dividimos nossa lista em seções no momento da visualização. Para fazer isso, precisamos desse terceiro parâmetro que recebe também um componente.

KeyExtractor

É usado pela mesma razão dita no FlatList: identificação única de cada objeto.

Utilizando Section List

Acompanhando toda a aula, configurando o componente e implementando o código, ao final, seu arquivo deverá ser como se observa abaixo:

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

const DATA = [
  {
    title: "Pratos principais",
    data: ["Pizza", "Burger", "Risoto"]
  },
  {
    title: "Entradas",
    data: ["Batata Frita", "Onion Rings"]
  },
  {
    title: "Sobremesas",
    data: ["Sorvete de Creme", "Petit Gateau"]
  }
]

function Item(props) {
  return (
    <View style={{ height: 60, backgroundColor: '#AFC', padding: 10, margin: 10 }}>
      <Text>{props.title}</Text>
    </View>
  )
}

export default function App() {
  return (
    <SafeAreaView>
      <SectionList
        style={{ margin: 8 }}
        sections={DATA}
        renderItem={it => <Item title={it.item} />}
        renderSectionHeader={(item) => <Text style={{ fontSize: 20 }}>{item.section.title}</Text>}
        keyExtractor={(item, index) => item + index}
      />
    </SafeAreaView>
  );
}