Flatlist React Native - No Data Display

Question

We are developing a react native application using Flatlist. Binding data from API service & its working fine. Suppose no data available in service we need to display separate design for that.

We are using "renderEmptyListComponent" for that

sharing the code, please check

<FlatList style={{ backgroundColor: 'white' }}
              data={this.state.dataSource}
              renderItem={({ item }) => (this.renderMovie(item))}
              keyExtractor={item => item.salesID}
              renderEmptyListComponent= {this.noItemDisplay}
              ItemSeparatorComponent={this.renderSeparator}>
            </FlatList>

please guide me how can we do this?

Answer 1

might want to use this instead:

<FlatList 
  style={{ backgroundColor: 'white' }}
  data={this.state.dataSource}
  renderItem={({ item }) => (this.renderMovie(item))}
  keyExtractor={item => item.salesID}
  ListEmptyComponent={this.noItemDisplay}
  ItemSeparatorComponent={this.renderSeparator}>
</FlatList>

Or if that also doesn't work do the old ternary jsx-eroo

{ this.data ? <FLatList /> : null }

Hope this helps