React Native FlatList inside ScrollView onEndReached never called

Question

My container is a scrollview and inside it is a flatlist, which load data from server.

The flatlist:

<VirtualizedList
  ListEmptyComponent={<NoData />}
  data={data}
  getItem={(items, index) => items.get(index)}
  getItemCount={(items) => items.size}
  keyExtractor={(item, index) => String(index)}
  renderItem={this._renderItem}
  refreshControl={
     <RefreshControl
       refreshing={loading}
       onRefresh={this._onRefresh.bind(this)}
     />
  }
  onEndReached={this.handleLoadMore}
  onEndReachedThreshold={0.1}
  onMomentumScrollBegin={() => {
    Log('onMomentumScrollBegin fired!')
    this.onEndReachedCalledDuringMomentum = false;
  }}
/>

which handleLoadMore is:

handleLoadMore = () => {
  Log('handleLoadMore fired!');
  if (!this.onEndReachedCalledDuringMomentum) {
    // fetch data..
    this.onEndReachedCalledDuringMomentum = true;
  }
}

The problem is the handleLoadMore never called and the onMomentumScrollBegin also never called.

How to solve this?

Answer 1

Actually you don't need to use Content or ScrollView as FlatList has both ListFooterComponent and ListHeaderComponent

In case you really need to use FlatList inside ScrollView, then add style and content contentContainerStyle to your ScrollView or if you use native-base, inside the Content

<ScrollView
  ...
  style={{flex: 1}}
  contentContainerStyle={{flex: 1}}
  ...
/>

Then if you want to use header component out of FlatList loop. Then use ListHeaderComponent={() => <SomeHeader /> inside Flatlist.