React-native: onEndReached called many many times

[Liqiankun]

Environment

React Native Environment Info:
    System:
      OS: macOS 10.14.1
      CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
      Memory: 32.12 MB / 8.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.11.1 - /usr/local/bin/node
      Yarn: yarn install v0.22.0
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 41.76s. - /usr/local/bin/yarn
      npm: 6.1.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 26, 27, 28
        Build Tools: 27.0.3, 28.0.3
    IDEs:
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.1 => 16.6.1
      react-native: 0.57.5 => 0.57.5
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

Once you scroll Flatlist to the bottom, call onEndReached, then props changed, it call once again!

[hramos]

Hi there, can you please make sure to fill out the entire template? Specifically, we'd like to see a list of steps to reproduce.

[Liqiankun]

Set Flatlist style height '100%' solved this issue!

[Prozhou]

i don't think this problem have been resolved. when put sectionlist in scrollview still have problem. onEndReached be call again and again.

[yibingxiong]

oh, my god. I'm too hard~

[priyanka931]

You can write the code for fetching data in onMomentumScrollEnd rather than onEndReached, like this:

onMomentumScrollEnd={() => { // fetchData}}

It might not be written as the available prop in the react native documentation, but if you will see the source code for FlatList, it uses Virtualized List which in return has the mentioned prop available.

[joshuapinter]

You can write the code for fetching data in onMomentumScrollEnd rather than onEndReached, like this:

onMomentumScrollEnd={() => this.props.onEndReached()}

It might not be written as the available prop in the react native documentation, but if you will see the source code for FlatList, it uses Virtualized List which in return has the mentioned prop available.

I swapped onEndReached prop for this and it worked great! What does this do differently that onEndReached doesn't do?

[trickeyd]

@joshuapinter - It calls every time the momentum stops. You would be best using onEndReached to set a boolean true, and then using onMomentumScrollEnd based on that.

onEndReached={() => this.callOnScrollEnd = true}
onMomentumScrollEnd={() => {
  this.callOnScrollEnd && this.props.onEndReached()
  this.callOnScrollEnd = false
}}

[priyanka931]

Thank you @trickeyd for the lovely solution.
@joshuapinter - onMomentumScrollEnd gets triggered on every end of the movement we create on the list through interaction. Whereas onEndreached works completely on the calculations made when last element reaches the screen end.

@trickeyd - in my case, onMomentumScrollEnd is getting called before the onEndreached, so setting this.callOnScrollEnd = false doesn't make any change as just after onMomentumScrollEnd gets called, onEndreached gets called setting it again to true.

plus i am getting one more issue while following our solution, which is, onEndreached & onMomentumScrollEnd are also getting called when i swipe down my list from the start/initial item of the list. due to which it fetched next set of data even on this action.

[trickeyd]

@trickeyd - in my case, onMomentumScrollEnd is getting called before the onEndreached, so setting this.callOnScrollEnd = false doesn't make any change as just after onMomentumScrollEnd gets called, onEndreached gets called setting it again to true.

Really? Hmmm - I haven't encountered that - what a buggy component.

Well you could invert it by setting the boolean in onMomentumScrollStart, and then make the call in onEndReached instead:

onEndReached={() => {
  this.callOnEndReached && this.props.onEndReached()
  this.callOnEndReached = false
}}
onMomentumScrollStart={ () => this.callOnEndReached = true }