Add Header Footer to ListView Component in React Native iOS Android

ListView supports advanced features which included both Header and Footer. Header is shows just above the first item of ListView, it is a type of View block area used to show a message like ListView title. Footer display below the ListView or call on when ListView data items reached to its end, its also a type of View block containing some message text about You have reached to an end or copy right notice etc. So in this tutorial we would going to implement Add Header Footer to ListView Component in React Native iOS Android application example tutorial.

ListView props used to render Header & Footer :

  • renderHeader={ } : We need to call the function which would return a View in render header prop.
  • renderFooter={ } : We need to call a function from render Footer prop, Function should return a View.

Contents in this project Add Header Footer to ListView Component in React Native iOS Android React Native App:

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

2. Creating constructor() in your project, Now we would make a State with ListView data source, These will be all ListView items.

3. Creating a function named as ListViewItemSeparator(), this function will draw a line between each ListView item.

4. Create a function named as showItem(), This function would show us the ListView selected item on screen using Alert message.

5. Create a function named as renderHeader(), This function is used to show header view above ListView.

6. Create a function named as renderFooter() to show Footer View below ListView last item.

7. Create a Root View in render’s return block, Now inside this View we would make the ListView component.

renderHeader={} : Used to render the Header above ListView.

renderFooter={} : Used to render the Footer below ListView.

8. Creating Style.

9. Complete source code for App.js File :

Screenshot in Android device:

Add Header Footer to ListView Component

Screenshot in iOS device:

Leave a Reply

Your email address will not be published.