what onEndReachedThreshold really means in react-native

Question

from documentation:

onEndReachedThreshold number

Threshold in pixels (virtual, not physical) for calling onEndReached. so I just w

Answer 1

The documentation is always the best way to go:

onEndReached function
Called when all rows have been rendered and the list has been scrolled to within onEndReachedThreshold of the bottom. The native scroll event is provided.

onEndReachedThreshold number
Threshold in pixels (virtual, not physical) for calling onEndReached.

So as I see it: if you do onEndReachedThreshold ={10} it calls onEndReached if you scrolled to 10 pixels from the bottom

Answer 2

In 2020, onEndReachedThreshold represents the number of screen lengths you should be from the bottom before it fires the event.

I use onEndReachedThreshold={2} to fire onEndReached when I'm two full screen lengths away.

Answer 3

For anyone using FlatList INSTEAD of ListView, note that the parameter units have changed.

For ListView it was in pixels from the bottom, but according to docs for FlatList, it is instead units of length from the bottom in list items.

How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.

Thus, if you want the list to update when the user is halfway down the current dataset, set the value to 0.5

Answer 4

This is how it works depending on the source code:

const {contentLength, visibleLength, offset} = this._scrollMetrics;
const distanceFromEnd = contentLength - visibleLength - offset;
if (
  onEndReached &&
  this.state.last === getItemCount(data) - 1 &&
  distanceFromEnd < onEndReachedThreshold * visibleLength &&
  (this._hasDataChangedSinceEndReached ||
    this._scrollMetrics.contentLength !== this._sentEndForContentLength)
) {
  // Only call onEndReached once for a given dataset + content length.
  this._hasDataChangedSinceEndReached = false;
  this._sentEndForContentLength = this._scrollMetrics.contentLength;
  onEndReached({distanceFromEnd});
}

So, first of all it chek for onEndReached callback if exists, after that it check if the last element of data is rendered(not necessarily visible), and only then it check if you scroll enough to the bottom of the list.

visibleLength here is the height of your list element (if horizontal isn't set), and contentLength is the height of your list element container multiply number of elements in the data. As you can see onEndReachedThreshold is reverce number of "visible screens" (i.e heights of your list element) you should scroll till your onEndReached callback will fire - bigger onEndReachedThreshold, less you should scroll. With the value onEndReachedThreshold = 0.5, your callback will fire almost at the "end" of the list. But remember that it will not fire till the last element is rendered, no matter what value you will set.