onEndReached called on initial render

[Samide47]

Current behavior

<FlashList
data={products}
keyExtractor={(item) => item._id}
estimatedItemSize={200}
numColumns={2}
showsVerticalScrollIndicator={false}
renderItem={(item) => (

)}
ListEmptyComponent={}
onEndReached={() => {
console.log("on end reach");
handleStartLoadingMore() && loadMore();
}}
onEndReachedThreshold={0.25}
ListFooterComponent={isLoading && loading more...}
/>

Platform:

• [ x] iOS
• [ x] Android

Environment

"@shopify/flash-list": "^1.6.2",
"react": "18.2.0",
"react-native": "0.72.5",

[elencho]

+1

[jianxinzhoutiti]

+1

[derrysukrie]

+1

[csillaj]

+1

[zavbala]

Yeah, run twice

[LabLamb]

Mine ran non-stop

[naqvitalha]

If the content doesn't fill the screen on initial render then the callback will fire. If it's being called incorrectly then most like the estimatedItemSize value is incorrect.

[natemartins]

If the content doesn't fill the screen on initial render then the callback will fire. If it's being called incorrectly then most like the estimatedItemSize value is incorrect.

This issue persists. In my case, the content fills the screen on initial render. Note that I have a list over 30 items.

[purplereborn]

const [onEnd, setOnEnd] = useState<boolean>(true);

onMomentumScrollBegin={() => setOnEnd(false)}
onEndReached={() => {
          if (!onEnd) {
            onEndReached();
          }
 }}

[jothamc]

Following the guidelines on estimatedItemSize helped. I had initially thought it meant how many items would be displayed on each render, but fixing it appropriately solved the problem.

If the content doesn't fill the screen on initial render then the callback will fire. If it's being called incorrectly then most like the estimatedItemSize value is incorrect.

[natemartins]

Following the guidelines on estimatedItemSize helped. I had initially thought it meant how many items would be displayed on each render, but fixing it appropriately solved the problem.

If the content doesn't fill the screen on initial render then the callback will fire. If it's being called incorrectly then most like the estimatedItemSize value is incorrect.

@jothamc Could you explain further what exactly helped you? Thanks

[Apurba-Kumar-Ghosh]

@naqvitalha I have added a correct estimatedItemSize and also checks are there for data not to be empty but still onEndReached is called on render before end of list is reached.
Has anyone found a workaround for this?

[jothamc]

Following the guidelines on estimatedItemSize helped. I had initially thought it meant how many items would be displayed on each render, but fixing it appropriately solved the problem.

If the content doesn't fill the screen on initial render then the callback will fire. If it's being called incorrectly then most like the estimatedItemSize value is incorrect.

@jothamc Could you explain further what exactly helped you? Thanks

I had thought that estimatedItemSize was the amount of items in a list (I'm not sure why I thought that, maybe the name of the prop), but when I read properly that it's meant to be the value of the height of one item, it helped me calculate the right value for my app.

[jothamc]

@naqvitalha I have added a correct estimatedItemSize and also checks are there for data not to be empty but still onEndReached is called on render before end of list is reached. Has anyone found a workaround for this?

Does the above help too?