Hello friends, In today’s tutorial we would learn about implementing header component on FlatList in react native. Header component shows just at top side of FlatList before it’s first item. The main purpose of header is to display List title or about list. In react native the FlatList has a prop named as ListHeaderComponen={} which can render given component as header of FlatList. There are also a prop named as ListHeaderComponentStyle={} which is used to apply custom styling on header. We would discuss them both in our tutorial. So in this tutorial we would learn about Add Header to FlatList in React Native.
Contents in this project Add Header to FlatList in React Native | ListHeaderComponent :-
1. Open your project’s main App.js file and import View, StyleSheet, SafeAreaView, FlatList and Text component.
|
1 2 3 |
import React from 'react'; import { View, StyleSheet, SafeAreaView, FlatList, Text } from 'react-native'; |
2. Creating our main functional component named as App.
|
1 2 3 4 |
export default function App() { } |
3. Creating a Constant Array named as BirdsName. We would display all of these items as FlatList 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 |
const BirdsName = [ { id: 1, name: 'Peacock', }, { id: 2, name: 'Dove', }, { id: 3, name: 'Sparrow', }, { id: 4, name: 'Ostrich', }, { id: 5, name: 'Pigeon', }, { id: 6, name: 'Quail', } ]; |
4. Creating a component named as ItemRender with name prop. We would use this prop to render list items.
|
1 2 3 4 5 |
const ItemRender = ({ name }) => ( <View style={styleSheet.item}> <Text style={styleSheet.itemText}>{name}</Text> </View> ); |
5. Creating another component named as ItemDivider. We would use this component to render separator line between list items.
|
1 2 3 4 5 6 7 8 9 10 11 |
const ItemDivider = () => { return ( <View style={{ height: 1, width: "100%", backgroundColor: "#607D8B", }} /> ); } |
6. Creating a Custom component named as FlatList_Header. This is our header component.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const FlatList_Header = () => { return ( <View style={{ height: 45, width: "100%", backgroundColor: "#00B8D4", justifyContent: 'center', alignItems: 'center' }}> <Text style={{ fontSize: 24, color: 'white' }}> Sample FlatList Header </Text> </View> ); } |
7. Creating return() block, Now here we would make our FlatList component with ListHeaderComponent and ListHeaderComponentStyle prop. We’re calling the FlatList_Header component in ListHeaderComponent prop.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
return ( <SafeAreaView style={styleSheet.MainContainer}> <FlatList data={BirdsName} renderItem={({ item }) => <ItemRender name={item.name} />} keyExtractor={item => item.id} ItemSeparatorComponent={ItemDivider} ListHeaderComponent={FlatList_Header} ListHeaderComponentStyle={{ borderBottomColor: 'red', borderBottomWidth: 2 }} /> </SafeAreaView> ); |
8. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, backgroundColor: 'white' }, item: { paddingLeft: 15, paddingTop: 8, paddingBottom: 8 }, itemText: { fontSize: 24, color: 'black' }, }); |
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 |
import React from 'react'; import { View, StyleSheet, SafeAreaView, FlatList, Text } from 'react-native'; export default function App() { const BirdsName = [ { id: 1, name: 'Peacock', }, { id: 2, name: 'Dove', }, { id: 3, name: 'Sparrow', }, { id: 4, name: 'Ostrich', }, { id: 5, name: 'Pigeon', }, { id: 6, name: 'Quail', } ]; const ItemRender = ({ name }) => ( <View style={styleSheet.item}> <Text style={styleSheet.itemText}>{name}</Text> </View> ); const ItemDivider = () => { return ( <View style={{ height: 1, width: "100%", backgroundColor: "#607D8B", }} /> ); } const FlatList_Header = () => { return ( <View style={{ height: 45, width: "100%", backgroundColor: "#00B8D4", justifyContent: 'center', alignItems: 'center' }}> <Text style={{ fontSize: 24, color: 'white' }}> Sample FlatList Header </Text> </View> ); } return ( <SafeAreaView style={styleSheet.MainContainer}> <FlatList data={BirdsName} renderItem={({ item }) => <ItemRender name={item.name} />} keyExtractor={item => item.id} ItemSeparatorComponent={ItemDivider} ListHeaderComponent={FlatList_Header} ListHeaderComponentStyle={{ borderBottomColor: 'red', borderBottomWidth: 2 }} /> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, backgroundColor: 'white' }, item: { paddingLeft: 15, paddingTop: 8, paddingBottom: 8 }, itemText: { fontSize: 24, color: 'black' }, }); |
Screenshot :-
