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.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, FlatList, Text } from ‘react-native’;
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
constructor(props)
{
super(props);
this.state = {
FlatListItems: [
// {key: ‘One’},
// {key: ‘Two’},
// {key: ‘Three’},
// {key: ‘Four’},
// {key: ‘Five’},
// {key: ‘Six’},
// {key: ‘Seven’},
// {key: ‘Eight’},
// {key: ‘Nine’},
// {key: ‘Ten’},
// {key: ‘Eleven’},
// {key: ‘Twelve’}
]}
}
|
3. Create a function named as FlatListItemSeparator(), This function would render a horizontal line between each FlatList item.
|
1
2
3
4
5
6
7
8
9
10
11
|
FlatListItemSeparator = () => {
return (
<View
style={{
height: 1,
width: “100%”,
backgroundColor: “#607D8B”,
}}
/>
);
}
|
4. Create a function named as ListEmptyView(), This function would using the ListEmptyComponent={} prop it there is no data present in FlatList.
|
1
2
3
4
5
6
7
8
9
10
|
ListEmptyView = () => {
return (
<View style={styles.MainContainer}>
<Text style={{textAlign: ‘center’}}> Sorry, No Data Present In FlatList... Try Again.</Text>
</View>
);
}
|
5. Create a Root View and FlatList component inside the render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
render() {
return (
<View style={styles.MainContainer}>
<FlatList
data={ this.state.FlatListItems }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) => <Text style={styles.item}> {item.key} </Text>}
ListEmptyComponent={this.ListEmptyView}
/>
</View>
);
}
|
6. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
})
|
7. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
import React, { Component } from ‘react’;
import { StyleSheet, View, FlatList, Text } from ‘react-native’;
export default class Myproject extends Component {
constructor(props)
{
super(props);
this.state = {
FlatListItems: [
// {key: ‘One’},
// {key: ‘Two’},
// {key: ‘Three’},
// {key: ‘Four’},
// {key: ‘Five’},
// {key: ‘Six’},
// {key: ‘Seven’},
// {key: ‘Eight’},
// {key: ‘Nine’},
// {key: ‘Ten’},
// {key: ‘Eleven’},
// {key: ‘Twelve’}
]}
}
FlatListItemSeparator = () => {
return (
<View
style={{
height: 1,
width: “100%”,
backgroundColor: “#607D8B”,
}}
/>
);
}
ListEmptyView = () => {
return (
<View style={styles.MainContainer}>
<Text style={{textAlign: ‘center’}}> Sorry, No Data Present In FlatList... Try Again.</Text>
</View>
);
}
render() {
return (
<View style={styles.MainContainer}>
<FlatList
data={ this.state.FlatListItems }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) => <Text style={styles.item}> {item.key} </Text>}
ListEmptyComponent={this.ListEmptyView}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 10
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
})
|
Screenshot in Android device:
Screenshot in iOS device:
Also Read :
React Native User Registration with Local PhpMyAdmin MySQL Database iOS Android Tutorial
React Native Create Drop Shadow Effect Text in Android iOS Example
React Native Set View Height Width in Percentage format Respect of Root View
React Native Call Function in Functional Component Example Tutorial
React Native Show Default Image Before loading Real Image PlaceHolder iOS Android Example
