Composing/forwarding onScroll handlers

[ACHP]

Hello :)

First: Thank you for this amazing library, it is really awesome

I have a question regarding what we could call "ScrollHandler composition".
I was wondering if there was a clean way to "compose"/"merge" 2 different useAnimatedScrollHandler hook ?

why

Let's say I want to create a Fancy ScrollView that use useAnimatedScrollHandler internally to do some animation, on the background color for example.
I want to expose this new component to the team and let them use their own animations (in addition to mines) using reanimated primitives.

Maybe I missed something in the documentation, but as of today it seems that there is no easy way to do it.
We have to provide a custom API for our FancyScrollView to handle onScroll, onMomentumScrollEnd etc ...
This is not ideal because now the implementation details of our FancyScrollView have somehow leaked outside our component.

Example

import ReAnimated, {useAnimatedScrollHandler, useAnimatedStyle, useSharedValue} from 'react-native-reanimated';

/**
 * Base Fancy component
 */
const FancyScrollView = (props) => {
  const scrollOffsetY = useSharedValue<number>(0);
  const scrollViewStyle = useAnimatedStyle(()=> {
    return {/*...*/}
  })
  const onScrollLocalHandler = useAnimatedScrollHandler((event) => (scrollOffsetY.value = event.contentOffset.y));

  const onScrollHandler = onScrollLocalHandler; // <- how can I merge props.onScroll here ?
  
  return <ReAnimated.ScrollView onScroll={onScrollHandler} style={scrollViewStyle}>{props.children}</ReAnimated.ScrollView>;
};

/**
 * SuperFancy component overload
 */
const SuperFancyScrollView = (props) => {
  const scrollOffsetY = useSharedValue<number>(0);
  const onScrollLocalHandler = useAnimatedScrollHandler((event) => (scrollOffsetY.value = event.contentOffset.y));

  return <FancyScrollView onScroll={onScrollLocalHandler}>{props.children}</FancyScrollView>;
};

Possibly terrible solution

With my zero expertise in ReAnimated, I managed to code a helper function to easily compose onScroll handler.
I'm pretty sure I should not call ref.current?.worklet(event) myself nor using useHandler that way but it seems to work.
(I removed the typing for simplicity)

function useComposedScrollHandler(
  onScrollRefList,
) {
  const {doDependenciesDiffer} = useHandler({}, onScrollRefList);

  return useEvent(
    (event) => {
      'worklet';

      for (const ref of onScrollRefList) {
        ref.current?.worklet?.(event);
      }
    },
    ['onScroll', 'onScrollBeginDrag', 'onScrollEndDrag', 'onMomentumScrollBegin', 'onMomentumScrollEnd'],
    doDependenciesDiffer,
  );
}

// usage
const FancyScrollView = (props) => {
  const scrollOffsetY = useSharedValue<number>(0);
  const scrollViewStyle = useAnimatedStyle(()=> {
    return {/*...*/}
  })
  const onScrollLocalHandler = useAnimatedScrollHandler((event) => (scrollOffsetY.value = event.contentOffset.y));

  const onScrollHandler = useComposedScrollHandler([onScrollLocalHandler, props.onScroll]);

  return <ReAnimated.ScrollView onScroll={onScrollHandler} style={scrollViewStyle}>{props.children}</ReAnimated.ScrollView>;
};

Thank you for your answers and your time ... and this Library

[ACHP]

I updated the label from Q&A to Ideas, hoping for more visibility on this 🤞 😄

[ACHP]

@piaskowyk , can you help me on this maybe ... ?

(I don't like to mention people directly but I don't know how to give more visibility to this question/idea :/
I don't want to write an issue for this since it's not a bug, its place belongs to the Github "Discussion", but it has been opened on Sep 26 2022 and has not received any answers from the team nor the community.)

[felire]

I am having the same issue, and your solution crash on the latest react-native-reanimated version

[ACHP]

Sorry for the delay, you can test with this version

Notes:

• Keep in mind that this is probably not the best way to do it, I don't have a lot of xp with the RNR codebase, but it seems to work.
• The typing is not great yet, you can use any for now for the handlerList params
• I'll open a PR soon, to hopefully get some feedback (finally :|)

export function useComposedScrollHandler<Context extends Record<string, unknown>>(
    handlerList: Array<ScrollHandlerProcessed<Context> | undefined>, // or any
){

    /**
     * unknown casting seems legitimate. See {@link useHandler} override
     */
    const internalHandlerList = handlerList as unknown as Array<ScrollHandlerInternal>;

    const {doDependenciesDiffer} = useHandler({}, internalHandlerList);

    const allWorklets = internalHandlerList.flatMap(handler => handler.workletEventHandler?.worklet ? handler.workletEventHandler?.worklet : []);

    return useEvent<RNNativeScrollEvent, Context>(
        (event) => {
            'worklet';
            allWorklets.forEach(it => it(event));
        },
        ['onScroll', 'onScrollBeginDrag', 'onScrollEndDrag', 'onMomentumScrollBegin', 'onMomentumScrollEnd'],
        doDependenciesDiffer,
    );
}