SectionList for grouped data in React Native

Introduction

A SectionList helps you show lists that have groups or categories. It makes it easy to see items sorted by sections.

You want to show contacts grouped by the first letter of their name.

You have a list of recipes grouped by meal type like Breakfast, Lunch, Dinner.

You want to display tasks grouped by their status like To Do, In Progress, Done.

You want to show events grouped by date or month.

You want to organize products by category in a shopping app.

Syntax

React Native

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

const DATA = [
  {
    title: 'Group Title',
    data: ['item1', 'item2']
  },
  {
    title: 'Another Group',
    data: ['item3', 'item4']
  }
];

export default function App() {
  return (
    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => <Text>{item}</Text>}
      renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
    />
  );
}

The sections prop takes an array of objects, each with a title and a data array.

renderItem shows each item, and renderSectionHeader shows the group title.

Examples

This shows an empty list with no groups or items.

React Native

const DATA = [];

// Empty list example
<SectionList sections={DATA} renderItem={() => null} renderSectionHeader={() => null} />

This shows one group with a single item.

React Native

const DATA = [
  { title: 'Fruits', data: ['Apple'] }
];

// One group with one item
<SectionList sections={DATA} renderItem={({ item }) => <Text>{item}</Text>} renderSectionHeader={({ section }) => <Text>{section.title}</Text>} />

This shows two groups each with multiple items.

React Native

const DATA = [
  { title: 'Fruits', data: ['Apple', 'Banana'] },
  { title: 'Vegetables', data: ['Carrot', 'Peas'] }
];

// Multiple groups with multiple items
<SectionList sections={DATA} renderItem={({ item }) => <Text>{item}</Text>} renderSectionHeader={({ section }) => <Text>{section.title}</Text>} />

Sample App

This app shows a list with two groups: Fruits and Vegetables. Each group has items listed below its title.

React Native

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

const DATA = [
  {
    title: 'Fruits',
    data: ['Apple', 'Banana', 'Orange']
  },
  {
    title: 'Vegetables',
    data: ['Carrot', 'Peas', 'Broccoli']
  }
];

export default function App() {
  return (
    <View style={styles.container}>
      <SectionList
        sections={DATA}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
        renderSectionHeader={({ section }) => <Text style={styles.header}>{section.title}</Text>}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 40, paddingHorizontal: 20 },
  header: { fontSize: 24, fontWeight: 'bold', backgroundColor: '#eee', paddingVertical: 5 },
  item: { fontSize: 18, paddingVertical: 3, paddingLeft: 10 }
});

Important Notes

SectionList is efficient for large grouped lists because it only renders visible items.

Time complexity depends on the number of items, but SectionList optimizes rendering.

Common mistake: forgetting to provide a unique keyExtractor for items can cause warnings.

Use SectionList instead of FlatList when you want to group items under headers.

Summary

SectionList shows lists grouped by sections with headers.

Each section has a title and an array of items.

Use renderItem for items and renderSectionHeader for group titles.