We are using a Section List to display a large amount of data, in each each item is ordered by date. The top of the list displays data in the past, whereas the bottom of the list displays data in the future. Generally speaking, the user will usually (if not always) be viewing data around the centre of the list.
I'm currently dealing with a problem when adding items to the list, or otherwise removing items from the list. If these items are added/removed above the viewport where the user is looking (e.g. towards the top of the list) this causes the size of the section list to change and pushes the items the user is currently looking at down or up depending on whether items are added or removed. So all of a sudden, the user is looking at completely different data.
I've thought of a way to tackle this problem:
- Track the vertical position of the list while the user scrolls (using
event.nativeEvent.contentOffset.yin theonScrollmethod). - Calculate the size of the section list.
- Store the previous size of the section list.
- When the previous size is not the same as the current size: this indicates items have been added or removed. Determine if the list has grown or shrunk and calculate the difference in pixels to scroll the user to the location they were previously looking at.
However, the Section List API does not provide a method to scroll to a specific position using just pixels. I only see a scrollToLocation method, which takes the section list index, item index and allows an offset to be specified to scroll towards.
In principle, I could track the section and item index the user is looking at, and also calculate and track the difference between the section/item location and the Y position of the viewport to get an offset as well to make the scroll back to the previous location even more precise.
I was wondering if anyone else has dealt with the same problem and if there are any easier ways to tackle this problem.
Any suggestions would be appreciated, thank you.