Pull useAnimatedScrollHandler back up (#1858)

* Revert "Pull animated scroll handler down from pager"

This reverts commit ecebb78e40148b9160f832d26ada1d366551b645.

* Only handle onScroll for current page

src/view/screens/ProfileFeed.tsx

@@ -1,14 +1,7 @@
 import React, {useMemo, useCallback} from 'react'
-import {
-  FlatList,
-  NativeScrollEvent,
-  StyleSheet,
-  View,
-  ActivityIndicator,
-} from 'react-native'
+import {FlatList, 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'
@@ -33,6 +26,7 @@ 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'
@@ -389,7 +383,7 @@ export const ProfileFeedScreenInner = observer(
 
 interface FeedSectionProps {
   feed: PostsFeedModel
-  onScroll: (e: NativeScrollEvent) => void
+  onScroll: OnScrollCb
   headerHeight: number
   isScrolledDown: boolean
 }
@@ -414,13 +408,12 @@ 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={scrollHandler}
+          onScroll={onScroll}
           scrollEventThrottle={5}
           renderEmptyState={renderPostsEmpty}
           headerOffset={headerHeight}
@@ -450,11 +443,10 @@ const AboutSection = observer(function AboutPageImpl({
   feedInfo: FeedSourceModel | undefined
   headerHeight: number
   onToggleLiked: () => void
-  onScroll: (e: NativeScrollEvent) => void
+  onScroll: OnScrollCb
 }) {
   const pal = usePalette('default')
   const {_} = useLingui()
-  const scrollHandler = useAnimatedScrollHandler({onScroll})
 
   if (!feedInfo) {
     return <View />
@@ -464,7 +456,7 @@ const AboutSection = observer(function AboutPageImpl({
     <ScrollView
       scrollEventThrottle={1}
       contentContainerStyle={{paddingTop: headerHeight}}
-      onScroll={scrollHandler}>
+      onScroll={onScroll}>
       <View
         style={[
           {

src/view/screens/ProfileList.tsx

@@ -2,7 +2,6 @@ import React, {useCallback, useMemo} from 'react'
 import {
   ActivityIndicator,
   FlatList,
-  NativeScrollEvent,
   Pressable,
   StyleSheet,
   View,
@@ -11,7 +10,6 @@ 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'
@@ -35,6 +33,7 @@ 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'
@@ -555,7 +554,7 @@ const Header = observer(function HeaderImpl({
 
 interface FeedSectionProps {
   feed: PostsFeedModel
-  onScroll: (e: NativeScrollEvent) => void
+  onScroll: OnScrollCb
   headerHeight: number
   isScrolledDown: boolean
 }
@@ -579,14 +578,13 @@ 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={scrollHandler}
+          onScroll={onScroll}
           scrollEventThrottle={1}
           renderEmptyState={renderPostsEmpty}
           headerOffset={headerHeight}
@@ -610,7 +608,7 @@ interface AboutSectionProps {
   isCurateList: boolean | undefined
   isOwner: boolean | undefined
   onPressAddUser: () => void
-  onScroll: (e: NativeScrollEvent) => void
+  onScroll: OnScrollCb
   headerHeight: number
   isScrolledDown: boolean
 }
@@ -741,7 +739,6 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
       )
     }, [])
 
-    const scrollHandler = useAnimatedScrollHandler({onScroll})
     return (
       <View>
         <ListItems
@@ -751,7 +748,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
           renderEmptyState={renderEmptyState}
           list={list}
           headerOffset={headerHeight}
-          onScroll={scrollHandler}
+          onScroll={onScroll}
           scrollEventThrottle={1}
         />
         {isScrolledDown && (