FlatList onEndReached triggered before reach onEndReachedThreshold

Description

FlatList onEndReached triggered before reach end of list. If legacyImplementation is set to true or render with ListView, onEndReached will trigger correctly when it reached end of list

Reproduction

Based from FlatListExample on UIExplorer in React Native v0.43.0-rc.1, add onEndReached to FlatList

state = {
  data: genItemData(30),
  debug: false,
  horizontal: false,
  filterText: '',
  fixedHeight: true,
  logViewable: false,
  virtualized: true,
};

<FlatList
  HeaderComponent={HeaderComponent}
  FooterComponent={FooterComponent}
  SeparatorComponent={SeparatorComponent}
  data={filteredData}
  debug={this.state.debug}
  disableVirtualization={!this.state.virtualized}
  getItemLayout={this.state.fixedHeight ?
    this._getItemLayout :
    undefined
  }
  horizontal={this.state.horizontal}
  key={(this.state.horizontal ? 'h' : 'v') +
    (this.state.fixedHeight ? 'f' : 'd')
  }
  legacyImplementation={false}
  numColumns={1}
  onRefresh={this._onRefresh}
  onViewableItemsChanged={this._onViewableItemsChanged}
  ref={this._captureRef}
  refreshing={false}
  renderItem={this._renderItemComponent}
  shouldItemUpdate={this._shouldItemUpdate}
  viewabilityConfig={VIEWABILITY_CONFIG}
  onEndReachedThreshold={1}
  onEndReached={({ distanceFromEnd }) => {
    console.log('on end reached ', distanceFromEnd)
  }}
/>  

Additional Information

• React Native version: v0.43.0-rc.1
• Platform: Both
• Operating System: MacOS

[idibidiart]

I believe Content is from NativeBase and I believe that implements a ScrollView. FlatList cannot work right inside a ScrollView.

[rqzheng2015]

I know how to solve this, you just need to set onEndReachedThreshold as a rate of visibleLength. So you just need to set it as a number smaller than 1, then it worked!!!