Maintain scroll position when adding rows to the top of the list

[AbdallaElabd]

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.

[naqvitalha]

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.

[AbdallaElabd]

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

[naqvitalha]

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.

[AbdallaElabd]

@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?

[surya-kanoria]

@abdallamohamed Let us connect on hangouts. Can you please share your gmail id and a suitable time to talk?

[AbdallaElabd]

@surya-kanoria feel free to mail me at ame@churchdesk.com anytime

[nsantacruz]

Any updates on this, @surya-kanoria ?

[AbdallaElabd]

Just checking if there's any news updates on this. @naqvitalha

[miladrasooli]

Any updates on this issue?

[z98361]

1 year ago...

[mayconmesquita]

2 years ago...

[pribeh]

Has anybody given this a shot yet

[soulfly]

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?

[timurridjanovic]

dang.. this is still not implemented?

[Jade-Jade-Jade]

+1 is there any plan for it?

[jack-guy]

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?

[paulxuca]

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.

[timurridjanovic]

@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?