What is the SectionList component and how to use it in React Native?

The SectionList component in React Native provides an efficient way to display data organized in sections with headers. It's perfect for categorized lists like contacts, settings, or grouped items.

Key Features

• Header/Footer support for the entire list
• Header/Footer support for individual sections
• Scroll loading and pull-to-refresh functionality
• Cross-platform compatibility
• Sticky section headers

Basic Syntax

import { SectionList } from "react-native";

<SectionList
    sections={dataArray}
    keyExtractor={keyFunction}
    renderItem={itemRenderer}
    renderSectionHeader={headerRenderer}
/>

Important Props

Example: Basic SectionList Implementation

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

export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            data: [
                {
                    title: "Javascript Frameworks",
                    data: ["Angular", "ReactJS", "VueJS", "ReactNative"]
                },
                {
                    title: "PHP Frameworks",
                    data: ["Laravel", "CodeIgniter", "CakePHP", "Symfony"]
                }
            ]
        };
    }

    renderItem = ({ item }) => {
        return (
            <View style={styles.item}>
                <Text>{item}</Text>
            </View>
        );
    };

    render() {
        return (
            <View style={styles.container}>
                <SectionList
                    sections={this.state.data}
                    renderItem={this.renderItem}
                    keyExtractor={(item, index) => item + index}
                    renderSectionHeader={({ section: { title } }) => (
                        <Text style={styles.header}>{title}</Text>
                    )}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 20,
        marginHorizontal: 16
    },
    item: {
        backgroundColor: "#ccc2ff",
        padding: 20,
        marginVertical: 8
    },
    header: {
        fontSize: 32,
        backgroundColor: "#fff",
        fontWeight: 'bold'
    }
});

Example: Sticky Section Headers

Enable sticky headers by setting stickySectionHeadersEnabled to true. This makes headers stick to the top while scrolling.

<SectionList
    stickySectionHeadersEnabled={true}
    sections={this.state.data}
    renderItem={this.renderItem}
    keyExtractor={(item, index) => item + index}
    renderSectionHeader={({ section: { title } }) => (
        <Text style={styles.stickyHeader}>{title}</Text>
    )}
/>

Data Structure Requirements

Each section object must have a data property containing an array of items:

const sectionsData = [
    {
        title: "Section Name", // Optional
        data: ["Item 1", "Item 2", "Item 3"]
    }
];

Key Points

• Use unique keys with keyExtractor for better performance
• Section headers automatically stick on iOS; use stickySectionHeadersEnabled for Android
• Supports all FlatList props for additional functionality
• Ideal for alphabetically sorted lists, categories, or grouped content

Conclusion

SectionList is perfect for organizing data into categorized sections with headers. It provides excellent performance for large datasets and includes built-in features like sticky headers and pull-to-refresh functionality.