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
+    // Ideally we'd call useAnimatedScrollHandler here but we can't safely do that
-    const onScroll = useAnimatedScrollHandler({
+    // due to https://github.com/software-mansion/react-native-reanimated/issues/5345.
-      onScroll(e) {
+    // 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
+            <AboutSection
+              feedOwnerDid={feedOwnerDid}
+              feedRkey={rkey}
+              feedInfo={feedInfo}
+              headerHeight={headerHeight}
+              onToggleLiked={onToggleLiked}
               onScroll={onScroll}
-              scrollEventThrottle={1}
+            />
-              contentContainerStyle={{paddingTop: headerHeight}}>
-              <AboutSection
-                feedOwnerDid={feedOwnerDid}
-                feedRkey={rkey}
-                feedInfo={feedInfo}
-                onToggleLiked={onToggleLiked}
-              />
-            </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,82 +434,93 @@ 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 (
-    <View
+    <ScrollView
-      style={[
+      scrollEventThrottle={1}
-        {
+      contentContainerStyle={{paddingTop: headerHeight}}
-          borderTopWidth: 1,
+      onScroll={scrollHandler}>
-          paddingVertical: 20,
+      <View
-          paddingHorizontal: 20,
+        style={[
-          gap: 12,
+          {
-        },
+            borderTopWidth: 1,
-        pal.border,
+            paddingVertical: 20,
-      ]}>
+            paddingHorizontal: 20,
-      {feedInfo.descriptionRT ? (
+            gap: 12,
-        <RichText
+          },
-          testID="listDescription"
+          pal.border,
-          type="lg"
+        ]}>
-          style={pal.text}
+        {feedInfo.descriptionRT ? (
-          richText={feedInfo.descriptionRT}
+          <RichText
-        />
+            testID="listDescription"
-      ) : (
+            type="lg"
-        <Text type="lg" style={[{fontStyle: 'italic'}, pal.textLight]}>
+            style={pal.text}
-          No description
+            richText={feedInfo.descriptionRT}
-        </Text>
-      )}
-      <View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}>
-        <Button
-          type="default"
-          testID="toggleLikeBtn"
-          accessibilityLabel="Like this feed"
-          accessibilityHint=""
-          onPress={onToggleLiked}
-          style={{paddingHorizontal: 10}}>
-          {feedInfo?.isLiked ? (
-            <HeartIconSolid size={19} style={styles.liked} />
-          ) : (
-            <HeartIcon strokeWidth={3} size={19} style={pal.textLight} />
-          )}
-        </Button>
-        {typeof feedInfo.likeCount === 'number' && (
-          <TextLink
-            href={makeCustomFeedLink(feedOwnerDid, feedRkey, 'liked-by')}
-            text={`Liked by ${feedInfo.likeCount} ${pluralize(
-              feedInfo.likeCount,
-              'user',
-            )}`}
-            style={[pal.textLight, s.semiBold]}
           />
-        )}
-      </View>
-      <Text type="md" style={[pal.textLight]} numberOfLines={1}>
-        Created by{' '}
-        {feedInfo.isOwner ? (
-          'you'
         ) : (
-          <TextLink
+          <Text type="lg" style={[{fontStyle: 'italic'}, pal.textLight]}>
-            text={sanitizeHandle(feedInfo.creatorHandle, '@')}
+            No description
-            href={makeProfileLink({
+          </Text>
-              did: feedInfo.creatorDid,
-              handle: feedInfo.creatorHandle,
-            })}
-            style={pal.textLight}
-          />
         )}
-      </Text>
+        <View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}>
-    </View>
+          <Button
+            type="default"
+            testID="toggleLikeBtn"
+            accessibilityLabel="Like this feed"
+            accessibilityHint=""
+            onPress={onToggleLiked}
+            style={{paddingHorizontal: 10}}>
+            {feedInfo?.isLiked ? (
+              <HeartIconSolid size={19} style={styles.liked} />
+            ) : (
+              <HeartIcon strokeWidth={3} size={19} style={pal.textLight} />
+            )}
+          </Button>
+          {typeof feedInfo.likeCount === 'number' && (
+            <TextLink
+              href={makeCustomFeedLink(feedOwnerDid, feedRkey, 'liked-by')}
+              text={`Liked by ${feedInfo.likeCount} ${pluralize(
+                feedInfo.likeCount,
+                'user',
+              )}`}
+              style={[pal.textLight, s.semiBold]}
+            />
+          )}
+        </View>
+        <Text type="md" style={[pal.textLight]} numberOfLines={1}>
+          Created by{' '}
+          {feedInfo.isOwner ? (
+            'you'
+          ) : (
+            <TextLink
+              text={sanitizeHandle(feedInfo.creatorHandle, '@')}
+              href={makeProfileLink({
+                did: feedInfo.creatorDid,
+                handle: feedInfo.creatorHandle,
+              })}
+              style={pal.textLight}
+            />
+          )}
+        </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 && (