React Native Show Message for empty FlatList

This tutorial explains how to display empty message "No Data Available" in FlatList view in react native application, when there is not data present in FlatList data source object.  Lets consider the scenarios where we have to load bulk data in FlatList view using server side rendering, in that case we need provide appropriate message to user for the request data and their corresponding response. Generally we are come across with below scenarios :

1.  When data is available, then it will display the data in FlatList view using renderItem prop.
2.  When data is not available, then it will display the error message "No Data Available" to user.

We are using ListEmptyComponent prop, to display appropriate error message in FlatList view.

<FlatList
   data={ this.state.FlatListItems }
   ItemSeparatorComponent = {this.FlatListItemSeparator}
   renderItem={({item}) => <Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} > {item.key} </Text>}
   ListEmptyComponent={this.ListEmptyView}
  />

React Native Show Message for empty FlatList :

Lets follow the below steps to Show Message for empty FlatList view in React Native.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

 import React, { Component } from "react";
 import { Platform, StyleSheet, FlatList, Text, View, Alert, Dimensions } from "react-native";

Step-4 : Create constructor in your App class with props parameter and Create super method with props parameter in constructor. For this example we are setting state object to empty, in order to display error message in FlatList view.

constructor(props) {
     super(props);

     this.state = {
       FlatListItems: [
      /*  { key: "Skptricks" },
         { key: "Sumit" },
         { key: "Amit" },
         */
       ]
     };
   }

Step-5 : Create a function named as FlatListItemSeparator. Using this method we are generating the FlatList each item separator – divider line.

 FlatListItemSeparator = () => {
     return (
       <View style={{ height: 1, width: "100%", backgroundColor: "#607D8B" }} />
     );
   };

Step-6 : Create GetItem method to show the selected FlatList item name with help of alert dialog box.

 GetItem(item) {
     Alert.alert(item);
   }

Step-7 : Create a function named as ListEmptyView() and this function return error message "No Data Available". We are binding this function with FlatList component prop name as ListEmptyComponent . This function automatically called when FlatList is empty.

ListEmptyView = () => {
    return (
      <View style={styles.headerText}>
        <Text style={{textAlign: 'center',fontSize:20, fontWeight:'bold'}}> No Data Available...</Text>
      </View>

    );
  }

Step-8 : Implement render method and return FlatList component wrapped by root View component. Specify the below parameters in FlatList component as props, that helps to form list layout.The basic key props that are necessary, while using FlatList component.

• data - The array of items that need to be listed.
• renderItem - Function that returns the component of each item.
• keyExtractor - Extract the key of each item: it can be the index or any unique field in the data.
• ListEmptyComponent-  When list is empty, then this props will rendered with appropriate message set by user.

render() {
      return (
        <View style={styles.container}>
          <FlatList
             data={ this.state.FlatListItems }
             ItemSeparatorComponent = {this.FlatListItemSeparator}
             renderItem={({item}) => <Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} > {item.key} </Text>}
             ListEmptyComponent={this.ListEmptyView}
          />
        </View>
     );
   }

Step-9 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    padding: 10,
    marginTop: Dimensions.get('window').height / 2,
    height: 40,
  },
  item: {
    padding: 10,
    fontSize: 20,
    height: 45,
  }
});

Complete Source Code for App.js 

Lets see the complete source code that helps to display error message "No Data Available", when FlatList view is empty in react native application.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

 import React, { Component } from "react";
 import { Platform, StyleSheet, FlatList, Text, View, Alert, Dimensions } from "react-native";

 export default class App extends Component {
   constructor(props) {
     super(props);

     this.state = {
       FlatListItems: [
      /*  { key: "Skptricks" },
         { key: "Sumit" },
         { key: "Amit" },
         */
       ]
     };
   }

   FlatListItemSeparator = () => {
     return (
       <View style={{ height: 1, width: "100%", backgroundColor: "#607D8B" }} />
     );
   };

   GetItem(item) {
     Alert.alert(item);
   }

  ListEmptyView = () => {
    return (
      <View style={styles.headerText}>
        <Text style={{textAlign: 'center',fontSize:20, fontWeight:'bold'}}> No Data Available...</Text>
      </View>

    );
  }

   render() {
      return (
        <View style={styles.container}>
          <FlatList
             data={ this.state.FlatListItems }
             ItemSeparatorComponent = {this.FlatListItemSeparator}
             renderItem={({item}) => <Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} > {item.key} </Text>}
             ListEmptyComponent={this.ListEmptyView}
          />
        </View>
     );
   }

 }


 const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    padding: 10,
    marginTop: Dimensions.get('window').height / 2,
    height: 40,
  },
  item: {
    padding: 10,
    fontSize: 20,
    height: 45,
  }
});

Screenshot :

Download Link :
https://github.com/skptricks/React-Native/tree/master/React%20Native%20Show%20Message%20for%20empty%20FlatList

This is all about React Native Show Message for empty FlatList. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.