React Native Add Show Header Footer on FlatList in Android iOS Tutorial

FlatList component has 2 major props named as ListHeaderComponent={} and ListFooterComponent={}, they both are used to set header and footer on FlatList. The header is used to show some particular information about FlatList data and the footer is used to show any message at the end item of FlatList data like FlatList has finished here. So in this tutorial we would going to Add Show Header Footer on FlatList in Android iOS React Native App Example Tutorial.

Contents in this project Add Show Header Footer on FlatList in Android iOS React Native App Example Tutorial:

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

2. Create constructor() in your project, Now make a state named as FlatListItems. It is used to add items data in FlatList.

3. Create a function named as FlatListItemSeparator, This would used to render a Horizontal line between each FlatList item.

4. Create a function named as GetFlatListItem(), This is used to show selected item of FlatList on button click.

5. Create a function named as render_FlatList_header(), This function is used to render View layout for Header in FlatList.

6. Create another function named as render_FlatList_footer(), This function is used to render Footer at the bottom of FlatList component.

7. Create the FlatList component inside the Root View in render’s return block.

data :  Setting up the FlatList items data source.

ItemSeparatorComponent : Used to render the line between each item.

renderItem : Rendering items in flatlist.

ListHeaderComponent : Calling the render_FlatList_header() function and show header on FlatList.

ListFooterComponent : Calling the render_FlatList_footer() function and showing the footer at bottom of FlatList.

8. Creating Style.

Screenshots in Android device :

Add Show Header Footer on FlatList

Screenshots in iOS device:

Leave a Reply

Your email address will not be published.