[Fabric] ScrollView `scrollTo`/`onScroll` loop crash (3.0.0-rc.0, iOS)

Description

When calling scrollTo on an animated ref inside of a scroll handler callback like this:

const ref = useAnimatedRef<Animated.ScrollView>();

const scrollHandler = useAnimatedScrollHandler((event) => {
  scrollTo(ref, 0, 0, false);
});

return (
  <Animated.ScrollView
    ref={ref}
    onScroll={scrollHandler}
    ...
  </Animated.ScrollView>
);

the app crashes with the following stacktrace:

libc++abi: terminating with uncaught exception of type facebook::jsi::JSError: Maximum call stack size exceeded (native stack depth)

RangeError: Maximum call stack size exceeded (native stack depth)
    at _f (native)
    at _f (<path>/react-native-reanimated/src/reanimated2/hook/useAnimatedScrollHandler.ts (53:4):1:271)
    at _f (native)
    at _dispatchCommand (native)
    at dispatchCommand (<path>/react-native-reanimated/src/reanimated2/NativeMethods.ts (56:7):1:194)
    at dispatchCommand (native)
    at _f (<path>/react-native-reanimated/src/reanimated2/NativeMethods.ts (77:13):1:95)
    at _f (native)
    at _f (<path>/react-native-reanimated/FabricExample/src/ScrollViewExample.tsx (14:49):1:110)
    at _f (native)

On V2, the scrollTo method did not trigger the onScroll callback if the previous and next offsets were identical.

Expected behavior

If the ScrollView’s offset is already 0, calling scrollTo(ref, 0, 0, false) should not trigger the onScroll handler.

Actual behavior & steps to reproduce

Any scrollTo call triggers the handler, which results in an infinite loop if the handler contains a scrollTo call.

Snack or minimal code example

See this example.

Package versions

name	version
react-native	0.69.0
react-native-reanimated	3.0.0-rc.0
NodeJS	16.16.0
Xcode	13.4

Affected platforms

• Android
• iOS
• Web

[naftalibeder]

@tomekzaw Confirmed, works perfectly! Thanks!

[naftalibeder]

Thank you for putting so much effort into this already!

I’m wondering if this can be implemented more elegantly using scrollEnabled property

From my experience with UIScrollView on iOS, changing the enabled property kills the active gesture - the only way I’ve ever found to implement this functionality natively is to continuously set the scroll offset to 0.

Currently, we recommend applying the workaround directly in worklets, as suggested in https://github.com/software-mansion/react-native-reanimated/issues/3434#issuecomment-1202116319.

I had tried that, but ended up with the same issues you faced. Seems like this needs to get handled all the way down in the React Native ScrollView implementation, like you found.