How to Show a Message When Flatlist is Empty

A FlatList is the most suitable component in case of showing the same sort of dynamic data in your react native mobile application. In this blog post, I will explain how to show a text message through FlatList when it is empty.

When the data source of your FlatList component goes empty, then the user should be made to know the reason behind it. You can use the ListEmptyComponent prop of FlatList for this purpose.

In the following react native FlatList empty component example, I am loading data to the FlatList using an API. When the button above FlatList is pressed the data is made empty and you can see the message ‘oops! There’s no data here’!.

Following is the typescript code to show a message when FlatList is empty.

import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, FlatList, Button} 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));
    console.log('test');
  }, []);

  const emptyComponent = () => {
    return (
      <View style={{flex: 1}}>
        <Text style={styles.titleStyle}>oops! There's no data here!</Text>
      </View>
    );
  };

  const clearData = () => {
    setData([]);
  };

  return (
    <View style={styles.container}>
      <Button onPress={() => clearData()} title="Clear Data" color="#841584" />
      <FlatList
        data={data}
        ListEmptyComponent={emptyComponent}
        renderItem={({item}) => <Text>{item.title}</Text>}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  buttonView: {
    flexDirection: 'row',
  },
  titleStyle: {
    color: 'black',
  },
});

export default App;

Following is the code for non typescript users.

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

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

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((json) => setData(json));
    console.log('test');
  }, []);

  const emptyComponent = () => {
    return (
      <View style={{flex: 1}}>
        <Text style={styles.titleStyle}>oops! There's no data here!</Text>
      </View>
    );
  };

  const clearData = () => {
    setData('');
  };

  return (
    <View style={styles.container}>
      <Button onPress={() => clearData()} title="Clear Data" color="#841584" />
      <FlatList
        data={data}
        ListEmptyComponent={emptyComponent}
        renderItem={({item}) => <Text>{item.title}</Text>}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  buttonView: {
    flexDirection: 'row',
  },
  titleStyle: {
    color: 'black',
  },
});

export default App;

The output of the react-native example is as given below:

That’s how you show a message when the FlatList is empty.