React Native SectionList

SectionList allows you to display a list with different sections in your user interface. It is a fast and efficient way to show organized lists. It comes with helpful features like loading more items as you scroll, refreshing the list by pulling them down, and supporting separators between sections. Many propsProps in React Native are the properties or parameters that are passed to a component to configure its behavior, appearance, or data. are useful for SectionList such as these:

  • Configurable viewability callbacks.

  • List header support.

  • List footer support.

  • Item separator support.

  • Section header support.

  • Section separator support.

  • Heterogeneous data and item rendering support.

  • Pull to refresh.

  • Scroll loading.

Generating dummy data for SectionList

We will explore the process of incorporating SectionList into your React Native application. However, before we proceed, we require some data that we can utilize and generate for this purpose. We will create two separate datasets.

  • newCoursesData will contain information about new courses.

  • completedCoursesData will include courses taken by an individual.

 const newCoursesData = [{
    title: "New courses at Educative",
    data: [
      {
        id: "1",
        task: "Python"
      },
      {
        id: "2",
        task: "TypeScript"
      },
      {
        id: "3",
        task: "Go"
      },
    ]
  }];
  const completedCoursesData = [{
    title: "Completed courses at Educative",
    data: [
      {
        id: "4",
        task: "C++"
      },
      {
        id: "5",
        task: "Javascript"
      },
      {
        id: "6",
        task: "Haskell"
      },
    ]
  }];

Implementing SectionList in React Native

To display the data in a SectionList, we need to use the SectionList tag and apply different props and styling to make it visually appealing for the user.

import { SectionList } from 'react-native';
//...
//...
<SectionList
        sections={[...newCoursesData, ...completedCoursesData]}
        renderItem={({item})=>(
            <Text style={styles.taskItem}>{item.task}</Text>
        )}
        />

  • Line 5: The sections prop expects an array of sections. Here, we use the spread operator (...) to merge the newCoursesData and completedCoursesData arrays into one. This combined array represents the sections in our SectionList.

  • Lines 6–8: The renderItem prop specifies how each item in the SectionList should be rendered. In this case, we use the arrow function syntax to extract the item object from the provided data and return a Text component that displays the task item's property.

Adding headers to the SectionList

This time, we extract the section data and display the title property within the Text component.

  import { SectionList } from 'react-native';
//...
//...
<SectionList
        sections={[...newCoursesData, ...completedCoursesData]}
        renderItem={({item})=>(
            <Text style={styles.taskItem}>{item.task}</Text>
        )}
        
        //Headers added to SectionList
        renderSectionHeader={({section})=>(
          <Text style={styles.taskTitle}>{section.title}</Text>
        )}
        keyExtractor={item=>item.id}
        stickySectionHeadersEnabled
        />

  • Lines 11–13: The renderSectionHeader prop determines how the header for each section should be rendered. Here, we again use an arrow function to extract the section object and return a Text component that displays the title property of the section.

  • Line 14: The keyExtractor prop assigns a unique identifier to each item in the SectionList. In this case, we extract the id property from the item object to serve as the key.

  • Line 15: tickySectionHeadersEnabled prop enables sticky section headers, which means that as the user scrolls, the section headers will stick to the top until the next section header reaches the top of the screen.

Adding styles to the SectionList

Next, we will apply different styles to the title and content to make them more visually appealing to the user. This will enhance the overall look of the SectionList. You are welcome to customize the styles according to your preferences or the specific needs of your project.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eafffe'
  },
  taskItem:{
    padding: 10,
    marginVertical: 15,
    fontSize: 15,
    backgroundColor: '#8fb1aa'
  },
  taskTitle:{
    backgroundColor: "#ffffff",
    fontSize: 22,
    fontWeight: "bold",
    padding: 15,
    elevation: 4,
    margin: 10,
    marginBottom: 0,
    borderRadius: 20
  }
});

Complete code

Now we will combine the code and see how the SectionList appears. The output will show SectionList in two sections: "New courses at Educative" and "Completed courses at Educative". The sections have stylized titles, displaying the tasks with background color, padding, and a clean design.

import React from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';
export default function App() {
 const newCoursesData = [{
    title: "New courses at Educative",
    data: [
      {
        id: "1",
        task: "Python"
      },
      {
        id: "2",
        task: "TypeScript"
      },
      {
        id: "3",
        task: "Go"
      },
    ]
  }];
  const completedCoursesData = [{
    title: "Completed courses at Educative",
    data: [
      {
        id: "4",
        task: "C++"
      },
      {
        id: "5",
        task: "Javascript"
      },
      {
        id: "6",
        task: "Haskell"
      },
    ]
  }];
  
  return (
    <View style={styles.container}>
      <SectionList
        sections={[...newCoursesData, ...completedCoursesData]}
        renderItem={({item})=>(
            <Text style={styles.taskItem}>{item.task}</Text>
        )}
        renderSectionHeader={({section})=>(
          <Text style={styles.taskTitle}>{section.title}</Text>
        )}
        keyExtractor={item=>item.id}
        stickySectionHeadersEnabled
      />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eafffe'
  },
  taskItem:{
    padding: 15,
    marginVertical: 15,
    fontSize: 15,
    backgroundColor: '#8fb1aa'
  },
  taskTitle:{
    backgroundColor: "#ee7600",
    fontSize: 22,
    fontWeight: "bold",
    padding: 15,
    elevation: 4,
    justifyContent: "center"
  }
});
SectionList implemented in React Native application

Conclusion

We learned how to present categorized lists in a React Native app using the SectionList component. We guided you through by incorporating, designing headers for your list, and applying personalized styles.

SectionList offers a user-friendly solution for displaying data divided into sections while simplifying the management of your application's UI.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved