Autoscroll doesn't work correctly

[fbeccaceci]

Registrazione.schermo.2025-02-27.alle.16.11.03.mov

As you can see from the video, this is the example app in the autoscroll example page, the only change i made was to increase the number of items from 21 to 60 to have more room for the scroll to happen

The autoscroll has extreme lag and completely blocks at some point

Registrazione.schermo.2025-02-27.alle.16.16.38.mov

On iOS the situation is better, but as you can see from the second video the dragged item is flickering while the grid is autoscrolling

All the tests performed on v1.3.1 using Fabric

[MatiPl01]

I wish I could improve that but there is very little what I can do in this library. My implementation is correct as it works with no issues on the Old Architecture. Unfortunately, the scrollTo implementation in Reanimated is very laggy on the New Architecture (Fabric).

I already opened an issue in the react-native-reanimated repository: software-mansion/react-native-reanimated#6999

It must be fixed there instead of here.

[MatiPl01]

I think that I can add a workaround that will use a JS scrollTo function on the New Architecture instead of the Reanimated's one. Even though, it should be normally less performant, in this case it may work better, as the Reanimated's implementation is freezing the app.
I will inform you after experimenting a bit and let you know once I figure something out.

[fbeccaceci]

Well to me a "generally less performant" solution looks better than one that feels laggy even on performant devices. Once the problem with reanimated will be fixed it will be possible to go back to the the performant approach

I appreciate you spending time looking for a solution

[fbeccaceci]

I think that I can add a workaround that will use a JS scrollTo function on the New Architecture instead of the Reanimated's one. Even though, it should be normally less performant, in this case it may work better, as the Reanimated's implementation is freezing the app. I will inform you after experimenting a bit and let you know once I figure something out.

Any news on this? Still experiencing the problem

[fbeccaceci]

I'm experimenting a bit, i found out that using scrollableRef.current?.scrollTo on JS still causes lag.

Using setNativeProps tho allows for a 60FPS scroll

function updateScrollY(value: number) {
    scrollableRef.current?.setNativeProps({
      contentOffset: { y: value }
    });
  }

  const targetY = useSharedValue(0);
  useFrameCallback(() => {
    const newY = targetY.value + 1;
    targetY.value = newY;
    runOnJS(updateScrollY)(newY);
  });

Registrazione.schermo.2025-04-12.alle.12.04.23.mov

The only problem is that when i try to grap an item and actually sort it drops to 0 and freezes the app, i can't really figure out why this behaviour happens, i think @MatiPl01 you know the code base better do you have any idea why this could be happening

P.S. The freeze happens as well if i try to replace the scrollTo implementation with the setNativeProps in AutoScrollProvider index.tsx

[MatiPl01]

Thanks @fbeccaceci for trying to investigate the problem on your side. I forgot to reply here but I tried using scrollTo from JS and had the same performance problem. It seems that both implementations are doing the same thing under the hood. Moreover, calling runOnJS too often can also have an impact on the performance resulting in even bigger FPS drops.

I haven't tried using setNativeProps before so I can't tell much about the freeze problem you encountered with this implementation.

I think that there is no good solution for this problem. The only reasonable thing would be limiting the scrollTo calls to the possible minimum - e.g. instead of scrolling by 1-5px on every frame, we could scroll by 100px or more once a second or do something similar. I don't like this solution very much but it is the only thing that may work for now on the New Architecture.

I hoped that we will fix this problem in react-native-reanimated, but we haven't done that yet, so maybe it would be worth to implement this solution with scrollTo calls limiting, which would give a bit choppy scroll experience, but, at least, the app shouldn't freeze.

[EmmanuelIbiyemi]

Well Good day i love this project and i would love to work it cause of the knowledge i have with react-native either build or expo lol cause most people use expo .
By the way nice React native gesturehandler like the work you did with it
The way to solve the problem would be that i use another Looping tag or should lib not Flatlist from fast response i will make use of spotifyList of Lengend list for easy understanding if that didn't work well lol till you give me the Task i will Know how to solve it quickly
PS: Thank You

[MatiPl01]

Hey @EmmanuelIbiyemi!

Sorry for the late response but I was busy today. Do you want to work on this scrolling performance issue or something else?

I currently don't support any virtualized lists because of how Reanimated works on the New Architecture, which makes it impossible to implement it properly without doing any hacks (I have some on my mind but I planned to implement them in the near future when I get a bit more fee time).

When it comes to this exact auto scroll performance problem, it is not related to any list kind. It is just Reanimated's New Architecture problem caused by how React Native works on the New Architecture and the only solution here is to somehow limit scrollTo calls in a smart way (at least I don't know about any better ways to fix that).

[EmmanuelIbiyemi]

Hm taught since you said you added more values to the or let's call where you store the value storage

Taught it the lagging was kind the way someone is fetching the value from the storage
But now you made mention of reanimated hm

If you assign the task to me I think by GOD grace I will be able spot what's causing the issue

[MatiPl01]

@EmmanuelIbiyemi I assigned you. You can check what is causing the issue on your side if you want. Thanks.