SectionList in React Native

SectionList is a React Native component for displaying lists that are divided into multiple sections.

For example:

• Students grouped by class.
• Contacts grouped by alphabet.
• Products grouped by category.
• Messages grouped by date.
• Courses grouped by subject.

Import SectionList from React Native.

import {
    SectionList
} from 'react-native';

You can then use it inside a functional component.

A SectionList uses a sections prop instead of the simple data structure commonly used by FlatList.

<SectionList
    sections={sections}
    renderItem={({
        item
    }) => (

        <Text>
            {item}
        </Text>

    )}
    renderSectionHeader={({
        section
    }) => (

        <Text>
            {section.title}
        </Text>

    )}
/>

Each section normally contains a title and a data array.

const sections = [

    {
        title: 'Students',
        data: [
            'Rahul',
            'Amit',
            'Priya'
        ]
    },

    {
        title: 'Teachers',
        data: [
            'Mr. Kumar',
            'Ms. Neha'
        ]
    }

];

The sections prop contains an array of section objects.

<SectionList
    sections={sections}
    ...
/>

Each section can contain its own title and data items.

The renderItem function defines how an individual item inside a section is displayed.

renderItem={({
    item
}) => (

    <Text>
        {item}
    </Text>

)}

The item represents the current item.

The renderSectionHeader function defines the appearance of each section heading.

renderSectionHeader={({
    section
}) => (

    <Text>
        {section.title}
    </Text>

)}

const sections = [

    {
        title: 'Frontend',
        data: [
            'HTML',
            'CSS',
            'JavaScript'
        ]
    },

    {
        title: 'Backend',
        data: [
            'PHP',
            'Python',
            'Java'
        ]
    }

];

<SectionList
    sections={sections}
    renderItem={({
        item
    }) => (

        <Text>
            {item}
        </Text>

    )}
    renderSectionHeader={({
        section
    }) => (

        <Text>
            {section.title}
        </Text>

    )}
/>

renderSectionHeader={({
    section
}) => (

    <Text
        style={styles.header}
    >
        {section.title}
    </Text>

)}

header: {
    fontSize: 20,
    fontWeight: 'bold',
    padding: 12,
    backgroundColor: '#E2E8F0'
}

renderItem={({
    item
}) => (

    <View style={styles.item}>

        <Text>
            {item}
        </Text>

    </View>

)}

item: {
    padding: 15,
    backgroundColor: 'white'
}

Sections can contain objects instead of simple strings.

const sections = [

    {
        title: 'React Native',
        data: [
            {
                id: '1',
                name: 'Rahul',
                level: 'Beginner'
            },
            {
                id: '2',
                name: 'Amit',
                level: 'Intermediate'
            }
        ]
    }

];

renderItem={({
    item
}) => (

    <View>

        <Text>
            {item.name}
        </Text>

        <Text>
            {item.level}
        </Text>

    </View>

)}

A section object can contain additional properties.

const sections = [

    {
        title: 'React Native',
        courseId: 'RN01',
        data: [
            'View',
            'Text',
            'FlatList'
        ]
    }

];

These values can be accessed through the section object.

A stable key can be provided for each item using keyExtractor.

<SectionList
    sections={sections}
    keyExtractor={(
        item,
        index
    ) =>
        item.id || index.toString()
    }
    renderItem={renderItem}
    renderSectionHeader={
        renderSectionHeader
    }
/>

When each item has a unique ID, using that ID is preferable.

A separator can be displayed between items.

const Separator = () => (

    <View
        style={{
            height: 1,
            backgroundColor: '#CBD5E1'
        }}
    />

);

<SectionList
    sections={sections}
    renderItem={renderItem}
    ItemSeparatorComponent={
        Separator
    }
/>

A header can be displayed above the complete SectionList.

const Header = () => (

    <Text style={styles.title}>
        Course Topics
    </Text>

);

<SectionList
    sections={sections}
    renderItem={renderItem}
    renderSectionHeader={
        renderSectionHeader
    }
    ListHeaderComponent={Header}
/>

const Footer = () => (

    <Text>
        End of Topics
    </Text>

);

<SectionList
    sections={sections}
    renderItem={renderItem}
    renderSectionHeader={
        renderSectionHeader
    }
    ListFooterComponent={Footer}
/>

The footer appears after all sections and items.

Items can be made interactive using Pressable.

renderItem={({
    item
}) => (

    <Pressable
        onPress={() =>
            console.log(item.name)
        }
    >

        <Text>
            {item.name}
        </Text>

    </Pressable>

)}

Section data can be stored in component state.

