I am writing an iOS app (just iOS for now, so I don't need to consider other platforms at the moment) in React Native.

I have a screen in my app that is a ScrollView of items that was retrieved from a server and I'd like to mark each item as "read" as it passes out of the top of the screen for the first time (i.e. mark as read on scroll type functionality). Once an item has been marked as read there you can mark it as unread but through other actions not related to scrolling.

I cannot for the life of me figure out a good way to do this. Ideally the items themselves would be able to detect whether or not they have disappeared off the top of the screen and just update the server that way, but I can't seem to find if that's possible (I easily could have missed something in the docs but I don't think so).

At the moment my solution is calculate how far down the ScrollView is, divide that by the height of each item (which is static for now... I don't know what I'll do when it becomes not static, if ever), and that's how many items I need to mark as read. At that point I do logic to determine if the local item has already been marked as read and if not I update the local item and send an update to the server.

A previous solution was to just update the server on each item, but that seemed like it got out of hand too quickly because you can scroll pretty fast and each item needs to be marked as read accurately.

The server api calls are idempotent, so sending multiple updates for the same item, while not great, is also not the end of the world. Also, I am running this in the emulator on my Mac and I haven't yet tested it with a real device (I have one, but I am still in kind of early stages of development).

I am happy to provide any other information needed!

CodePudding user response：

The onViewableItemsChanged prop will return a list of items who's visibility has changed. Keep in mind that this visibility is decided by the viewabilityConfig prop

https://reactnative.dev/docs/sectionlist#onviewableitemschanged