ListEmptyComponent in React Native

Introduction

ListEmptyComponent shows a message or view when a list has no items. It helps users understand the list is empty instead of seeing a blank screen.

When you have a list of items that might sometimes be empty.

When you want to show a friendly message like 'No items found' if the list is empty.

When you want to guide users to add new items if the list is empty.

When you want to improve user experience by avoiding a blank screen.

When you want to display an image or icon explaining the empty state.

Syntax

React Native

import { FlatList, Text, View } from 'react-native';

<FlatList
  data={dataArray}
  renderItem={({ item }) => <Text>{item.name}</Text>}
  ListEmptyComponent={() => (
    <View>
      <Text>No items available</Text>
    </View>
  )}
/>

The ListEmptyComponent prop accepts a React component or a function returning a component.

This component only shows when the data array is empty.

Examples

Simple text message shown when list is empty.

React Native

ListEmptyComponent={() => <Text>No data found</Text>}

Passing a component directly instead of a function.

React Native

ListEmptyComponent={<Text style={{color: 'gray'}}>Nothing here yet!</Text>}

Showing multiple lines with a container view.

React Native

ListEmptyComponent={() => (
  <View style={{alignItems: 'center'}}>
    <Text>No items</Text>
    <Text>Add some to get started.</Text>
  </View>
)}

Sample App

This app shows a list with no items. Because the list is empty, the ListEmptyComponent displays a friendly message in the center.

React Native

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

export default function App() {
  const emptyData = [];

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={emptyData}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
        ListEmptyComponent={() => (
          <View style={styles.emptyContainer}>
            <Text style={styles.emptyText}>No items to display</Text>
          </View>
        )}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  item: { fontSize: 18, padding: 10 },
  emptyContainer: { alignItems: 'center' },
  emptyText: { fontSize: 20, color: 'gray' }
});

Important Notes

The ListEmptyComponent only shows if the data array is empty or undefined.

Time complexity is not affected by this component; it just renders conditionally.

Common mistake: forgetting to provide a keyExtractor or unique keys for list items.

Use ListEmptyComponent to improve user experience by clearly showing empty states instead of blank screens.

Summary

ListEmptyComponent shows a message or view when the list has no data.

It helps users understand the list is empty and can guide them on what to do next.

You can pass a component or a function returning a component to ListEmptyComponent.