const [sections, setSections] =
    useState([

        {
            title: 'Students',
            data: [
                'Rahul',
                'Amit'
            ]
        },

        {
            title: 'Teachers',
            data: [
                'Neha',
                'Kumar'
            ]
        }

    ]);

Changing the state updates the SectionList.

When using state, a new item can be added by creating a new sections array.

setSections(
    sections.map(section => {

        if (
            section.title ===
            'Students'
        ) {

            return {
                ...section,
                data: [
                    ...section.data,
                    'Priya'
                ]
            };

        }

        return section;

    })
);

setSections(
    sections.map(section => {

        if (
            section.title ===
            'Students'
        ) {

            return {
                ...section,
                data: section.data.filter(
                    student =>
                        student !== 'Amit'
                )
            };

        }

        return section;

    })
);

The original section data is not directly mutated.

A section can contain an empty data array.

const sections = [

    {
        title: 'Students',
        data: []
    }

];

You can display a suitable message or UI when a section contains no items.

SectionList can display data received from an API after converting the response into the required section structure.

const sections = [

    {
        title: 'Technology',
        data: [
            {
                id: '1',
                name: 'React Native'
            },
            {
                id: '2',
                name: 'JavaScript'
            }
        ]
    }

];

The exact structure depends on the API response and the application's requirements.

• Contacts grouped alphabetically.
• Products grouped by category.
• Students grouped by class.
• Courses grouped by subject.
• Messages grouped by date.
• Attendance grouped by month.
• Orders grouped by status.
• Notifications grouped by date.
• Settings grouped by category.

• Using data instead of sections.
• Forgetting renderItem.
• Forgetting renderSectionHeader when section headings are needed.
• Using duplicate keys.
• Mutating section data directly.
• Creating unnecessarily complex section structures.
• Not handling empty sections.
• Using SectionList when a simple FlatList would be enough.
• Putting expensive calculations directly inside render functions.

import React from 'react';

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

export default function App() {

    const sections = [

        {
            title: 'Frontend',
            data: [
                {
                    id: '1',
                    name: 'HTML'
                },
                {
                    id: '2',
                    name: 'CSS'
                },
                {
                    id: '3',
                    name: 'JavaScript'
                }
            ]
        },

        {
            title: 'Backend',
            data: [
                {
                    id: '4',
                    name: 'PHP'
                },
                {
                    id: '5',
                    name: 'Python'
                },
                {
                    id: '6',
                    name: 'Java'
                }
            ]
        }

    ];

    const renderItem = ({
        item
    }) => (

        <Pressable
            style={styles.item}
            onPress={() =>
                console.log(item.name)
            }
        >

            <Text
                style={styles.itemText}
            >
                {item.name}
            </Text>

        </Pressable>

    );

    const renderSectionHeader = ({
        section
    }) => (

        <View
            style={styles.sectionHeader}
        >

            <Text
                style={styles.headerText}
            >
                {section.title}
            </Text>

        </View>

    );

    return (

        <View style={styles.container}>

            <Text style={styles.title}>
                Technology List
            </Text>

            <SectionList
                sections={sections}
                keyExtractor={(
                    item
                ) => item.id}
                renderItem={renderItem}
                renderSectionHeader={
                    renderSectionHeader
                }
                ItemSeparatorComponent={() => (
                    <View
                        style={
                            styles.separator
                        }
                    />
                )}
            />

        </View>

    );

}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        padding: 20
    },

    title: {
        fontSize: 28,
        fontWeight: 'bold',
        marginBottom: 15
    },

    sectionHeader: {
        padding: 12,
        backgroundColor: '#E2E8F0'
    },

    headerText: {
        fontSize: 20,
        fontWeight: 'bold'
    },

    item: {
        padding: 15,
        backgroundColor: 'white'
    },

    itemText: {
        fontSize: 17
    },

    separator: {
        height: 1,
        backgroundColor: '#CBD5E1'
    }

});

• Use SectionList when data naturally belongs to groups.
• Keep section objects simple and organized.
• Provide stable unique keys.
• Keep render functions efficient.
• Use reusable item components for complex list items.
• Style section headers clearly.
• Handle empty sections appropriately.
• Avoid directly mutating section data.
• Use FlatList when grouping is not required.
• Keep large list data optimized for the application's needs.

Identify Groups
        ↓
Create Sections Array
        ↓
Add Section Titles
        ↓
Add Data to Each Section
        ↓
Import SectionList
        ↓
Pass Sections
        ↓
Create renderItem
        ↓
Create Section Header
        ↓
Add Unique Keys
        ↓
Style Items and Headers
        ↓
Handle User Interaction
        ↓
Build Complete Grouped List

SectionList is an important React Native component for displaying organized and grouped data. Once FlatList and SectionList are understood, you can build many different list-based mobile interfaces.