How to use scrollTo from Reanimated with FlashList without breaking recycling

[henrymoulton]

Current behavior

I'm working on some code where I can't rely on gestures responding to a ScrollView, so instead I'm using a Pan gesture handler to call scrollTo which I want to call on a ref to a scrollable, I want to use FlashList but I don't want to use ref.current.scrollToIndex as I believe it'd be called on the JS thread.

So I pass an Animated.ScrollView like this:

<FlashList
          renderScrollComponent={(props) => (
            <ForwardedScrollView
              {...props}
              ref={aref}
              onScroll={onScroll}
            />
          )}

and use that aref to call scrollTo on.

The problem is that I'm now scrolling the underlying scrollable but it's not updating the recycling, I've got a list of 6 items here but it's not updating:

bug.with.recycling.mov

Expected behavior

Is there a way to scrollToIndex using UI thread?

To Reproduce

https://snack.expo.dev/@henry12345678/delicious-violet-sandwich

Platform:

• iOS
• Android

Environment

"@shopify/flash-list": "1.4.3",
"react-native-gesture-handler": "~2.12.0",
"react-native-reanimated": "~3.3.0",
"expo": "~49.0.15",
"react-native": "0.72.6",

[henrymoulton]

Have just seen software-mansion/react-native-reanimated#4384 and can confirm the example code works.