React native sectionlist: Definition, explaination with example

The definition of React native sectionlist

The React Native SectionList component is a list view component which sets the list of data into broken logical section. It is used to represent list data item in the form of sections named of various department or the categories of the various product. Basically, SectionList has few great features which will be very hard to design with any plain components. These like having the ability to find start of any new section, end of any new section. Moreover if list is empty or list ended, it has beautiful function to get it. In this article, we will give you the definition, explanation as well as example of React Native SectionList.

Attributes of React Native SectionList

1. sections

A section is a portion where we pass our all data array of objects which will contain data in the form of an array. To clarify, this section is responsible to contain our data in the form of multiple arrays of objects with various names.

2. renderItem

This react native sectionlist is responsible to retrieve and extract each element of array data comet to the section portion. Basically to represent data for each item it used. We can also do some customized design for each element in this section. For example, we have to display marks of the students add 5 marks to some specific student marks. Then, we can check that student here and add the extra marks to it.

3. initialNumToRender

In this section, we manage the data which is going to display for the first time when the page will be lead. This section is also very important for the react power booster. It will also be an integer value. If we do not pass any number, it will take 21 as the default number.

4. keyExtractor

This attribute will be used to fetch a unique id from the given item. Moreover, this unique number can be item.key as the default. We also can perform any activity on a particular item if we will be able to fetch the item’s unique key. Popular Course in this category

5. renderSectionHeader

We saw that we are creating the sections in these cases, so what if we wanted to show something on the top of each section? We can use the render sectionHeader. For example, if we have many departments and each department is sectional and we want to display department names on the top of each section then we can use this attribute by defining title.

6. renderSectionFooter

In the same way renderSectionHeader, we can use renderSectionFooter to display something on the bottom of each section. For example, if we have many departments and each department is a sectional and want to display department names on the bottom of each section, we can use this attribute by defining title and each title will be displayed at the bottom of each section.

7. onRefresh

Most important, this React native sectionlist will be helpful to get a standard RefreshControl. Then, this RefreshControl will be taken for “Pull to Refresh” features. While implementing this feature make sure that these things have been implemented properly to props.

8. extraData

Rendering we know how to react native. For instance, in some case we wanted to re-render some of our items, we can use this attribute. Basically it is using pureComponent in it.

9. onEndReached

You are scrolling your list of items and it ended. To clarify, if you wanted to do something at the end of the page content (at the time it reached threshold value ), we will use the onEndReached attribute of the react component to deal with this situation.

10. ListHeaderComponent

This react native sectionlist will be used to render anything at the beginning of the list.

11. SectionSeparatorComponent

It will be used in case we wanted to have rendered at the top as well as the bottom of every section. It is not like IteemSeperatorComponent because itemSeperatorCoponent is used to separate items only. React added this attribute to separate it from any header.

12. stickySectionHeadersEnabled

This attribute will be used to fix our header section on scrolling. For example, many times if the list is very long and there are too many scrolling of the list, it would be better to stick the header on scrolling.

13. ListEmptyComponent

Many times it is possible that the list is empty, so how will we know and perform certain things if the list is empty? We can use ListEmptyComponent to do something in case the list of items is empty.

>>> Read more about : React native database, React native alert,…

Examples

In this example of React native sectionlist, we create a SectionList with title and data. The sections prop is used to create the list of title and data values. The renderSectionHeader displays the header section of the list view.

  1. import React, { Component } from ‘react’;  
  2. import { AppRegistry, SectionList, StyleSheet, Text, View } from ‘react-native’;  
  3.   
  4. export default class SectionListBasics extends Component {  
  5.     render() {  
  6.         return (  
  7.             <View style={styles.container}>  
  8.                 <SectionList  
  9.                     sections={[  
  10.                         {tile: ‘A’, data: [‘ALTERED’,’ABBY’,’ACTION U.S.A.’,’AMUCK’,’ANGUISH’]},  
  11.                         {title: ‘B’, data: [‘BEST MEN’,’BEYOND JUSTICE’,’BLACK GUNN’,’BLOOD RANCH’,’BEASTIES’]},  
  12.                         {title: ‘C’, data: [‘CARTEL’, ‘CASTLE OF EVIL’, ‘CHANCE’, ‘COP GAME’, ‘CROSS FIRE’,]},  
  13.                     ]}  
  14.                     renderItem={({item}) => <Text style={styles.item}>{item}</Text>}  
  15.                     renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}  
  16.                     keyExtractor={(item, index) => index}  
  17.                 />  
  18.             </View>  
  19.         );  
  20.     }  
  21. }  
  22.   
  23. const styles = StyleSheet.create({  
  24.     container: {  
  25.         flex: 1,  
  26.         backgroundColor: “#5ead97”  
  27.     },  
  28.     sectionHeader: {  
  29.         paddingTop: 2,  
  30.         paddingLeft: 10,  
  31.         paddingRight: 10,  
  32.         paddingBottom: 2,  
  33.         fontSize: 22,  
  34.         fontWeight: ‘bold’,  
  35.         color: “#fff”,  
  36.         backgroundColor: ‘#8fb1aa’,  
  37.     },  
  38.     item: {  
  39.         padding: 10,  
  40.         fontSize: 18,  
  41.         height: 44,  
  42.     }  
  43. })  
  44.   
  45. // skip this line if using Create React Native App  
  46. AppRegistry.registerComponent(‘AwesomeProject’, () => SectionListBasics);  

Output:

React Native SectionList

Adding Separator in React native sectionlist

ItemSeparatorComponent prop adds the Separator between the lists of data. Using this prop, call a renderSeparatormethod in which we add a View component as separator.

  1. renderSeparator = () => {  
  2.     return (  
  3.         <View  
  4.             style={{  
  5.                 height: 1,  
  6.                 width: “100%”,  
  7.                 backgroundColor: “#000”,  
  8.             }}  
  9.         />  
  10.     );  
  11. };  
  12.   
  13.   
  14. ItemSeparatorComponent={this.renderSeparator}  

Performing action on SectionList items

To perform an action on clicking (pressing) the list item, we use a onPress prop. The onPress prop and handle the event in another method getListViewItem.

  1. //handling onPress action  
  2.     getListViewItem = (item) => {  
  3.         alert(item);  
  4.     }  
  5.   
  6.   
  7. renderItem={({item}) => <Text style={styles.item}  
  8.   onPress={this.getListViewItem.bind(this, item)}>{item}</Text>}  

Output:

React Native SectionList
React Native SectionList

Final Thoughts

All in all, through this article, ArrowHiTech provides you with almost all beneficial information of React native sectionlist. Specifically, its definition, explanation and in particular, gives you several practical examples that make you easier to comprehend. We hope the information we have provided answers all of your questions. However, if you still have any problems, please CONTACT US to be clearer.

Tags

Share