Pass handlers from the pager

bluesky-social · Nov 10, 2023 · b4c7c23 · b4c7c23
1 parent 0ef653f
commit b4c7c23
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 21 deletions.
diff --git a/src/view/com/lists/ListItems.tsx b/src/view/com/lists/ListItems.tsx
@@ -19,9 +19,10 @@ import {useAnalytics} from 'lib/analytics/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {s} from 'lib/styles'
-import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
+import {OnScrollHandler} from 'lib/hooks/useOnMainScroll'
 import {logger} from '#/logger'
 import {useModalControls} from '#/state/modals'
+import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 
 const LOADING_ITEM = {_reactKey: '__loading__'}
 const EMPTY_ITEM = {_reactKey: '__empty__'}
@@ -44,7 +45,7 @@ export const ListItems = observer(function ListItemsImpl({
   list: ListModel
   style?: StyleProp<ViewStyle>
   scrollElRef?: MutableRefObject<FlatList<any> | null>
-  onScroll?: OnScrollCb
+  onScroll: OnScrollHandler
   onPressTryAgain?: () => void
   renderHeader: () => JSX.Element
   renderEmptyState: () => JSX.Element
@@ -205,6 +206,7 @@ export const ListItems = observer(function ListItemsImpl({
     [list.isLoading],
   )
 
+  const scrollHandler = useAnimatedScrollHandler(onScroll)
   return (
     <View testID={testID} style={style}>
       <FlatList
@@ -226,7 +228,7 @@ export const ListItems = observer(function ListItemsImpl({
         }
         contentContainerStyle={s.contentContainer}
         style={{paddingTop: headerOffset}}
-        onScroll={onScroll}
+        onScroll={scrollHandler}
         onEndReached={onEndReached}
         onEndReachedThreshold={0.6}
         scrollEventThrottle={scrollEventThrottle}

diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx
@@ -1,5 +1,10 @@
 import * as React from 'react'
-import {LayoutChangeEvent, StyleSheet, View} from 'react-native'
+import {
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  StyleSheet,
+  View,
+} from 'react-native'
 import Animated, {
   Easing,
   useAnimatedReaction,
@@ -11,14 +16,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'
-import {useAnimatedScrollHandler} from 'lib/hooks/useAnimatedScrollHandler_FIXED'
+import {OnScrollHandler} from 'lib/hooks/useOnMainScroll'
 
 const SCROLLED_DOWN_LIMIT = 200
 
 interface PagerWithHeaderChildParams {
   headerHeight: number
-  onScroll: OnScrollCb
+  onScroll: OnScrollHandler
   isScrolledDown: boolean
 }
 
@@ -141,11 +145,10 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
     )
 
     // props to pass into children render functions
-    const onScroll = useAnimatedScrollHandler({
-      onScroll(e) {
-        scrollY.value = e.contentOffset.y
-      },
-    })
+    function onScrollWorklet(e: NativeScrollEvent) {
+      'worklet'
+      scrollY.value = e.contentOffset.y
+    }
 
     const onPageSelectedInner = React.useCallback(
       (index: number) => {
@@ -192,7 +195,9 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
               output = child({
                 headerHeight,
                 isScrolledDown,
-                onScroll: i === currentPage ? onScroll : noop,
+                onScroll: {
+                  onScroll: i === currentPage ? onScrollWorklet : noop,
+                },
               })
             }
             // Pager children must be noncollapsible plain <View>s.
@@ -225,7 +230,9 @@ const styles = StyleSheet.create({
   },
 })
 
-function noop() {}
+function noop() {
+  'worklet'
+}
 
 function toArray<T>(v: T | T[]): T[] {
   if (Array.isArray(v)) {

diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx
@@ -26,7 +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 {OnScrollHandler} from 'lib/hooks/useOnMainScroll'
 import {shareUrl} from 'lib/sharing'
 import {toShareUrl} from 'lib/strings/url-helpers'
 import {Haptics} from 'lib/haptics'
@@ -44,6 +44,7 @@ import {logger} from '#/logger'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useModalControls} from '#/state/modals'
+import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 
 const SECTION_TITLES = ['Posts', 'About']
 
@@ -383,7 +384,7 @@ export const ProfileFeedScreenInner = observer(
 
 interface FeedSectionProps {
   feed: PostsFeedModel
-  onScroll: OnScrollCb
+  onScroll: OnScrollHandler
   headerHeight: number
   isScrolledDown: boolean
 }
@@ -443,10 +444,11 @@ const AboutSection = observer(function AboutPageImpl({
   feedInfo: FeedSourceModel | undefined
   headerHeight: number
   onToggleLiked: () => void
-  onScroll: OnScrollCb
+  onScroll: OnScrollHandler
 }) {
   const pal = usePalette('default')
   const {_} = useLingui()
+  const scrollHandler = useAnimatedScrollHandler(onScroll)
 
   if (!feedInfo) {
     return <View />
@@ -456,7 +458,7 @@ const AboutSection = observer(function AboutPageImpl({
     <ScrollView
       scrollEventThrottle={1}
       contentContainerStyle={{paddingTop: headerHeight}}
-      onScroll={onScroll}>
+      onScroll={scrollHandler}>
       <View
         style={[
           {

diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx
@@ -33,7 +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 {OnScrollHandler} from 'lib/hooks/useOnMainScroll'
 import {NavigationProp} from 'lib/routes/types'
 import {toShareUrl} from 'lib/strings/url-helpers'
 import {shareUrl} from 'lib/sharing'
@@ -554,7 +554,7 @@ const Header = observer(function HeaderImpl({
 
 interface FeedSectionProps {
   feed: PostsFeedModel
-  onScroll: OnScrollCb
+  onScroll: OnScrollHandler
   headerHeight: number
   isScrolledDown: boolean
 }
@@ -608,7 +608,7 @@ interface AboutSectionProps {
   isCurateList: boolean | undefined
   isOwner: boolean | undefined
   onPressAddUser: () => void
-  onScroll: OnScrollCb
+  onScroll: OnScrollHandler
   headerHeight: number
   isScrolledDown: boolean
 }