React Native SectionList Component iOS Android Example Tutorial

SectionList View component is used to show multiple type of data into broken sets. Each data has its unique header and it will automatically call into multiple sets. User can define both header data and section data items. So in this tutorial we would going to create a simple SectionList Component for both iOS Android applications. So let’s get started 🙂 .

Contents in this project Simple SectionList Component iOS Android Example Tutorial in React Native App:

1. Import StyleSheet, View, SectionList, Text, Platform and Alert component in your project.

2. Create a function named as GetSectionListItem() with item parameter. This function is used to show the SectionList component item click value using Alert message.

3. Create 3 array sets in render’s block using Var. We would simply adding the Fruits names from A, B and C and storing them inside Var array.

4. Create a Root view in render’s return block. This View is our main view.

5. Create the SectionList component in Root View.

sections : Is used to set Title of Each SectionList view and we would also call the var array in it.

renderSectionHeader : This would show the Section Header Title above each part.

renderItem : It is used to show the Items inside the SectionList.

keyExtractor : Gives us the Unique key when the SectionList renders.

6. Create Style for Section List Header Title and Section List Items.

7. Complete source code for App.js File :

Screenshot in Android device :

SectionList

Screenshot in iOS device :

4 Comments

  1. How do we add values from API call into SectionList ?

  2. If i have a Picker which contains the keys for section List headers. SectionList should display the contents only related to key. In your example, suppose i have keys A,B,C and All in a Picker. Now from picker if i select A, it should display FruitListFromA in SectionList.

Leave a Reply

Your email address will not be published. Required fields are marked *