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"
      },
    ]
  }];

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.

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.

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