Last Updated on December 14, 2020.
In this blog post, I will explain how to add a footer to your FlatList component in react native. If you are looking for how to add a header to your FlatList then check out my previous blog post.
In some scenarios, adding a footer, which appears at the bottom of the FlatList component is needed. You can use ListFooterComponent prop of FlatList for this purpose. Following is a complete react native example of FlatList with Footer.
Class based component
import React, {Component} from 'react';
import {View, Text, StyleSheet, FlatList} from 'react-native';
class MyClass extends Component {
constructor(props) {
super(props);
this.state = {
data: '',
};
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((json) =>
this.setState({
data: json,
}),
);
}
footer = () => {
return (
<View style={styles.headerStyle}>
<Text style={styles.titleStyle}>This is the footer</Text>
</View>
);
};
render() {
return (
<View style={styles.container}>
<FlatList
keyExtractor={(item) => item.id.toString()}
data={this.state.data}
ListFooterComponent={this.footer}
renderItem={({item}) => <Text>{item.title}</Text>}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
buttonView: {
flexDirection: 'row',
},
headerStyle: {
flex: 1,
height: 40,
width: '100%',
backgroundColor: 'blue',
justifyContent: 'center',
alignItems: 'center',
},
titleStyle: {
color: 'white',
},
});
export default MyClass;
Function based component
import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet, FlatList} from 'react-native';
const MyClass = () => {
const [data, setData] = useState('');
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((json) => setData(json));
}, []);
const footer = () => {
return (
<View style={styles.headerStyle}>
<Text style={styles.titleStyle}>This is the footer</Text>
</View>
);
};
return (
<View style={styles.container}>
<FlatList
keyExtractor={(item) => item.id.toString()}
data={data}
ListFooterComponent={footer}
renderItem={({item}) => <Text>{item.title}</Text>}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
buttonView: {
flexDirection: 'row',
},
headerStyle: {
flex: 1,
height: 40,
width: '100%',
backgroundColor: 'blue',
justifyContent: 'center',
alignItems: 'center',
},
titleStyle: {
color: 'white',
},
});
export default MyClass;
As given in the example, ListFooterComponent can accept a react class component or a rendered element or a render function. The footer component will be rendered at the bottom of all the items as given in the gif below:
