React native SectionList Component

01 Aug, 2021
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 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 2: Now create a project by the following command.
expo init sectionlist-demo
Step 3: Now go into your project folder i.e. sectionlist-democd 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 stylesconst 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
Picked
React-Native
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.