React-native: onEndReached of FlatList only called once

Created on 22 Jul 2017  路  6Comments  路  Source: facebook/react-native

Is this a bug report?

Yes

Environment

  1. react-native -v:
    react-native-cli: 1.0.0
    react-native: 0.46.1
  2. node -v:
    v6.3.1
  3. npm -v:
    3.10.3
  4. yarn --version:

Then, specify:

  • Target Platform:
    iOS & Android
  • Development Operating System:
    Mac OS
  • Build tools:
    both Xcode and Android Studio

Steps to Reproduce

(Write your steps here:)
code related to onEndReached here:

onEndReached={this.handleEndReached.bind(this)}
onEndReachedThreshold={0.3}

and the list has 100 items.

  1. pull down the list to index of 85 , onEndReached called as expect
  2. pull up to index of 50,
  3. pull down the list to index of 85 again

Expected Behavior

onEndReached should be called again after step 3.

Actual Behavior

onEndReached not called.

i wonder if i need to re-render the component to reset some status related to onEndReached,
so i did something in my handleEndReached

handleEndReached() {
    console.log("mytest onEndReached");
  //   setTimeout(
  //     ()=>{this.setState({
  //       data: this.state.data.concat(this.getOldData()),
  //     })},
  //     2000);
    setTimeout(
      ()=>{this.setState({
        data: this.state.data,
      })},
      2000);
  }

but noting changed. It sounds like that the onEndReached would be called again only if the length of list had been changed. if I uncomment the above code and onEndReached would be called.

My use case is that FlatList would try to fetch some more data when user scroll to the bottom of the list. But you cannot count on that the fetch succeeds or more data fetched for every try. If it failed one time, onEndReached never triggered again. This is the point blocking me.

(Write what happened. Add screenshots!)

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

Here is the link to Expo

https://snack.expo.io/BJhIqUeI-

Stale

Most helpful comment

I suppose if there is no props or state change after calling onEndReachd, it won't be fired again.

All 6 comments

I suppose if there is no props or state change after calling onEndReachd, it won't be fired again.

Thanks @codingrhythm. I also stuck this point but now It works for me after state change.
As per documentation, I missed this point:
onEndReached
Called once when the scroll position gets within onEndReachedThreshold of the rendered content.

But in the android emulator this is called frequently.

Wow @codingrhythm thanks for that, that was exactly why my onEndReached was not triggering. Is there anyway to work around this? Other then introducing a state (or prop) change?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

This should not be closed yet. It is a must to mention in the docs that onEndReached does not trigger again until/unless there is a prop or state change. It was a huge confusing factor to and without @codingrhythm I would have never got it.

So all we need here is an update to the docs, which I don't know how to do. For the sake of others, it would be nice if someone with the time and possibly Facebook's excellent pay can do it. Seems like a one liner.

But in the android emulator this is called frequently.

Same to me, always fires this function on Android, but called only once on iOS.

Was this page helpful?
0 / 5 - 0 ratings