Prevent onEndReached from getting called multiple times

[richardgirges]

This is a bit of a hack that fixes #13

If you had something different in mind for this fix, maybe we can use this as a starting point to figuring out a more proper solution.

We're depending on redux actions to handle our version of setState({ loading: true }). For whatever reason, the two column masonry layout fires both events too closely together for our the redux action to capture it in time.

P.S. this PR renames and repurposes the unused this._endsReached class property.

[janicduplessis]

@richardgirges Hey thanks for the PR, sorry about the delay.

I think a better solution is to clear the _endReached flag in the onLayout of the content view. If I remember correctly this is what FlatList does to handle it. So the end reached event will not trigger again until the layout changed (usually due to adding / removing items in the list).

[janicduplessis]

Maybe setting it here would work.

[richardgirges]

@janicduplessis sounds good! I'll give this a go in the next couple days and update the PR :)

[naicha-gg]

@richardgirges @janicduplessis I test this with move this._endReached = false to _onContentSizeChange, the behavior is good. There is a concern that maybe the consumer just toast a message when onEndReached, then the onContentSizeChange will not call, this._endReached = false will not call too.

[richardgirges]

Closing this in favor of #24 !

[mattychen]

@richardgirges, @janicduplessis
Often, onEndReached may be used for pagination.

To incorporate async callbacks, doing this instead of _onContentSizeChanges made more sense:
This might help your situation @zhiquan-yu, as it only relies on the completion of the callback.

  _onEndReached = event => {
    if (this._endReached) {
      return;
    }
    this._endReached = true;
    if (this.props.onEndReached) {
      /* 
      onEndReached fn is not guarenteed to be async,
      so call Promise.resolve to resolve any potential fn
      This is necessary to preserve async flow and prevent double calls 
      */
      Promise.resolve(this.props.onEndReached(event)).then(() => {
        this._endReached = false;
      });
    }
  };