React-native: onEndReached callback trigger twice

[tafelito]

• [X] I have reviewed the documentation
• [X] I have searched existing issues
• [X] I am using the latest React Native version

FlatList onEndReached callback trigger twice sometimes or even 4 times.

Environment

Environment:
OS: macOS High Sierra 10.13.4
Node: 8.9.4
Yarn: 1.5.1
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.3 Build version 9E145
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.54.4 => 0.54.4

Steps to Reproduce

I'm using a FlatList with inverted={true}. I don't have exactly steps to reproduce it as it happens randomly. I saw a bunch of other issues having the same problem but none of them provided a solution. #14015 did not work for me. If I set the onEndReachedThreshold to 0.8 it doesn't happen all the time as opposed as using the default value of 0.5 that makes it happen constantly. I don't think a re-render is causing this either as it's only running once as you can see from the logs.

Expected Behavior

onEndReached to be called once.

Actual Behavior

this is the render method

render() {
    console.log("render messages", this.props.messages);
    return (
      <FlatList
        inverted
        data={this.props.messages}
        keyExtractor={this.keyExtractor}
        renderItem={this.renderItem}
        onEndReached={info => {
          console.log("onEndReached", info);
        }}
      />
    );
  }

And this is the output

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

Thank you for your contributions.

[tafelito]

same thing happens with latest version

[j0hnhan]

I have the same issue with react-native version 0.51.0, basically onEndReached triggered twice with different distanceFromEnd value but same state and props.

[nezaidu]

same thing

[chunghalu]

This is my solution: https://github.com/facebook/react-native/issues/14015#issuecomment-389585034

[z-zp]

onEndReached = () => {
    let time = (new Date()).getTime() - this.time
    if (time < 500) return
    this.time = (new Date()).getTime()
        //   TODO
  }

[DoGooRi]

same too.
so i used debounce : https://github.com/facebook/react-native/issues/14015#issuecomment-402874026

[xuqingkuang]

onEndReached = () => { let time = (new Date()).getTime() - this.time if (time < 500) return this.time = (new Date()).getTime() // TODO }

shit ... must be larger than 500ms, less delay won't work.

====

btw: if this.time initialized in componentDidMount() after data fetched at first time, onEndReached won't trigger forever.

[brunnohofmann]

Im facing the same problem, and my the following versions:
"react": "16.8.3",
"react-native": "0.59.1",

[hjaintech]

Is there any update on when this issue will be fixed ?

[hellpirat]

Same here

[brunnohofmann]

I saw that you cannot put FlatList inside a ScrolView.
So I did put my flatlist in a separated screen while this problem still happens and now its working. But

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.