Add Fixed Sticky Header on FlatList in React Native iOS Android Tutorial

Sticky header is a type of fixed view shows just above the FlatList in react native. Sticky header will visible all the time even when user is scrolling the FlatList, It is mostly used to show a Title or heading regarding to FlatList data. So in this tutorial we would going to Show Add Fixed Sticky Header on FlatList in React Native iOS Android app using ListHeaderComponent={} and stickyHeaderIndices={[0]} prop.

Live Screenshot of demo app:

Contents in this project Add Fixed Sticky Header on FlatList in React Native iOS Android app example tutorial:

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

2. Create constructor() in your class, Now we would make a State array named as FlatListItems and store Fruit names as FlatList data.

3. Create a function named as FlatListItemSeparator(). This function would show a line between each FlatList items.

4. Create a function named as GetItem() to show the FlatList clicked item.

5. Create a function named as Render_FlatList_Sticky_header(), This function would render the Sticky header view at the top of FlatList. We would call this function on ListHeaderComponent={} prop in FlatList.

6. Create a Root view in render’s return block.

7. Create FlatList component in Root View.

ListHeaderComponent={} : This prop would set the header view at the top of ListView.

stickyHeaderIndices={[0]} : This prop would set the FlatList 0 index position item as Sticky header and as you can see we have already added the header to FlatList so the header is now on 0 index position, so it will by default make the header as Sticky.

8. Create Style.

9. Complete source code for App.js File :

Screenshot in Android device :

Sticky Header on FlatListScreenshot in iOS device:

Leave a Reply

Your email address will not be published.