Flipkart
Maintain scroll position when adding rows to the top of the list
When I call dataProvider.cloneWithRows() and add more rows to the top of the list. The scroll position is lost. I tried investigating by reading the source code. I'd appreciate it if you could help with this!
And thanks for the great library! Its performance is amazing.
Sadly, we do not have anchoring support for items added to top of the list as of now. Can you specify the use case? We are considering adding it soon though. Have you tried FlatList? Does it preserve scroll position? We do perform much faster but never tried scroll anchoring with FlatList.
Flatlist's performance is horrible. The reason I switched to RecyclerListView is because of its impressive smooth performance.
And sadly Flatlist doesn't support preserving the scroll positioning when adding items to the top of the list as well. Do you have an idea of a possible work around? I could invest sometime in trying to fix it and make a PR for it
Yeah we'll be more than happy to accept PRs, however, this might not be as simple as a small bugfix. @surya-kanoria from out team is already thinking of solutions around this. Maybe you guys can collaborate.
@surya-kanoria I've read most of the source code and I have an idea of how things work. Would love to help implement this. How do you suggest we contact each other?
@AbdallaMohamed Let us connect on hangouts. Can you please share your gmail id and a suitable time to talk?
Is it already implemented?
I can give a real use case - a chat stream. A user can search for chat messages, then find something in the middle and jump into it, so the middle of chat stream will be rendered. Then a user can scroll back n forth, so a scroll position preserving must be implemented when insert messages in both directions when scroll
Could someone give an update here?
I was exploring this library as an alternative to FlatList because it has this issue. Is there a way to build on top of the React Native ScrollView and solve this problem of anchoring, or is that something that will need to be solved in ScrollView itself?
I've got this to work with some success:
requestAnimationFrame(() => {
const listView = listViewRef.current;
if (listView) {
listView.scrollToIndex(measuredHeights.length, false);
// Meh
setTimeout(() => {
const renderer = (listView as any).getVirtualRenderer() as VirtualRenderer;
const heightOffset = measuredHeights.reduce(
(heightOffset, measuredHeight) =>
heightOffset + measuredHeight.measuredHeight,
0
);
renderer.updateOffset(0, heightOffset, true, {
windowShift: 0,
startCorrection: 0,
endCorrection: 0
});
}, 50);
}
});
where measuredHeights is an array of items you're adding to the beginning of the list and measuredHeight.measuredHeight is the measured height of an individual element in your newly added array.
@paulxuca I have a similar issue where the scroll position resets itself when I change the local state and trigger a rerender.. Would this work in my situation you think?
In case anyone is here in 2025 (like me), Flashlist v2 (currently Alpha) does very well at this with their maintainVisibleContentPosition implementation. https://github.com/Shopify/flash-list/tree/new-rlv-prototype?tab=readme-ov-file#flashlist-v2
