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:
