onEndReached not getting called

[moinqureshi-ss]

when there is not enough content to cover the whole screen then onEndReached is not getting fired unlike flatlist where onEndReached gets called if content is not covering whole screen. onEndReached gets fired only after user scrolls. i tried passing onEndReachedThreshold also.

To Reproduce
keep content small that does not cover whole screen on first page of pagination

Expected behavior
onEndReached should get fired even if content is not covering whole screen

Smartphone (please complete the following information):
both android and iOS

[Vin-Xi]

Can you please check if your issue is solved by using this fix.
#46 (comment)

[moinqureshi-ss]

@Vin-Xi sadly it did not work. my issue is not when it is very close to end. my issue occurs when we have only enough content to fill like half of the screen. in this case flatlist would still fire onEndReached but here it is not happening

[hyochan]

Could you kindly share a reproducible example or contribute to our example project for the reproduction?

[moinqureshi-ss]

@hyochan i have created this https://snack.expo.dev/4DEtapwyv expo snack where i have added both flatlist and masonryList(this is commented). when you run, it will fire onEndReached and show alert for flatlist but when you try masonryList code it will not fire onEndReached

[hyochan]

I am confused if this is actually needed.

Looking into the issue facebook/react-native#16067, it looks like this isn't expected.
What do you think about the issue above @moinqureshi-ss ?

[moinqureshi-ss]

yeah onEndReached should not be called when flatlist is rendered what i generally do is use isLoading flag inside onEndReached so it fires the api only if !isLoading. currently for masonry-list onEndReached is fired only when content is very close to the screen end, so if let say i am doing pagination for an api with 4 items per page api fires first time but those 4 item don't cover the whole screen it cover only half screen then to fire the api for second page i have to scroll only after that onEndReached is fired.

[hyochan]

yeah onEndReached should not be called when flatlist is rendered what i generally do is use isLoading flag inside onEndReached so it fires the api only if !isLoading. currently for masonry-list onEndReached is fired only when content is very close to the screen end, so if let say i am doing pagination for an api with 4 items per page api fires first time but those 4 item don't cover the whole screen it cover only half screen then to fire the api for second page i have to scroll only after that onEndReached is fired.

So you want to load the API again after the 4 items and the MasonryList is not closeToBottom. What if you check it conditionally to fetch once again if the sum of visible items' heights is smaller than the MasonryList height?

I am not sure if this feature should be included in MasonryList by the way.

[satyam16998]

@hyochan onEndReached is not called at all in any condition. Please check.

[hyochan]

@satyam16998 Could you kindly try the example project and check out the symptoms? The last time I tested on example, it worked well.

[satyam16998]

@hyochan I have tried and it's not working. Earlier it was working.

I guess when we have data on which masonry list is acting like a flat list then the onEndReached is not working properly in this case.
Please have a look.Thanks!

[hyochan]

@satyam16998 What do you mean by you have data on which masonry list is acting like a flat list?
Also, I've just tested this in the MasonryExample project, which is working as expected. Please check the below clip.

Screen.Recording.2023-01-24.at.10.50.47.PM.mov

[satyam16998]

@hyochan I mean when we have the same height of both columns then onEndReached is not called.
For example, just take a single object and repeat the same object multiple times in an array and then check.

[satyam16998]

@hyochan I mean when we have the same height of both columns then onEndReached is not called. For example, just take a single object and repeat the same object multiple times in an array and then check.

@hyochan ??