feat: suggest useComposedScrollHandler hook

app/src/examples/ComposedScrollHandler/index.tsx

@@ -0,0 +1,54 @@
+import Animated, {
+  AnimatedScrollViewProps,
+  useAnimatedScrollHandler,
+} from 'react-native-reanimated';
+import { StyleSheet, Text } from 'react-native';
+
+import React from 'react';
+import { useComposedScrollHandler } from '../../../../src/reanimated2/hook/composeAnimatedScrollHandler';
+
+export default function ComposedAnimatedScrollHandlerExample() {
+  const externalScrollHandler = useAnimatedScrollHandler((event) => {
+    console.log('External handler', event.contentOffset.y);
+  });
+
+  return (
+    <CustomScrollView
+      onScroll={externalScrollHandler}
+      style={styles.scrollView}>
+      {[...Array(100)].map((_, i) => (
+        <Text key={i} style={styles.text}>
+          {i}
+        </Text>
+      ))}
+    </CustomScrollView>
+  );
+}
+
+function CustomScrollView(props: AnimatedScrollViewProps) {
+  const scrollHandler = useAnimatedScrollHandler((event) => {
+    console.log('Internal handler', event.contentOffset.y);
+  });
+
+  const composedScrollHandler = useComposedScrollHandler([
+    scrollHandler,
+    props.onScroll, // <- I don't know how to correctly type this
+  ]);
+
+  return (
+    <Animated.ScrollView {...props} onScroll={composedScrollHandler}>
+      {props.children}
+    </Animated.ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  scrollView: {
+    flex: 1,
+    width: '100%',
+  },
+  text: {
+    fontSize: 50,
+    textAlign: 'center',
+  },
+});

app/src/examples/index.ts

@@ -124,6 +124,7 @@ import HabitsExample from './LayoutAnimations/HabitsExample';
 import MemoExample from './MemoExample';
 import PerformanceMonitorExample from './PerfomanceMonitorExample';
 import ScreenTransitionExample from './ScreenTransitionExample';
+import ComposedScrollHandler from './ComposedScrollHandler';
 
 interface Example {
   icon?: string;
@@ -341,6 +342,11 @@ export const EXAMPLES: Record<string, Example> = {
     title: 'useFrameCallback',
     screen: FrameCallbackExample,
   },
+  ComposedScrollHandler: {
+    icon: '🔀',
+    title: 'useComposedScrollHandler',
+    screen: ComposedScrollHandler,
+  },
   ScrollViewExample: {
     icon: '📜',
     title: 'useAnimatedScrollHandler',

src/reanimated2/hook/composeAnimatedScrollHandler.ts

@@ -0,0 +1,28 @@
+import type {ScrollHandlerInternal, ScrollHandlerProcessed} from "./useAnimatedScrollHandler";
+import {useEvent, useHandler} from "./index";
+import type {RNNativeScrollEvent} from "./commonTypes";
+
+
+
+export function useComposedScrollHandler<Context extends Record<string, unknown>>(
+    handlerList: Array<ScrollHandlerProcessed<Context> | undefined>, // <- I don't know how to correctly type this
+){
+
+    /**
+     * 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,
+    );
+}