Pull animated scroll handler down from pager (#1827)

src/view/com/pager/PagerWithHeader.tsx

@@ -1,9 +1,13 @@
 import * as React from 'react'
-import {LayoutChangeEvent, StyleSheet, View} from 'react-native'
+import {
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  StyleSheet,
+  View,
+} from 'react-native'
 import Animated, {
   Easing,
   useAnimatedReaction,
-  useAnimatedScrollHandler,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
@@ -12,13 +16,12 @@ import Animated, {
 import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {TabBar} from './TabBar'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
 
 const SCROLLED_DOWN_LIMIT = 200
 
 interface PagerWithHeaderChildParams {
   headerHeight: number
-  onScroll: OnScrollCb
+  onScroll: (e: NativeScrollEvent) => void
   isScrolledDown: boolean
 }
 
@@ -140,12 +143,18 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
       ],
     )
 
-    // props to pass into children render functions
-    const onScroll = useAnimatedScrollHandler({
-      onScroll(e) {
+    // Ideally we'd call useAnimatedScrollHandler here but we can't safely do that
+    // due to https://github.com/software-mansion/react-native-reanimated/issues/5345.
+    // So instead we pass down a worklet, and individual pages will have to call it.
+    const onScroll = React.useCallback(
+      (e: NativeScrollEvent) => {
+        'worklet'
         scrollY.value = e.contentOffset.y
       },
-    })
+      [scrollY],
+    )
+
+    // props to pass into children render functions
     const childProps = React.useMemo<PagerWithHeaderChildParams>(() => {
       return {
         headerHeight,