react-native: FlatList onEndReached can not be called!

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!

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 5
Comments: 36 (2 by maintainers)

Most upvoted comments

@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

+34

ssancheza227 on Jul 19, 2019

just add onEndReachedThreshold={0.3} or number between [0,1] worked for me. usage for message list

alirezapiran7 on Apr 10, 2022

Guys please make sure FaltList is not inside a scrollview or maybe has auto a width parent!

erald14 on Apr 12, 2020

0.61.3 still happening …

ggdegreat on Dec 7, 2019

   <FlatList
          style={{ width: '100%' }}
          keyExtractor={(item, index) => index.toString()}
          data={this.state.serverData}

          onEndReached={() => this.onLoadMoreData()}
          onEndReachedThreshold={.5}
          
          renderItem={({ item, index }) => (
            this.renderFeedItem(item, index)
          )}

          ItemSeparatorComponent={() => <View style={styles.separator} />}
          ListHeaderComponent = {this.renderHeader()}
          ListFooterComponent={this.renderFooter()}
        />

onLoadMoreData(){

this.setState({isLoadMoreData : true});
this.page = this.page + 1;

this.fetchData(this.page).then(() => {
  this.setState({isLoadMoreData : false});
})

}; I worked on React Native 0.61 and onEndReached function works good.

mrdeanbw on Jan 3, 2020

@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

This worked for me…!! 💯

SameeraMadushan on Jan 7, 2021

With decimal values for onEndReachedThreshold the callback, onEndReached doesn’t get called until the end of the list. For example, 0.5 calls the callback at the end not halfway. But when I use whole numbers, 5, let’s say, the callback gets run halfway. Where the larger the number, the earlier the call and the smaller the number the later it gets called. I’m using SectionList so maybe there’s a difference? I really would not think there’d be a difference. Hope this helps.

azanli on Sep 3, 2020

just add onEndReachedThreshold={0.3} or number between [0,1] worked for me. usage for message list

OR onEndReachedThreshold={0.5}

nikola166 on Apr 27, 2024

Guys please make sure FaltList is not inside a scrollview or maybe has auto a width parent!

true

kuldip-trentium on Mar 13, 2024

https://github.com/ifsnow/react-native-infinite-flatlist-patch/tree/master/patches does not support rn versions > 0.68. Do you still experience this issue? Should I work on this? Thanks

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

fabOnReact on Jan 25, 2024

<ScrollView style={{ flex: 1 }} onScrollBeginDrag={() => { //用户触摸过屏幕后 if (!isEndReached) { isEndReached = true; setIsEndReached(isEndReached); onEndReached(); } }} refreshControl={ <RefreshControl refreshing={refreshing} enabled={true} title={'松手刷新'} onRefresh={refresPage} /> } > <View></View> <FlatList data={listState} style={{ flex: 1 }} renderItem={({ item, index }) => {}} ListFooterComponent={ListFooterComponent()} ListEmptyComponent={ListEmptyComponent()} keyExtractor={({ index }) => {key_${index}}} onEndReached={onEndReached} onEndReachedThreshold={0.01} /> </ScrollView>

vobear on Jun 30, 2021

same problem. RN 0.62.2.

eo-sdev on Jun 28, 2020

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

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

ifsnow on Sep 20, 2019