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.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Alert, ListView, Platform } from 'react-native'; |
2. Creating constructor() in your project, Now we would make a State with ListView data source, These will be all ListView items.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows([ 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten' ]), }; } |
3. Creating a function named as ListViewItemSeparator(), this function will draw a line between each ListView item.
|
1 2 3 4 5 6 7 8 9 10 11 |
ListViewItemSeparator = () => { return ( <View style={{ height: .5, width: "100%", backgroundColor: "#000", }} /> ); } |
4. Create a function named as showItem(), This function would show us the ListView selected item on screen using Alert message.
|
1 2 3 4 5 |
showItem (rowData) { Alert.alert(rowData); } |
5. Create a function named as renderHeader(), This function is used to show header view above ListView.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
renderHeader = () => { var header = ( <View style={styles.header_footer_style}> <Text style={styles.textStyle}> ListView Header </Text> </View> ); return header; }; |
6. Create a function named as renderFooter() to show Footer View below ListView last item.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
renderFooter = () => { var footer = ( <View style={styles.header_footer_style}> <Text style={styles.textStyle}> ListView Footer </Text> </View> ); return footer; }; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
render() { return ( <View style={styles.MainContainer}> <ListView dataSource={this.state.dataSource} renderHeader={this.renderHeader} renderFooter={this.renderFooter} renderSeparator= {this.ListViewItemSeparator} renderRow={ (rowData) => <Text style={styles.rowViewContainer} onPress={this.showItem.bind(this, rowData)}>{rowData}</Text> } /> </View> ); } |
8. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, paddingTop: (Platform.OS == 'ios' ? 20 : 0) }, rowViewContainer: { padding: 10, fontSize: 18, height: 44, }, header_footer_style:{ width: '100%', height: 45, backgroundColor: '#FF9800' }, textStyle:{ textAlign: 'center', color: '#fff', fontSize: 22, padding: 7 } }); |
9. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Alert, ListView, Platform } from 'react-native'; export default class Myproject extends Component { constructor(props) { super(props); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows([ 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten' ]), }; } ListViewItemSeparator = () => { return ( <View style={{ height: .5, width: "100%", backgroundColor: "#000", }} /> ); } showItem (rowData) { Alert.alert(rowData); } renderHeader = () => { var header = ( <View style={styles.header_footer_style}> <Text style={styles.textStyle}> ListView Header </Text> </View> ); return header; }; renderFooter = () => { var footer = ( <View style={styles.header_footer_style}> <Text style={styles.textStyle}> ListView Footer </Text> </View> ); return footer; }; render() { return ( <View style={styles.MainContainer}> <ListView dataSource={this.state.dataSource} renderHeader={this.renderHeader} renderFooter={this.renderFooter} renderSeparator= {this.ListViewItemSeparator} renderRow={ (rowData) => <Text style={styles.rowViewContainer} onPress={this.showItem.bind(this, rowData)}>{rowData}</Text> } /> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, paddingTop: (Platform.OS == 'ios' ? 20 : 0) }, rowViewContainer: { padding: 10, fontSize: 18, height: 44, }, header_footer_style:{ width: '100%', height: 45, backgroundColor: '#FF9800' }, textStyle:{ textAlign: 'center', color: '#fff', fontSize: 22, padding: 7 } }); |
Screenshot in Android device:
