ScrollTo is not working in Fabric for FlashList

[Yusang-park]

Description

Hi, I updated the app to Fabric.
I found scrollTo is not working in Flashlist. but also, working for FlatList properly.

Steps to reproduce

  const animatedRef = useAnimatedRef<FlashList<unknown>>();

  useDerivedValue(() => {
    if (scrollX) {
      scrollTo(animatedRef, scrollX.value, 0, false);
    }
  }, [scrollX?.value]);

...

return <AnimatedFlashList ref={animatedRef}

Snack or a link to a repository

Reanimated version

3.16.1

React Native version

0.76.0

Platforms

Android, iOS

JavaScript runtime

None

Workflow

Expo Dev Client

Architecture

Fabric (New Architecture)

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[gotoobe]

You might want to take a look at this: #4445.

Unfortunately, it doesn't seem to have fixed the problem.

[gotoobe]

I think I may have found a way to make it work in the meantime by modifying this one: https://github.com/software-mansion/react-native-reanimated/blob/3.16.3/packages/react-native-reanimated/src/hook/useAnimatedRef.ts#L27-L34

I tweaked it to:

function getComponentOrScrollable(component: MaybeScrollableComponent) {
  // see: https://github.com/software-mansion/react-native-reanimated/pull/4445
  // FlashList: https://github.com/Shopify/flash-list/blob/main/src/FlashList.tsx#L850
  // recyclerlistview -> getNativeScrollRef https://github.com/Flipkart/recyclerlistview/blob/678c3cde10499787387e7cd79ee9ef358d04426f/src/platform/reactnative/scrollcomponent/ScrollComponent.tsx#L53
  // @ts-ignore
  if (isFabric() && component.recyclerlistview_unsafe && component.recyclerlistview_unsafe.getNativeScrollRef){
    // @ts-ignore
    return component.recyclerlistview_unsafe.getNativeScrollRef();
  }
  if (isFabric() && component.getNativeScrollRef) {
    return component.getNativeScrollRef();
  } else if (!isFabric() && component.getScrollableNode) {
    return component.getScrollableNode();
  }
}

I'm not sure if this will impact other functions, but for now, this change is working for me.

🎉

[patrycjakalinska]

Hi @Yusang-park, thank you for opening the issue! Can you elaborate on what's not working and provide full snack example containing this issue? I've checked scrollTo compatibility with FlashList and FlatList and it seems that everything works fine. You can check for yourself in our Fabric Example app -> scrollTo example.

Screen.Recording.2025-01-14.at.10.07.41.mov