Hi Everyone 🙂 , today we are going to learn, how to add header, footer and item separator into flat list?
There are many props in Flat list. some primary props we had learned in our previous tutorial; you can checkout here Make simple list using Flat List in React Native.
ItemSeparatorComponent:
It is used for creating separator in between of two items. Rendered in between of each item, but not at the top or bottom.
ItemSeparatorComponent={({highlighted}) => (
<Viewstyle={[styles.item, highlighted && {marginLeft: 0}]}/>
)}
ListHeaderComponent:
It is used for making header on the top of a list. Rendered at the top of all the items in the list.
ListHeaderComponent={()=>(
<Viewstyle={{backgroundColor: 'white', alignSelf:'center'}}>
<Text>Example of Flat List</Text>
</View>
)}
ListFooterComponent:
It is used for making footer on the bottom of a list. Rendered at the bottom of all the items in the list.
ListFooterComponent={()=>(
<Viewstyle={{backgroundColor: 'white', alignSelf:'center'}}>
<Text>End of Flat List</Text>
</View>
)}
Here is full code you can try it your own.
import React from 'react';
import {
SafeAreaView, View, TouchableHighlight,
FlatList, StyleSheet, Text
} from 'react-native';
const DATA = [{
id: '1',
title: 'First Item',
},{
id: '2',
title: 'Second Item',
},{
id: '3',
title: 'Third Item',
},{
id: '4',
title: 'Fourth Item',
},{
id: '5',
title: 'Fifth Item',
},{
id: '6',
title: 'Sixth Item',
}];
export default function App() {
return (
<SafeAreaViewstyle={styles.container}>
<FlatList
ItemSeparatorComponent={({highlighted}) => (
<Viewstyle={[styles.item, highlighted && {marginLeft: 0}]}/>
)}
data={DATA}
renderItem={({item, index, separators}) => (
<TouchableHighlight
key={item.key}
onPress={() =>this._onPress(item)}
onShowUnderlay={separators.highlight}
onHideUnderlay={separators.unhighlight}
>
<Viewstyle={{backgroundColor: 'white'}}>
<Text>{item.title}</Text>
</View>
</TouchableHighlight>
)}
ListHeaderComponent={()=>(
<Viewstyle={{backgroundColor: 'white', alignSelf:'center'}}>
<Text>Example of Flat List</Text>
</View>
)}
ListFooterComponent={()=>(
<Viewstyle={{backgroundColor: 'white', alignSelf:'center'}}>
<Text>End of Flat List</Text>
</View>
)}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 12,
},
item: {
backgroundColor: 'lightgreen',
padding: 1,
marginVertical: 8
},
title: {
fontSize: 32,
},
});
Preview:
