How do I detect when FlatList has rendered all items and actually scrolled to bottom?

Question

I'm passing a very long array into a FlatList.

FlatList dynamically loads more content as you reach the bottom.

I have a ListFooterComponent that indicates whether the user is about to see more data.

How can I know when the FlatList has truly rendered all items and therefore has reached actual bottom of scroll? Then this footer component will show something like "You're at the end of the list!"

Answer 1

FlatList component has a callback function that is called when the list reaches the end or the specified threshold.

<FlatList
    ...
   onEndReached={() => {console.log('list ended');}}
/>

FlatList - onEndReached