How to Add Footer to FlatList in React Native

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.

Following is the typescript code for react native FlatList footer.

import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet, FlatList} from 'react-native';

interface Data {
  id: number;
  title: string;
  body: string;
}

const App = () => {
  const [data, setData] = useState<Data[]>([]);

  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={data.length > 0 ? footer : null}
        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 App;

Following is the code for non typescript users.

import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet, FlatList} from 'react-native';

const App = () => {
  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={data.length > 0 ? footer : null}
        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 App;

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:

That’s how you add footer to react native FlatList.