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:
Screenshot in iOS device:
Also Read :
React Native Set Header Bar Title Text in React Navigation 5.x
React Native Solve Unrecognized Font Family Material Design Icons Error in iOS MAC
React Native Generate SHA256 Encoded Hash Key Android iOS Example
React Native Generate Release key hash for Facebook Login in Windows
React Navigation 5.x Hide Navigation Bar Open Full Screen Modal in React Native
