Search code examples
javascriptiosreact-nativereact-native-flatlistreact-async

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

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.

Solution

  • You can use onViewableItemsChanged, for example:

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

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

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