SectionList
- React Native course
- Beginner
- Lesson 56/116
- 5 min
Learn grouped lists with SectionList.
SectionList
SectionList shows lists grouped into sections. While FlatList takes a flat array, SectionList takes an array of section objects. Each section has a title and a data field. It is ideal for splitting an address by city or a menu by category.
Example: sections=[{ title: 'Fruits', data: ['Apple', 'Pear'] }, { title: 'Vegetables', data: ['Tomato', 'Pepper'] }]. renderItem draws each item; renderSectionHeader draws each section's header. The list is visually split into sections.
Practice Write a grouped list
Complete the empty component. The sections array is defined: two sections, each with title and data fields. Return <SectionList sections={sections} renderItem={({ item }) => <Text>{item}</Text>} renderSectionHeader={({ section }) => <Text style={{ fontWeight: 'bold' }}>{section.title}</Text>} keyExtractor={(item, index) => index.toString()} />.
Starter code
import React from 'react';
import { SectionList, Text } from 'react-native';
export default function GroupedList() {
const sections = [
{ title: 'Fruits', data: ['Apple', 'Pear'] },
{ title: 'Vegetables', data: ['Tomato', 'Pepper'] }
];
// Add a SectionList
return null;
}Sample solution
import React from 'react';
import { SectionList, Text } from 'react-native';
export default function GroupedList() {
const sections = [
{ title: 'Fruits', data: ['Apple', 'Pear'] },
{ title: 'Vegetables', data: ['Tomato', 'Pepper'] }
];
return (
<SectionList
sections={sections}
renderItem={({ item }) => <Text>{item}</Text>}
renderSectionHeader={({ section }) => <Text style={{ fontWeight: 'bold' }}>{section.title}</Text>}
keyExtractor={(item, index) => index.toString()}
/>
);
}renderSectionHeader
To show a header above each section, use renderSectionHeader. This function takes an object whose section property is the section itself. section.title is the header text. The header can be set apart from other items with a bold font or a different background.
Example: renderSectionHeader={({ section }) => <Text style={{ fontWeight: 'bold' }}>{section.title}</Text>}. This pattern shows a bold header above each section. Headers can be sticky on mobile; this behavior is enabled with the stickySectionHeadersEnabled prop.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What data structure does SectionList take?
<SectionList
???={[
{ title: 'A', data: [...] }
]}
/>- data
- items
- sections Correct answer
- list
Explanation: The sections prop takes an array of section objects.
2 Write the renderSectionHeader parameter
renderSectionHeader={({____}) => <Text>{section.title}</Text>}renderSectionHeader={({section}) => <Text>{section.title}</Text>}Explanation: The section parameter carries the section itself.
3 Match each SectionList prop to its job
| Term | Meaning |
|---|---|
sections |
Section array |
renderItem |
Draws each item |
renderSectionHeader |
Draws section header |
section.title |
Header text |