How to create empty list placeholder in React Native? Code Example

Empty list placeholder is used to display a message to users when there are no items in the list. If we do not show any message then users gets the feel of broken app or connection error. In any case, displaying empty list is not a good UI practice.

React Native FlatList provides ListEmptyComponent prop which accepts any component or element as value. This component renders only when the list is empty.

Code Example

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

const SUPERHERO_DATA = [];

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

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        ListEmptyComponent={() => (
          <View style={styles.listPlaceholder}>
            <Text>The List is Empty</Text>
          </View>
        )}
        data={SUPERHERO_DATA}
        renderItem={renderItem}
      />
    </SafeAreaView>
  );
};

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

export default App;

The output is –

In the above code SUPERHERO_DATA array is empty. If you don’t define any placeholder then the list will render blank and you will see empty page.

But since we added a text component in ListEmptyComponent prop, we can get the message that we put in this text component.

Live Demo

Conclusion

FlatList provides ListEmptyComponent prop where we can provide any component or element. This component will render when the FlatList is empty.