Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 −
| Props | Description |
|---|---|
| renderItem | Is 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 −
|
| sections | The data to be rendered. |
| renderSectionHeader | The content is rendered at the top. In iOS you will see that the contents docks at the top. |
| renderSectionFooter | The content is rendered at the bottom. |
| refreshing | On refresh if new data is to be rendered set this property to true. |
| ListEmptyComponent | A 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. |
| ListFooterComponent | A component class, a render function or a
render element that will get rendered at the
bottom of all the items. |
| ListFooterComponentStyle | styling required for the footer component
can be done here. |
| ListHeaderComponent | A component class, a render function or a
render element that will get rendered at the
top of all the items. |
| ListHeaderComponentStyle | styling required for the header component
can be done here. |
| keyExtractor | Extracts 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
924 Views
