Tracking how far a user has scrolled in a React Native flatlist

Question

I'm working on an IOS app in React Native right now, and we present our content feed to the user as a flatlist that they can scroll through. I need to keep track of how far they have scrolled into that flatlist so that I know which posts they have actually viewed in case they close the app. I'm looking at using React Asynchronous storage for this, but I was wondering how I can actually implement that into my flatlist.

Answer 1

You can use onViewableItemsChanged, for example:

<FlatList
    onViewableItemsChanged={({ changed, viewableItems }) => {

    }} 
    viewabilityConfig={{
       itemVisiblePercentThreshold: 50
    }}
/>

Doc: https://reactnative.dev/docs/flatlist#onviewableitemschanged