what onEndReachedThreshold really means in react-native

Question

from documentation:

onEndReachedThreshold number

Threshold in pixels (virtual, not physical) for calling onEndReached. so I just wanted to know what it means, is it threshold from the top, or is it threshold from the bottom.

From the top? - if I set a value of onEndReachedThreshold ={10}, is my onEndReached called as soon as I scrolled to 10 pixel, or something else.

From the bottom? - if I set value of onEndReachedThreshold ={listview height -10}, will my onEndReached called as soon as I scrolled to 10 pixel, or something else.

Satrap

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

Lu

so if I have to call onEndReached as soon as someone scroll by 10 pixel from top then I have to set onEndReachedThreshold ={lenght of listview -10}, is I am right? – Satrap

@ManjeetSingh No you would have to set it to onEndReachedThreshold ={10} – Lu

@ManjeetSingh I would not suggest relying to the relation from top. This would easily end in an endless loop – Lu

@ManjeetSingh you should set this answer as the right answer, 10 means 10px from the bottom and so on – Formaldehyde

@fareednamrouti onEndReachedThreshold never behave as expected for me, still this answer seems to clear what documentation wanna convey.Accepted – Satrap

I got problem when using onEndReachedThreshold that invoke unexpected behaviour of the onReached function. Refer to this issues github.com/facebook/react-native/issues/12827, Im using number between 0 to 1, then my issue solved – Busyness

This answer is correct because the poster is asking about ListView. But for anyone looking for the answer to FlatList's definition, see jhm's answer. – Transnational

I use FlatList and set 0.1 or 0.9. The function onEndReach callback anytime without stop. – Nosography

Answer 2

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

Bedad

Not "the current dataset" but "half the visible length of the list". So this the distance will be different depending the "visible" height of the list. – Omission

if length of list is 20 and length of visible elements is 6 then how its work for 0.5 ? and how can i achieve like onEndReached will call when scroll to 18 elements ? – Fosque

@AshokDevatwal - If you have a length of 20 and you set the limit to 0.5, it will be called when you scroll to item nr 10. If you want to do it at 18, set it to 18/20=0.9 – Bedad

@Bedad That's incorrect. "a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list." Is the key part. If you want to trigger it at 18 then setting onEndReachedThreadhold to 0.9 would mean that 20 - ( 0.9 * 6 ) = 14.6. It would trigger a onEndReached roughly when item 14 or 15 is showing. To trigger it at 18, the math is: 20 - 18 = 2. 2 / 6 = 0.333. Set it to 0.333 and onEndReached will be called around item 18 (i.e. when about 2 items are below the visible line). – Hobard

Why you divided in six here @JoshuaPinter? – Rundell

@Rundell Because 6 is the number of visible elements on the screen. This is mad confusing (I had to re-read my own comment a few times to understand it again) so don't feel bad about not getting it right away. – Hobard

I appreciate your answer anyways. Thanks. – Rundell

Answer 3

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.

Vowelize

This is the correct answer for 2020, I don't know why the docs is not mention that! – Rondelet

This is what i was looking for, for some reason the documentation did not sink in for me. This answer did. Thanks. – Carruthers

In 2021, this is still confusing, but now makes sense to me. I don't understand why the doc does not mention the range of this value. By reading the doc, everyone thinks that this should be a value between 0 and 1, which is not true! – Miletus

I think you mean two full list length away not screen – Kristofor

Finally found the answer! – Depository

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.

Ballew

hi, visibleLength here is the height of your list element, do you mean the visibleLength is the height of a single item of list? or the height the FlatList element? what is the ` list element container ` ? do you mean the one that wrapped a item? for example <View><Text>hello</Text><</View> – Didst

@VidyVideni, do you found answer of your question? I need that too – Blodgett

Answer 5

onEndReached : Called once when the scroll position gets within onEndReachedThreshold of the rendered content.

onEndReachedThreshold: 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.

Ottoman