How to Use SectionList in React Native: Syntax and Example

In React Native, SectionList is used to render grouped lists with section headers. You provide it with an array of sections, each having a title and data array, and define how to render items and headers using renderItem and renderSectionHeader props.

Syntax

The SectionList component requires a sections prop, which is an array of objects. Each object represents a section and must have a title (or any key you choose) and a data array containing the items for that section. You also provide renderItem to define how each item looks, and renderSectionHeader to define the section header UI.

Key props:

• sections: Array of section objects
• renderItem: Function to render each item
• renderSectionHeader: Function to render section header
• keyExtractor: Function to provide unique keys for items

javascript

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

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

export default function MySectionList() {
  return (
    <SectionList
      sections={sections}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => <Text>{item}</Text>}
      renderSectionHeader={({ section: { title } }) => (
        <Text style={{ fontWeight: 'bold' }}>{title}</Text>
      )}
    />
  );
}

Output

A scrollable list with two sections: 'Fruits' and 'Vegetables'. Each section shows its title in bold and the items below it as plain text.

Example

This example shows a simple SectionList with two sections: Fruits and Vegetables. Each section header is bold, and items are listed below. It demonstrates how to pass data and render both items and headers.

javascript

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

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

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: { title } }) => (
          <Text style={styles.header}>{title}</Text>
        )}
      />
    </View>
  );
}

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

Output

The app shows a vertical list with two sections: 'Fruits' and 'Vegetables'. Each section header is bold with a light gray background. Items appear below each header with some padding.

Common Pitfalls

Common mistakes when using SectionList include:

• Not providing a unique keyExtractor for items, causing rendering issues.
• Passing data in the wrong shape; each section must have a data array.
• Forgetting to render section headers, which can confuse users about grouping.
• Using FlatList instead of SectionList when grouped data is needed.

javascript

/* Wrong: Missing keyExtractor and wrong data shape */
const wrongSections = [
  { title: 'Fruits', items: ['Apple', 'Banana'] } // should be 'data' key
];

/* Right: Correct data shape and keyExtractor */
const rightSections = [
  { title: 'Fruits', data: ['Apple', 'Banana'] }
];

<SectionList
  sections={rightSections}
  keyExtractor={(item, index) => item + index}
  renderItem={({ item }) => <Text>{item}</Text>}
  renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
/>

Quick Reference

• sections: Array of objects with title and data keys.
• renderItem: Function to render each item.
• renderSectionHeader: Function to render section headers.
• keyExtractor: Unique key for each item.
• stickySectionHeadersEnabled: Boolean to keep headers visible while scrolling.

Key Takeaways

Use SectionList to display grouped lists with section headers in React Native.

Each section must have a title and a data array for items.

Always provide a unique keyExtractor to avoid rendering issues.

Use renderItem and renderSectionHeader to customize item and header appearance.

Check data shape carefully to avoid common mistakes.