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.

To Add Sticky header on FlatList read our this post.

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.

<br />
import React, { Component } from ‘react’;</p>
<p>import { Platform, StyleSheet, View, Text, FlatList, Alert } from ‘react-native’;

import React, { Component } from ‘react’;

import { Platform, StyleSheet, View, Text, FlatList, Alert } from ‘react-native’;

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

<br />
constructor()<br />
  {<br />
    super();</p>
<p>    this.state = { </p>
<p>      FlatListItems: [</p>
<p>      {key: ‘Apple’},<br />
      {key: ‘Apricot’},<br />
      {key: ‘Avocado’},<br />
      {key: ‘Banana’},<br />
      {key: ‘Blackberry’},<br />
      {key: ‘Blackcurrant’},<br />
      {key: ‘Blueberry’},<br />
      {key: ‘Boysenberry’},<br />
      {key: ‘Cherry’}</p>
<p>    ]}<br />
  }

constructor()

{

super();

this.state = {

FlatListItems: [

{key: ‘Apple’},

{key: ‘Apricot’},

{key: ‘Avocado’},

{key: ‘Banana’},

{key: ‘Blackberry’},

{key: ‘Blackcurrant’},

{key: ‘Blueberry’},

{key: ‘Boysenberry’},

{key: ‘Cherry’}

]}

}

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

<br />
FlatListItemSeparator = () => {<br />
    return (<br />
      <View<br />
        style={{<br />
          height: 1,<br />
          width: “100%”,<br />
          backgroundColor: “#607D8B”,<br />
        }}<br />
      /><br />
    );<br />
  }

FlatListItemSeparator = () => {

return (

<View

style={{

height: 1,

width: “100%”,

backgroundColor: “#607D8B”,

}}

);

}

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

<br />
GetFlatListItem (item) {</p>
<p>  Alert.alert(item);</p>
<p>  }

GetFlatListItem (item) {

Alert.alert(item);

}

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

<br />
render_FlatList_header = () => {</p>
<p>    var header_View = (</p>
<p>    <View style={styles.header_footer_style}></p>
<p>      <Text style={styles.textStyle}> FlatList Header </Text></p>
<p>    </View></p>
<p>    );</p>
<p>    return header_View ;</p>
<p>  };

render_FlatList_header = () => {

var header_View = (

<Text style={styles.textStyle}> FlatList Header </Text>

</View>

);

return header_View ;

};

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

<br />
render_FlatList_footer = () => {</p>
<p>    var footer_View = (</p>
<p>    <View style={styles.header_footer_style}></p>
<p>      <Text style={styles.textStyle}> FlatList Footer </Text></p>
<p>    </View></p>
<p>    );</p>
<p>    return footer_View;</p>
<p>  };

render_FlatList_footer = () => {

var footer_View = (

<Text style={styles.textStyle}> FlatList Footer </Text>

</View>

);

return footer_View;

};

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.

<br />
render() {<br />
    return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>            <FlatList</p>
<p>                data={ this.state.FlatListItems }</p>
<p>                ItemSeparatorComponent = {this.FlatListItemSeparator}</p>
<p>                renderItem={({item}) => <Text style={styles.FlatList_Item} onPress={this.GetFlatListItem.bind(this, item.key)} > {item.key} </Text>}</p>
<p>                ListHeaderComponent={this.render_FlatList_header}</p>
<p>                ListFooterComponent={this.render_FlatList_footer}</p>
<p>              /></p>
<p>      </View></p>
<p>    );<br />
  }

render() {

return (

<FlatList

data={ this.state.FlatListItems }

ItemSeparatorComponent = {this.FlatListItemSeparator}

renderItem={({item}) => <Text style={styles.FlatList_Item} onPress={this.GetFlatListItem.bind(this, item.key)} > {item.key} </Text>}

ListHeaderComponent={this.render_FlatList_header}

ListFooterComponent={this.render_FlatList_footer}

</View>

);

}

8. Creating Style.

<br />
const styles = StyleSheet.create({</p>
<p>MainContainer :{</p>
<p>justifyContent: ‘center’,<br />
flex:1,<br />
paddingTop: (Platform.OS === ‘iOS’) ? 20 : 0</p>
<p>},</p>
<p>FlatList_Item: {<br />
    padding: 10,<br />
    fontSize: 18,<br />
    height: 44,<br />
},</p>
<p>header_footer_style:{</p>
<p>  width: ‘100%’,<br />
  height: 44,<br />
  backgroundColor: ‘#4CAF50’,<br />
  alignItems: ‘center’,<br />
  justifyContent: ‘center’</p>
<p>},</p>
<p>textStyle:{</p>
<p>  textAlign: ‘center’,<br />
  color: ‘#fff’,<br />
  fontSize: 21</p>
<p>}</p>
<p>});