React-Native FlatList render a zero state when data is empty

Question

Is it possible to render an alternate component when the data is empty? The only reason I would not just render the list or not render the list is that the ListHeaderComponent is necessary in both scenarios (data.length and !data.length)...

const data = []
<FlatList
  contentContainerStyle={styles.list}
  data={data} // if empty or !data.length render <ZeroComponent/>

Answer 1

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

Answer 2

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()}
/>