FlatList onEndReached can not be called!

[luoyushouchai]

React Native version: 0.59.9

Steps To Reproduce

I console log in VirtualizedLIst. The function _maybeCallOnEndReached() called.

_maybeCallOnEndReached() {
 const {
   data,
   getItemCount,
   onEndReached,
   onEndReachedThreshold,
 } = this.props;
 const {contentLength, visibleLength, offset} = this._scrollMetrics;
 const distanceFromEnd = contentLength - visibleLength - offset;
 if (
   onEndReached &&
   this.state.last === getItemCount(data) - 1 &&
   /* $FlowFixMe(>=0.63.0 site=react_native_fb) This comment suppresses an
    * error found when Flow v0.63 was deployed. To see the error delete this
    * comment and run Flow. */
   distanceFromEnd < onEndReachedThreshold * visibleLength &&
   (this._hasDataChangedSinceEndReached ||
     this._scrollMetrics.contentLength !== this._sentEndForContentLength)
 ) {
   // Only call onEndReached once for a given dataset + content length.
   this._hasDataChangedSinceEndReached = false;
   this._sentEndForContentLength = this._scrollMetrics.contentLength;
   onEndReached({distanceFromEnd});
 }
}

console result: this.state.last = 0; getItemCount(data) = 2;
this.state.last !== getItemCount(data) -1 , so can not trigger onEndReached!

But for FlatList, it has reach end!

[JerakRus]

I have inverted flatlist in my chat app , and now it worked very strange... onEndReached and refreshing work in 1 direction! React-native version 0.60.3

[e1016]

can we see your JSX?

[luoyushouchai]

@e1016
This is render function!
I can not reproduce using FlatList with a simple demo.

render() {
 const { selectable, dataList, onEndReached } = this.props;
 const extraData = Object.assign({}, { selectable });
 return (
   <React.Fragment>
     <FlatList
       testID='result-list'
       ref={ref => this.list = ref}
       keyExtractor={this._keyExtractor}
       data={dataList}
       extraData={extraData}
       onScroll={this._handleOnScroll}
       scrollEventThrottle={0}
       renderItem={this._renderItem}
       onViewableItemsChanged={this._onViewableItemsChanged}
       style={styles.list}
       inverted
       removeClippedSubviews
       initialNumToRender={30}
       onScrollToIndexFailed={this.onScrollToIndexFailed}
       onEndReached={onEndReached}
       onEndReachedThreshold={0.5}
       maxToRenderPerBatch={20}
       windowSize={20}
       ListFooterComponent={this.renderFooter}
       ListHeaderComponent={this.renderHeader}
       {...scrollPersistTaps}
       onScrollBeginDrag={this.handleScrollBeginDrag}
       scrollsToTop={false}
       viewabilityConfig={VIEW_ABLITY_CONFIG}
       refreshControl={this._renderRefreshControl()}
     />
   </React.Fragment>
 );
}

[JerakRus]

may be you need use 'this.onEndReached' ? )

[JerakRus]

My list is simpler

 <FlatList style={{backgroundColor: redesignColors.backgroundCommonColor, flex: 1}}
                          data={this.props.messages}
                          renderItem={this.messageItem}
                          inverted
                          keyExtractor={this._keyExtractor}
                          onRefresh={this.onRefresh}
                          refreshing={this.props.pendingChat}
                          onEndReached={this.nextPage}
                          onEndReachedThreshold={0.3}
                />

But it does not work correctly. The onEndReach and refresh functions work in the same direction when I try to move to the end of the list (up)

[luoyushouchai]

may be you need use 'this.onEndReached' ? )

I pass onEndReached by props. The func onEndReached sometimes can not trigger!

[JerakRus]

oh sorry, I did not look carefully

[ssancheza227]

Hi my friends, this is a bug, i have react native 0.59.8, i have many options but it's intermittent, sometimes work and others not. if we update the version react native, maybe some library with cocoapods not work's, but I can not return one to an old version either :/. @gaearon

[JerakRus]

@ssancheza227
In my case, I had to remove the refresh props and use the component without it. But in the dialogue it is not very critical, so for now I have left it that way. And onEndReached in 0.60.3 works fine

[ssancheza227]

@JerakRus @luoyushouchai @e1016 Hi guys :) good news, well the solution was envolved flatList into View and set height (const {height} = Dimensions.get('window');) to view, percent not work:

<View style={{flex: 1, height: height}}>
   <FlatList
       data={data}
       keyExtractor={(item, index) => index.toString()}
       onEndReached={this.handleLoadMore} 
       onEndReachedThreshold={0.01}
       ListFooterComponent={() => this.state.loading ? <ActivityIndicator/> : null}
       renderItem={({item, index}) => this.renderTransaction(item, index)}
   />
</View>

And if this not scroll envolved into ScrollView: ScrollView -> View (height) -> FlatList

[wpeng]

I met a similar issue. onEndReached not called after a momentum scroll. In my case ,this.state.last is 69 while itemCount is 79

[ifsnow]

https://github.com/ifsnow/react-native-infinite-flatlist-patch

I made a patch library to help with this issue. I hope this helps.