[FlatList] onEndReached triggered 2 times

[fengshanjian]

<FlatList
ref={(flatList)=>this._flatList = flatList}
ListHeaderComponent={this._header}
ListFooterComponent={this._footer}
ItemSeparatorComponent={this._separator}
renderItem={this._renderItem}
getItemLayout={(data,index)=>({length: ITEM_HEIGHT, offset: (ITEM_HEIGHT+2) * index, index})}
onEndReachedThreshold={0.5}
onEndReached={(info)=>{
console.log(JSON.stringify(info));
}}
data={data}
/>

When the scroll speed is fast enough，onEndReached triggered 2 times or more times

Is there any solution?

[parkerproject]

mine doesn't even trigger.

[fengshanjian]

@parkerproject
My paltform is ios 10.3,mac osx 10.12.5

[benderlidze]

@fengshanjian
Yep, got the same - fires 2 times. But if you are using redux or even state - you can use something like this

onEndReached={(info)=>{
if (this.state.loading===false){
console.log(JSON.stringify(info));
}
}}

[JonoH]

Same issue my side. Seems to be a bug in the ScrollView bouncing feature on iOS (when you over scroll on iOS the ScrollView scrolls past the content and bounces back to the end of the content by default).

Setting bounces={false} solved onEndReached being called twice for me. Still not an ideal solution though as you lose that nice smooth/fluid feel in the UX.

[hramos]

Hey, thanks for reporting this issue!

It looks like your description is missing some necessary information. Can you please add all the details specified in the template? This is necessary for people to be able to understand and reproduce the issue being reported.

[grin]

I'm definitely seeing the second onEndReached call triggered by the bouncing effect on iOS. Adding bounces={false} to the FlatList fixed it for me. I think ideally, RN should not call onEndReached while the list is in the "bouncing" state. Not sure how doable is this though.

[grin]

OK, here is my solution for how to avoid the second onEndReached call with the bouncing effect enabled on iOS:

1. Add onMomentumScrollBegin prop to your FlatList declaration.

        <FlatList
          data={this.props.data}
          onEndReached={...}
          onEndReachedThreshold={0.5}
          ...
          onMomentumScrollBegin={() => { this.onEndReachedCalledDuringMomentum = false; }}
        />

2. Modify your onEndReached callback to trigger data fetching only once per momentum.

  onEndReached = () => {
    if (!this.onEndReachedCalledDuringMomentum) {
      this.props.fetchData();
      this.onEndReachedCalledDuringMomentum = true;
    }
  };

Tested with RN 0.44.0.

[gonglong]

hi @grin can you pls refer me some document about the function onMomentumScrollBegin? i cannot find any on http://facebook.github.io/react-native/releases/0.46/docs/flatlist.html

[vomchik]

@gonglong you can find information about props here https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollView/ScrollView.js#L246

[vomchik]

FlatList is just wrapper of the ScrollView

[hramos]

Hey, thanks for reporting this issue!

It looks like your description is missing some necessary information, or the list of reproduction steps is not complete. Can you please add all the details specified in the template? This is necessary for people to be able to understand and reproduce the issue being reported.

I am going to close this, but feel free to open a new issue with the additional information provided. Thanks!