React-Native FlatList render a zero state when data is empty
UPDATE
react-native recently added ListEmptyComponent
const data = []
_listEmptyComponent = () => {
return (
<View>
// any activity indicator or error component
</View>
)
}
<FlatList
data={data}
ListEmptyComponent={this._listEmptyComponent}
contentContainerStyle={styles.list}
/>
const data = []
renderFooter = () => {
if (data.length != 0) return null;
return (
<View>
// any activity indicator or error component
</View>
);
};
<FlatList
contentContainerStyle={styles.list}
data={data}
ListFooterComponent={this.renderFooter}
/>
Hope this helps
There is a prop ListEmptyComponent
which can do the job.
<FlatList
data={this.state.data}
renderItem={this.renderItem}
keyExtractor={(item, index) => item.id}
ListHeaderComponent={this.showFilters()}
ListEmptyComponent={this.showEmptyListView()}
/>