? SectionList – React Native

? Quick Overview

SectionList is a core React Native component used to render large lists of grouped data. It is ideal when your data is divided into logical sections such as contacts grouped by alphabet, messages grouped by date, or settings grouped by category.

? Key Concepts

Renders grouped lists efficiently
Uses sections prop instead of data
Each section contains a title and data
Supports headers, footers, separators, and lazy loading

? Syntax / Theory

SectionList works similarly to FlatList but introduces sections. Each section object must contain a data array and can optionally include a title.

? View Code Example

// Basic SectionList syntax
<SectionList
sections={[
{ title: 'Fruits', data: ['Apple', 'Banana'] },
{ title: 'Vegetables', data: ['Carrot', 'Potato'] }
]}
renderItem={({ item }) => <Text>{item}</Text>}
renderSectionHeader={({ section }) => (
<Text>{section.title}</Text>
)}
/>

? Code Example(s)

? View Code Example

// Complete working SectionList example
import React from 'react';
import { View, Text, SectionList, StyleSheet } from 'react-native';

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

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: { padding: 20 },
header: { fontWeight: 'bold', fontSize: 18 },
item: { paddingLeft: 10, fontSize: 16 }
});

? Live Output / Explanation

? Output

The screen displays section headers like Fruits and Vegetables. Each header is followed by its related list items rendered vertically.

? Interactive Simulator

See how SectionList organizes data dynamically. Select a category (Section) and add an item. Notice how the item is automatically placed under the correct header.

? Use Cases

Contacts list grouped by letters
Chat messages grouped by date
Settings screens with categories
E-commerce product grouping

✅ Tips & Best Practices

Always provide a stable keyExtractor
Keep section headers simple for better performance
Use stickySectionHeadersEnabled if needed

? Try It Yourself

Create a SectionList for students grouped by class
Add custom styles to section headers
Enable sticky section headers