SectionList with Headers
Group items into sections with SectionList, render a sticky section header for each group, and customize the separator between items.
When to Use SectionList
SectionList is the React Native component for displaying grouped lists — data divided into sections, each with its own header. It is ideal for contacts lists sorted alphabetically, settings screens with grouped options, or e-commerce categories. Like FlatList, it virtualizes rendering for performance.
SectionList Data Format
SectionList expects its sections prop to be an array of section objects. Each section object must have a data array containing the items for that section. You also typically include a title or other metadata to render the section header.
const SECTIONS = [
{
title: 'A',
data: [
{ id: '1', name: 'Alice' },
{ id: '2', name: 'Andrew' },
],
},
{
title: 'B',
data: [
{ id: '3', name: 'Bob' },
{ id: '4', name: 'Beth' },
],
},
];