I have a react-native SectionList that contains multiple FlatLists in the view. When a user touches one of the elements in the bottom FlatList, some of the FlatLists above will load new data causing the user's current view to seem be pushed up. In other words, the user's y-position remains the same but the content that was previously in view now has a greater y-position.
How can I keep the user's y-position in sync with the elements they had in view before the elements in the other FlatLists above were added?
store the position in cookies and after that use the cookie to scroll the page to exact position .
By default you can set the value of scrollPosition is 0 . Here I have used the sessionStorage to maintain the scroll position for demo purpose. You can also use the context API or redux store to manage it.
The trick is to throw the scroll position into localStorage right before the page is exited, and when loaded, grab that value and scroll to it.
Now, whenever we want to scroll to a specific location we can use scrollTo which is a property of ScrollView. In this, we have to pass the X and Y location to scroll and animated (True/False).
It is hard to answer without any code example.
Seems scrollToLocation
method with animated: false
after data was changed should do the trick.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With