React Native Show Error Message IF FlatList is Empty No Data Present

FlatList has a prop named as ListEmptyComponent={} which renders a function containing View Layout or specific event trigger if there is not data present in FlatList data source object. This type of functionality is mostly used when there is some problem in internet connection and if FlatList is unable make the web call on some network error or internet issue, then it will show us a error message on screen. So in this tutorial we would going to Show Error Message IF FlatList is Empty No Data Present in FlatList in iOS Android react native app.

Contents in this project Show Error Message IF FlatList is Empty in iOS Android React Native App Example Tutorial:

1. Import StyleSheet, View, FlatList and Text component in your project.

2. Create constructor() in your class and inside the constructor() we would make a State named as FlatListItems and enter some data in this state array. This would be our FlatList data, i am commenting all the data so you can see the if there is no data present in the FlatList data source then it will automatically call the ListEmptyComponent=() prop and execute the function called inside it.

3. Create a function named as FlatListItemSeparator(), This function would render a horizontal line between each FlatList item.

4. Create a function named as ListEmptyView(), This function would using the ListEmptyComponent={} prop it there is no data present in FlatList.

5. Create a Root View and FlatList component inside the render’s return block.

6. Creating Style.

7. Complete source code for App.js File :

Screenshot in Android device:

Show Error Message IF FlatList is Empty No Data Present

Screenshot in iOS device:

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *