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,

src/view/screens/ProfileFeed.tsx

@@ -1,7 +1,14 @@
 import React, {useMemo, useCallback} from 'react'
-import {FlatList, StyleSheet, View, ActivityIndicator} from 'react-native'
+import {
+  FlatList,
+  NativeScrollEvent,
+  StyleSheet,
+  View,
+  ActivityIndicator,
+} from 'react-native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 import {useNavigation} from '@react-navigation/native'
+import {useAnimatedScrollHandler} from 'react-native-reanimated'
 import {usePalette} from 'lib/hooks/usePalette'
 import {HeartIcon, HeartIconSolid} from 'lib/icons'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
@@ -26,7 +33,6 @@ import {EmptyState} from 'view/com/util/EmptyState'
 import * as Toast from 'view/com/util/Toast'
 import {useSetTitle} from 'lib/hooks/useSetTitle'
 import {useCustomFeed} from 'lib/hooks/useCustomFeed'
-import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
 import {shareUrl} from 'lib/sharing'
 import {toShareUrl} from 'lib/strings/url-helpers'
 import {Haptics} from 'lib/haptics'
@@ -345,17 +351,14 @@ export const ProfileFeedScreenInner = observer(
             />
           )}
           {({onScroll, headerHeight}) => (
-            <ScrollView
-              onScroll={onScroll}
-              scrollEventThrottle={1}
-              contentContainerStyle={{paddingTop: headerHeight}}>
             <AboutSection
               feedOwnerDid={feedOwnerDid}
               feedRkey={rkey}
               feedInfo={feedInfo}
+              headerHeight={headerHeight}
               onToggleLiked={onToggleLiked}
+              onScroll={onScroll}
             />
-            </ScrollView>
           )}
         </PagerWithHeader>
         <FAB
@@ -379,7 +382,7 @@ export const ProfileFeedScreenInner = observer(
 
 interface FeedSectionProps {
   feed: PostsFeedModel
-  onScroll: OnScrollCb
+  onScroll: (e: NativeScrollEvent) => void
   headerHeight: number
   isScrolledDown: boolean
 }
@@ -404,12 +407,13 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
       return <EmptyState icon="feed" message="This feed is empty!" />
     }, [])
 
+    const scrollHandler = useAnimatedScrollHandler({onScroll})
     return (
       <View>
         <Feed
           feed={feed}
           scrollElRef={scrollElRef}
-          onScroll={onScroll}
+          onScroll={scrollHandler}
           scrollEventThrottle={5}
           renderEmptyState={renderPostsEmpty}
           headerOffset={headerHeight}
@@ -430,19 +434,29 @@ const AboutSection = observer(function AboutPageImpl({
   feedOwnerDid,
   feedRkey,
   feedInfo,
+  headerHeight,
   onToggleLiked,
+  onScroll,
 }: {
   feedOwnerDid: string
   feedRkey: string
   feedInfo: FeedSourceModel | undefined
+  headerHeight: number
   onToggleLiked: () => void
+  onScroll: (e: NativeScrollEvent) => void
 }) {
   const pal = usePalette('default')
+  const scrollHandler = useAnimatedScrollHandler({onScroll})
 
   if (!feedInfo) {
     return <View />
   }
+
   return (
+    <ScrollView
+      scrollEventThrottle={1}
+      contentContainerStyle={{paddingTop: headerHeight}}
+      onScroll={scrollHandler}>
       <View
         style={[
           {
@@ -506,6 +520,7 @@ const AboutSection = observer(function AboutPageImpl({
           )}
         </Text>
       </View>
+    </ScrollView>
   )
 })
 

src/view/screens/ProfileList.tsx

@@ -2,6 +2,7 @@ import React, {useCallback, useMemo} from 'react'
 import {
   ActivityIndicator,
   FlatList,
+  NativeScrollEvent,
   Pressable,
   StyleSheet,
   View,
@@ -10,6 +11,7 @@ import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {useNavigation} from '@react-navigation/native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {useAnimatedScrollHandler} from 'react-native-reanimated'
 import {observer} from 'mobx-react-lite'
 import {RichText as RichTextAPI} from '@atproto/api'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
@@ -33,7 +35,6 @@ import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useSetTitle} from 'lib/hooks/useSetTitle'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
 import {NavigationProp} from 'lib/routes/types'
 import {toShareUrl} from 'lib/strings/url-helpers'
 import {shareUrl} from 'lib/sharing'
@@ -544,7 +545,7 @@ const Header = observer(function HeaderImpl({
 
 interface FeedSectionProps {
   feed: PostsFeedModel
-  onScroll: OnScrollCb
+  onScroll: (e: NativeScrollEvent) => void
   headerHeight: number
   isScrolledDown: boolean
 }
@@ -568,13 +569,14 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
       return <EmptyState icon="feed" message="This feed is empty!" />
     }, [])
 
+    const scrollHandler = useAnimatedScrollHandler({onScroll})
     return (
       <View>
         <Feed
           testID="listFeed"
           feed={feed}
           scrollElRef={scrollElRef}
-          onScroll={onScroll}
+          onScroll={scrollHandler}
           scrollEventThrottle={1}
           renderEmptyState={renderPostsEmpty}
           headerOffset={headerHeight}
@@ -598,7 +600,7 @@ interface AboutSectionProps {
   isCurateList: boolean | undefined
   isOwner: boolean | undefined
   onPressAddUser: () => void
-  onScroll: OnScrollCb
+  onScroll: (e: NativeScrollEvent) => void
   headerHeight: number
   isScrolledDown: boolean
 }
@@ -723,6 +725,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
       )
     }, [])
 
+    const scrollHandler = useAnimatedScrollHandler({onScroll})
     return (
       <View>
         <ListItems
@@ -732,7 +735,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
           renderEmptyState={renderEmptyState}
           list={list}
           headerOffset={headerHeight}
-          onScroll={onScroll}
+          onScroll={scrollHandler}
           scrollEventThrottle={1}
         />
         {isScrolledDown && (