React Native Add Sticky Header to ListView Android iOS Example

In our previous tutorial we have implement sticky header on FlatList but in this tutorial we would going Add Sticky Header to ListView for both android and iOS devices. ListView is the oldest component present in react native since its been developed so most of the peoples used ListView and faced a problem to place Sticky header above it. Sticky header is a fixed header shows just above at the top of ListView and dose not move while user scrolls the ListView, it will stuck there. So in this tutorial we would going to Add Sticky Header to ListView in react native Android iOS Example tutorial. You can also make sticky ListView sections using this tutorial.

Live Screenshot:

ListView props used in this tutorial to make header Sticky:

renderHeader : This prop would allow us to set Header on ListView and its by default index value is 0(zero).

stickyHeaderIndices={[0]} : This would make the header as sticky because its automatically placed at 0th number of index.

Contents in this project Add Sticky Header to ListView in Android iOS React Native App Example:

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

2. Create constructor() in your class and we would make the ListView data source and add 1 to 20 number of items inside data source. These items would show inside ListView.

3. Crate a function named as ListViewItemSeparator(), this function would make a separator line between each ListView elements.

4. Create a function named as GetListViewItem(), this function would call on ListView item onPress event and show us the selected value.

5. This step is very important, create a function RenderListViewHeader() to render the header above ListView. We would simply creating a View inside this function and returning it, you can make any view according to your requirement.

6. Creating ListView component inside root View in render’s return block.

stickyHeaderIndices={[0]} : Makes the header sticky.

renderHeader={this.RenderListViewHeader} : Render the header view above ListView.

7. Creating Style.

8. Complete source code for App.js File :

Screenshot in Android device:

Add Sticky Header to ListView

Screenshot in iOS device:

2 Comments

  1. what if they abandon the development of ListView

Leave a Reply

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