React native SectionList Component

The SectionList Component is an inbuilt React Native list view component that renders sectioned lists. As the name suggests, it is used to display lists of data in different sections. It is a Pure Component supporting most of the features like pull-to-refresh, scroll loading, separators, headers, and footers, etc. SectionLists are primarily used for displaying lists in sections. In the case that section support is not required, a FlatList or ScrollView Component should be used.

Syntax:

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

SectionList Props:

• renderItem: (required) It is a react element that is used as the default renderer for displaying the items in the different sections of the list.
• sections: (required) It is an array of data (with different objects for different sections) that is to be rendered.
• extraData: It is a property that informs the list to re-render (since it implements PureComponent).
• initialNumToRender: It is the number of items to be rendered when the screen is loaded initially.
• inverted: If set to true, it will reverse the direction of the scroll.
• ItemSeparatorComponent: It is a component that will be rendered between every item (except at the top or the bottom).
• keyExtractor: It is used to extract a unique key for a particular item in the list.
• ListEmptyComponent: It can be a component or react element that is rendered in case of an empty list.
• ListFooterComponent: It can be a component or react element that is rendered at the end of the list.
• ListHeaderComponent: It can be a component or react element that is rendered at the start of the list.
• onEndReached: It is a callback called when the scroll position reaches the onEndReachedThreshold.
• onEndReachedThreshold: It is a value that tells exactly how far the bottom of the list should be from the screen end so as to trigger the onEndReached.
• onRefresh: If it is given, a RefreshControl will be inserted to the “Pull to Refresh” functionality.
• onViewableItemsChanged: It is a function that is called during changes in the row viewability.
• refreshing: It is set as true when the screen is refreshed when waiting for new data.
• renderSectionFooter: It is rendered at the bottom of every section.
• renderSectionHeader: It is rendered at the top of every section.
• SectionSeparatorComponent: It is rendered at the top and bottom of every section to distinguish them from each other.
• stickySectionHeadersEnabled: It is used to make section headers stick to the top of the screen.

SectionList Methods:

• flashScrollIndicators(): It is used to show the scroll indicators for a brief moment.
• recordInteraction(): It is used to inform the list about any interaction that might have occurred.
• scrollToLocation(): It is used to scroll to the item at any specified sectionIndex and itemIndex.

Installation: Here we will use the Expo CLI version that will much smoother to run your React Native applications. Follow the below steps one by one to setup your React native environment.

• Step 1: Open your terminal and install expo-cli by the following command.

  npm install -g expo-cli

• Step 2: Now create a project by the following command.

  expo init sectionlist-demo

• Step 3: Now go into your project folder i.e. sectionlist-demo

  cd sectionlist-demo

Project Structure: It will look like this:

Example: In this example, we will see how to use basic SectionList Component.

App.js

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

class App extends Component {
  state = {
    data: [
      {
        title: "Operating System",
        data: [
          "Processes & Threads",
          "Memory Management",
          "CPU Scheduling",
          "Process Synchronization",
          "Deadlock",
        ],
      },
      {
        title: "Computer Network",
        data: [
          "Data Link Layer",
          "Network Layer",
          "Transport Layer",
          "Application Layer",
          "Network Security",
        ],
      },
      {
        title: "DBMS",
        data: [
          "Entity Relationship Model",
          "Normalisation",
          "Transaction and Concurrency Control",
          "Indexing, B and B+ trees",
          "File Organization",
        ],
      },
    ],
  };

  render() {
    return (
      <View style={styles.screen}>
        // Using Section List
        <SectionList
          sections={this.state.data}
          keyExtractor={(item, index) => item + index}
          renderItem={({ item }) => (
            <View style={styles.row}>
              <Text style={styles.rowText}>{item}</Text>
              <Icon name="ios-eye" type="ionicon" color="#C2185B" />
            </View>
          )}
          renderSectionHeader={({ section: { title } }) => (
            <Text style={styles.header}>{title}</Text>
          )}
        />
      </View>
    );
  }
}

// Screen styles
const styles = StyleSheet.create({
  screen: {
    marginTop: 18,
  },
  header: {
    fontSize: 30,
    color: "#FFF",
    marginTop: 10,
    padding: 2,
    backgroundColor: "#C2185B",
    textAlign: "center",
  },
  row: {
    marginHorizontal: 15,
    marginTop: 10,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 2,
  },
  rowText: {
    fontSize: 18,
  },
});

export default App;

Step to run the application: Start the server by using the following command.

npm run android

Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again.

Reference: https://reactnative.dev/docs/sectionlist