1 files changed, 15 insertions, 25 deletions
diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx
index 701b52871..86139fb63 100644
--- a/src/view/com/pager/PagerWithHeader.tsx
+++ b/src/view/com/pager/PagerWithHeader.tsx
@@ -1,13 +1,9 @@
 import * as React from 'react'
-import {
-  LayoutChangeEvent,
-  NativeScrollEvent,
-  StyleSheet,
-  View,
-} from 'react-native'
+import {LayoutChangeEvent, StyleSheet, View} from 'react-native'
 import Animated, {
   Easing,
   useAnimatedReaction,
+  useAnimatedScrollHandler,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
@@ -16,12 +12,13 @@ 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: (e: NativeScrollEvent) => void
+  onScroll: OnScrollCb
   isScrolledDown: boolean
 }
 
@@ -143,25 +140,12 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
       ],
     )
 
-    // 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'
+    // props to pass into children render functions
+    const onScroll = useAnimatedScrollHandler({
+      onScroll(e) {
         scrollY.value = e.contentOffset.y
       },
-      [scrollY],
-    )
-
-    // props to pass into children render functions
-    const childProps = React.useMemo<PagerWithHeaderChildParams>(() => {
-      return {
-        headerHeight,
-        onScroll,
-        isScrolledDown,
-      }
-    }, [headerHeight, onScroll, isScrolledDown])
+    })
 
     const onPageSelectedInner = React.useCallback(
       (index: number) => {
@@ -205,7 +189,11 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
               headerOnlyHeight > 0 &&
               tabBarHeight > 0
             ) {
-              output = child(childProps)
+              output = child({
+                headerHeight,
+                isScrolledDown,
+                onScroll: i === currentPage ? onScroll : noop,
+              })
             }
             // Pager children must be noncollapsible plain <View>s.
             return (
@@ -237,6 +225,8 @@ const styles = StyleSheet.create({
   },
 })
 
+function noop() {}
+
 function toArray<T>(v: T | T[]): T[] {
   if (Array.isArray(v)) {
     return v