Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to maintain position in scrollable view when elements load above the current position?

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?

like image 696
Tyler Avatar asked Mar 09 '18 22:03

Tyler


People also ask

How can I retain the scroll position of a scrollable area when pressing back button?

store the position in cookies and after that use the cookie to scroll the page to exact position .

How do you maintain the scroll position react?

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.

How do you store scroll position?

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.

How do I scroll to a specific position in react native?

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).


1 Answers

It is hard to answer without any code example.

Seems scrollToLocation method with animated: false after data was changed should do the trick.

like image 81
Alexander Danilov Avatar answered Sep 21 '22 13:09

Alexander Danilov