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.