Sticky header is a type of fixed view shows just above the FlatList in react native. Sticky header will visible all the time even when user is scrolling the FlatList, It is mostly used to show a Title or heading regarding to FlatList data. So in this tutorial we would going to Show Add Fixed Sticky Header on FlatList in React Native iOS Android app using ListHeaderComponent={} and stickyHeaderIndices={[0]} prop.
Live Screenshot of demo app:
Contents in this project Add Fixed Sticky Header on FlatList in React Native iOS Android app example tutorial:
1. Import StyleSheet,View, FlatList, Text, Alert and Platform component in your project’s class.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet,View, FlatList, Text, Alert, Platform } from ‘react-native’;
|
2. Create constructor() in your class, Now we would make a State array named as FlatListItems and store Fruit names as FlatList data.
|
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
|
constructor(props)
{
super(props);
this.state = { FlatListItems: [
{key: ‘Apple’},
{key: ‘Apricot’},
{key: ‘Avocado’},
{key: ‘Banana’},
{key: ‘Blackberry’},
{key: ‘Blackcurrant’},
{key: ‘Blueberry’},
{key: ‘Boysenberry’},
{key: ‘Cherry’},
{key: ‘Coconut’},
{key: ‘Grape’},
{key: ‘Grapefruit’},
{key: ‘Kiwifruit ‘},
{key: ‘Lemon’},
{key: ‘Lime’},
{key: ‘Litchi’},
{key: ‘Mango’},
{key: ‘Melon’},
{key: ‘Nectarine’},
{key: ‘Orange’},
{key: ‘Papaya’},
]}
}
|
3. Create a function named as FlatListItemSeparator(). This function would show a line between each FlatList items.
|
1
2
3
4
5
6
7
8
9
10
11
|
FlatListItemSeparator = () => {
return (
<View
style={{
height: 1,
width: “100%”,
backgroundColor: “#607D8B”,
}}
/>
);
}
|
4. Create a function named as GetItem() to show the FlatList clicked item.
|
1
2
3
4
5
|
GetItem (item) {
Alert.alert(item);
}
|
5. Create a function named as Render_FlatList_Sticky_header(), This function would render the Sticky header view at the top of FlatList. We would call this function on ListHeaderComponent={} prop in FlatList.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
Render_FlatList_Sticky_header = () => {
var Sticky_header_View = (
<View style={styles.header_style}>
<Text style={{textAlign: ‘center’, color: ‘#fff’, fontSize: 22}}> FlatList Sticky Header </Text>
</View>
);
return Sticky_header_View;
};
|
6. Create a Root view in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
7. Create FlatList component in Root View.
ListHeaderComponent={} : This prop would set the header view at the top of ListView.
stickyHeaderIndices={[0]} : This prop would set the FlatList 0 index position item as Sticky header and as you can see we have already added the header to FlatList so the header is now on 0 index position, so it will by default make the header as Sticky.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
render() {
return (
<View style={styles.MainContainer}>
<FlatList
data={ this.state.FlatListItems }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) => <Text style={styles.FlatList_Item} onPress={this.GetItem.bind(this, item.key)} > {item.key} </Text>}
ListHeaderComponent={this.Render_FlatList_Sticky_header}
stickyHeaderIndices={[0]}
/>
</View>
);
}
|
8. Create 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
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
paddingTop: (Platform.OS === ‘iOS’) ? 20 : 0
},
FlatList_Item: {
padding: 10,
fontSize: 18,
height: 44,
},
header_style:{
width: ‘100%’,
height: 45,
backgroundColor: ‘#00BCD4’,
alignItems: ‘center’,
justifyContent: ‘center’
}
});
|
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
|
import React, { Component } from ‘react’;
import { StyleSheet,View, FlatList, Text, Alert, Platform } from ‘react-native’;
export default class Myproject extends Component {
constructor(props)
{
super(props);
this.state = { FlatListItems: [
{key: ‘Apple’},
{key: ‘Apricot’},
{key: ‘Avocado’},
{key: ‘Banana’},
{key: ‘Blackberry’},
{key: ‘Blackcurrant’},
{key: ‘Blueberry’},
{key: ‘Boysenberry’},
{key: ‘Cherry’},
{key: ‘Coconut’},
{key: ‘Grape’},
{key: ‘Grapefruit’},
{key: ‘Kiwifruit ‘},
{key: ‘Lemon’},
{key: ‘Lime’},
{key: ‘Litchi’},
{key: ‘Mango’},
{key: ‘Melon’},
{key: ‘Nectarine’},
{key: ‘Orange’},
{key: ‘Papaya’},
]}
}
FlatListItemSeparator = () => {
return (
<View
style={{
height: 1,
width: “100%”,
backgroundColor: “#607D8B”,
}}
/>
);
}
GetItem (item) {
Alert.alert(item);
}
Render_FlatList_Sticky_header = () => {
var Sticky_header_View = (
<View style={styles.header_style}>
<Text style={{textAlign: ‘center’, color: ‘#fff’, fontSize: 22}}> FlatList Sticky Header </Text>
</View>
);
return Sticky_header_View;
};
render() {
return (
<View style={styles.MainContainer}>
<FlatList
data={ this.state.FlatListItems }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) => <Text style={styles.FlatList_Item} onPress={this.GetItem.bind(this, item.key)} > {item.key} </Text>}
ListHeaderComponent={this.Render_FlatList_Sticky_header}
stickyHeaderIndices={[0]}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
paddingTop: (Platform.OS === ‘iOS’) ? 20 : 0
},
FlatList_Item: {
padding: 10,
fontSize: 18,
height: 44,
},
header_style:{
width: ‘100%’,
height: 45,
backgroundColor: ‘#00BCD4’,
alignItems: ‘center’,
justifyContent: ‘center’
}
});
|
Screenshot in Android device :
Screenshot in iOS device:
Also Read :
React Native Insert Break Line Text Multiple Line Text Example
React Native Align Position Button View at Bottom of Screen Example
React Native Hide Activity Navigation Bar Make App Full Screen iOS Android Example
Example of Creating SQLite Database Table in React Native
Add Rounded Corners Border to Text Component in React Native iOS Android
