Why We Use Section List in React Native –
In this tutorial we are going to discuss about “What is SectionList in React Native“, SectionList
component allow you to create a list of content which is broken up into scrollable sections. SectionLists are same as Flat -list but in the sectionList you extend the FlatList functionality even further.
In React Native SectionList is a list view component which sets the list of data into broken parts with sections and the broken data can be implemented using its section header prop renderSectionHeader.
Output Example –
Props of SectionList –
So let’s start integrating section list, follow all the steps –
Step 1 – Creating App
Here i am going to create a react native app first where we integrate the section list –
react-native init sectionListExample
Step 2 – Import the SectionList
Now you can import the section list where you want to integrate it.
import {SectionList,Text, View } from 'react-native';
Step 3 – State Declaration
Here we declare the state and store the section list formate data in array and it’s a very important part because your array need to in this formate for integrate section list.
Array form is like – you see here there is a array of data and then a separate string for title declaration, your API response is must be in this form.
this.state = {
sectionListData:[
{
{
title: 'Itechinsiders',
data: [
type:'Ionic',
type:'React Native',
type:'Magento',
type:'Tech News',
],
},
{
title: 'Itechinsiders',
data: [
type:'Ionic',
type:'React Native',
type:'Magento',
type:'Tech News',
],
},
{
title: 'Itechinsiders',
data: [
type:'Ionic',
type:'React Native',
type:'Magento',
type:'Tech News',
],
},
{
title: 'Itechinsiders',
data: [
type:'Ionic',
type:'React Native',
type:'Magento',
type:'Tech News',
],
},
]
}
Step 4 – View Design
Here we design the view for section list.
render() {
const { sectionListData } = this.state;
return (
<View style={{}}>
<SectionList sections={sectionListData}
style={{backgroundColor:'white'}}
showsVerticalScrollIndicator={false}
ListFooterComponent={() => (
<View style={{marginBottom:10}} />
)}
extraData={sectionListData}
renderItem={({item, index}) =>
<Text>{item.type}</Text>
}
renderSectionHeader={({section:{title}}) => (
<View style={{paddingLeft:14}}>
<Text style={{color:'gray'>{title}</Text>
</View>
)}
/>
</View>
)
}
Step 5 – Run The App
firstly we need to goto the path where the app is located then run the app.
cd sectionListExample
//Run it on the android device
react-native run-android
//run on the iOS simulator
react-native run-ios
So we completed the react native sectionList which is “What is SectionList in React Native“.
You can find my post on medium as well click here please follow me on medium as well.
You can find my next post here.
If have any query/issue, please feel free to ask.
Happy Coding Guys.
Hi, I am a professional Ionic and React Native Pixel Perfect App Designer and Developer, with expertise in Client Communication, Bug Fixing, Third Party Lib, Version Control Tools, Requirement Understanding, and managing teams, I have 6+ years of experience in the same domain as well as in Codeigniter, JS, IoT, and more than 10 other languages. For the last 6+ years, not a single day went without design/development.
Please follow me on Medium: https://nehadwivedi1004.medium.com/