question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

onEndReached of FlatList only called once

See original GitHub issue

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-

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:6

github_iconTop GitHub Comments

12reactions
codingrhythmcommented, Jul 23, 2017

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

3reactions
Noitidartcommented, Dec 4, 2017

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

FlatList onEndReached being called multiple times [duplicate]
This solution worked for me. Add onMomentumScrollBegin and modify onEndReached in FlatList Component. <FlatList style = { .
Read more >
FlatList - React Native
Called once when the scroll position gets within onEndReachedThreshold of the rendered content. Type. function. onEndReachedThreshold ​. How far ...
Read more >
react-native-bidirectional-infinite-scroll - npm
FlatList by react-native only allows infinite scroll in one direction (using onEndReached ). This package adds capability on top of FlatList ...
Read more >
FlatList onEndReached Called On Load [iOS] - Expo Snack
Try this project on your phone! Use Expo's online editor to make changes and save your own copy.
Read more >
Unable to render data to ReactNative FlatList on Scroll down ...
I am using FlatList's onEndReached prop to get new items on scroll. ... basically it will only run once, in order for to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found