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

React NativeJavascriptMobile Development

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 −

PropsDescription
renderItemIs the default function that renders the item in the section. It returns a react element.
The render function will be passed to sectionlist like an object with following keys −
'item'(object) - the item object
'index' (number) - Index given to the item within the section.
'section' (object) - The section object.
'separators' (object) - is an object with following keys −

  • highlight' (function) - () => void
  • 'unhighlight' (function) - () => void
  • 'updateProps' (function) - (select, newProps) => void
  • 'select' (enum) - values are 'leading','trailing'
  • 'newProps' (object)

sectionsThe data to be rendered.
renderSectionHeaderThe content is rendered at the top. In iOS you will see that the contents docks at the top.
renderSectionFooterThe content is rendered at the bottom.
refreshingOn refresh if new data is to be rendered set this property to true.
ListEmptyComponentA component class, a render function or a render element that will get invoked when the list is empty. In case you want to do something when the list is empty this component will be helpful.
ListFooterComponentA component class, a render function or a render element that will get rendered at the bottom of all the items.
ListFooterComponentStylestyling required for the footer component can be done here.
ListHeaderComponentA component class, a render function or a render element that will get rendered at the top of all the items.
ListHeaderComponentStylestyling required for the header component can be done here.
keyExtractorExtracts the unique key for the given index. The key is used for caching and also used to track item re-ordering.

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

raja
Published on 01-Jul-2021 07:49:46
Advertisements