How to add footer at the bottom of the list in React native? Code Example

To add a footer at the bottom of the flatlist in React Native, we can use ListFooterComponent prop which accepts a component or jsx element.

This component renders at the end of the list, after all the items. It is useful to create functionality like Load More button.

Code Example

import React, { useState } from "react";
import { FlatList, SafeAreaView, StyleSheet, Text, View, StatusBar } from "react-native";

const SUPERHERO_DATA = [
  {
    id: '1',
    title: 'Ironman',
  },
  {
    id: '2',
    title: 'Thor',
  },
  {
    id: '3',
    title: 'Captain America',
  },
  {
    id: '4',
    title: 'Hulk',
  },
  {
    id: '5',
    title: 'Hawkeye',
  },
  {
    id: '6',
    title: 'Spiderman',
  },
  {
    id: '7',
    title: 'Antman',
  },
];

const App = () => {
  
  const renderItem = ({ item, index, separators }) => (
    <View style={styles.item}>
        <Text>{item.title}</Text>
      </View>
  )

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={SUPERHERO_DATA}
        renderItem={renderItem}
        ListFooterComponent={() => (
          <View>
            <Text>Source: Marvel Cinematics</Text>
          </View>
        )}
        ListFooterComponentStyle={styles.listFooter}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  listFooter: {
    backgroundColor: '#ffccff',
    borderRadius:5,
    elevation: 2,
  },
  item: {
    backgroundColor: '#fff000',
    padding: 10,
    flex:1,
    margin: 5,
  },
});

export default App;

The output will look like this –

In this code we rendered a footer to display source of our list, which is Marvel Cinematics. It is purple background view with some elevation.

You can set the styles in the component passed in ListFooterComponent prop or you can use ListFooterComponentStyle prop to set style for it.

In this example, we passed listFooter style to ListFooterComponentStyle prop (check line 53). This prop supports styles like Background color, Border styles, Elevation, and Opacity.

Live Demo

Conclusion

Adding a footer in the flatlist is simple. You need to use ListFooterComponent prop which can render any component or element passed to it at the end of the list.