What is the SectionList component and how to use it in React Native?

An interface that helps to render the lists in sections. Some of the important features of SectionList are −

• Header/Footer support to the List
• Header/Footer support to the section
• Scroll Loading
• Pull to refresh
• Fully cross-platform

The basic SectionList component looks as follows −

<SectionList sections={DataContainer} keyExtractor={yourkeyextractor} renderItem={yourenderItem} renderSectionHeader={yoursectionheader} />

To work with SectionList import the component as shown below −

import { SectionList } from "react-native";

Here is a list of important properties available on a SectionList −

Example 1: Using SectionList to display data

To work with SectionList we need to import it first as shown below −

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

Once the import is done, I need the data to be shown in the SectionList. The data is stored inside this.state.data as shown below −

this.state = {
   data: [
      {
         title: "Javascript Frameworks",
         data: ["Angular", "ReactJS", "VueJS", "ReactNative"]
      },
      {
         title: "PHP Frameworks",
         data: ["Laravel", "CodeIgniter", "CakePHP", "Symfony"]
      }
   ]
};

To Implement function for renderItem

The function below takes care of taking the item and displaying the same in the Text component as shown below −

renderItem = ({ item }) => {
   return (
      <View style={styles.item}>
         <Text >
            {item}
         </Text>
      </View>
   );
};

The Text component display the items and is wrapped inside the View Component.

To implement SectionList

Here is the SectionList implementation that has data, renderItem, keyExtractor and renderSectionHeader props.

<View style={styles.container}>
   <SectionList
      sections={this.state.data}
      renderItem={this.renderItem}
      keyExtractor={(item, index) => index}
      renderSectionHeader={({ section: { title } }) => (
         <Text style={styles.header}>{title}</Text>
      )}
   />
</View>

The this.state.data is given to the data props and the this.renderItem function is assigned to renderItem props.

Based on your data you can tell the key property that will be a unique one from the data array and the same should be given to the props keyExtractor.If not given it will consider the array index as the key value.

So here the unique key is item+index and the same is assigned to keyExtractor.

keyExtractor={(item, index) => item + index}

The renderSectionHeader props take care of displaying the header.

import React from "react";
import { SectionList , Text, View, StyleSheet} from "react-native";
export default class App extends React.Component {
   constructor() {
      super();
      this.state = {
      data: [
         {
            title: "Javascript Frameworks",
            data: ["Angular", "ReactJS", "VueJS", "ReactNative"]
         },
         {
            title: "PHP Frameworks",
            data: ["Laravel", "CodeIgniter", "CakePHP", "Symfony"]
         }
      ]
   };
}
renderItem = ({ item }) => {
   return (
      <View style={styles.item}>
         <Text >
            {item}
         </Text>
      </View>
   );
};
render() {
   return (
      <View style={styles.container}>
         <SectionList
            sections={this.state.data}
            renderItem={this.renderItem}
            keyExtractor={(item, index) => index}
            renderSectionHeader={({ section: { title } }) => (
                  <Text style={styles.header}>{title}</Text>
               )}
            />
         </View>
      );
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop:20,
      marginHorizontal: 16
   },
   item: {
      backgroundColor: "#ccc2ff",
      padding: 20,
      marginVertical: 8
   },
   header: {
      fontSize: 32,
      backgroundColor: "#fff"
   }
});

Output

Example 2

Enabling stickySectionHeadersEnabled props in SectionList

The props stickySectionHeadersEnabled helps you to stick the header of your sectionList at the top.Once the user scrolls if the next header comes into view and reaches the top it will stick at the top and it will continue the same for all headers.

import React from "react";
import { SectionList , Text, View, StyleSheet} from "react-native";
export default class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: [
            {
               title: "Javascript Frameworks",
               data: ["Angular", "ReactJS", "VueJS", "ReactNative"]
            },
            {
               title: "PHP Frameworks",
               data: ["Laravel", "CodeIgniter", "CakePHP", "Symfony"]
            },
            {
               title: "Apache Frameworks",
               data: ["Apache Flex", "Apache Crunch", "Apache CouchDB", "Apache Crail"]
            }
         ]
      };
   }
   renderItem = ({ item }) => {
      return (
         <View style={styles.item}>
            <Text >
               {item}
            </Text>
         </View>
      );
   };
   render() {
      return (
         <View style={styles.container}>
            <SectionList
               stickySectionHeadersEnabled={true}
               sections={this.state.data}
               renderItem={this.renderItem}
               keyExtractor={(item, index) => index}
               renderSectionHeader={({ section: { title } }) => (
                  <Text style={styles.header}>{title}</Text>
               )}
            />
         </View>
      );
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop:20,
      marginHorizontal: 16
   },
   item: {
      backgroundColor: "#ccc2ff",
      padding: 20,
      marginVertical: 8
   },
   header: {
      fontSize: 32,
      backgroundColor: "#fff"
   }
});

Output