React Native SectionList

The React Native SectionList component is a list view component which sets the list of data into broken logical section. The broken data can be implemented using its section header prop renderSectionHeader.

To implement the SectionList component, we need to import SectionList from ‘react-native’ library.

Props of SectionList

sections	renderItem	initialNumToRender	keyExtractor
renderSectionHeader	renderSectionFooter	onRefresh	inverted
extraData	onEndReached	keyExtractor	legacyImplementation
onViewableItemsChanged	refreshing	removeClippedSubviews	ListHeaderComponent
SectionSeparatorComponent	stickySectionHeadersEnabled	onEndReachedThreshold	ListEmptyComponent

React Native SectionList Example

In this example, 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.                         {title: ‘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:

Adding Separator in 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: