Port pager to use onScrolledDownChange

src/view/com/lists/ListMembers.tsx

@@ -35,6 +35,7 @@ export function ListMembers({
   style,
   scrollElRef,
   onScroll,
+  onScrolledDownChange,
   onPressTryAgain,
   renderHeader,
   renderEmptyState,
@@ -47,6 +48,7 @@ export function ListMembers({
   style?: StyleProp<ViewStyle>
   scrollElRef?: ListRef
   onScroll: OnScrollHandler
+  onScrolledDownChange: (isScrolledDown: boolean) => void
   onPressTryAgain?: () => void
   renderHeader: () => JSX.Element
   renderEmptyState: () => JSX.Element
@@ -234,6 +236,7 @@ export function ListMembers({
         }}
         style={{paddingTop: headerOffset}}
         onScroll={scrollHandler}
+        onScrolledDownChange={onScrolledDownChange}
         onEndReached={onEndReached}
         onEndReachedThreshold={0.6}
         scrollEventThrottle={scrollEventThrottle}

src/view/com/pager/PagerWithHeader.tsx

@@ -23,13 +23,10 @@ import {OnScrollHandler} from 'lib/hooks/useOnMainScroll'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {ListMethods} from '../util/List'
 
-const SCROLLED_DOWN_LIMIT = 200
-
 export interface PagerWithHeaderChildParams {
   headerHeight: number
   isFocused: boolean
   onScroll: OnScrollHandler
-  isScrolledDown: boolean
   scrollElRef: React.MutableRefObject<ListMethods | ScrollView | null>
 }
 
@@ -62,7 +59,6 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
     const [currentPage, setCurrentPage] = React.useState(0)
     const [tabBarHeight, setTabBarHeight] = React.useState(0)
     const [headerOnlyHeight, setHeaderOnlyHeight] = React.useState(0)
-    const [isScrolledDown, setIsScrolledDown] = React.useState(false)
     const scrollY = useSharedValue(0)
     const headerHeight = headerOnlyHeight + tabBarHeight
 
@@ -155,15 +151,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
       if (!throttleTimeout.current) {
         throttleTimeout.current = setTimeout(() => {
           throttleTimeout.current = null
-
           runOnUI(adjustScrollForOtherPages)()
-
-          const nextIsScrolledDown = scrollY.value > SCROLLED_DOWN_LIMIT
-          if (isScrolledDown !== nextIsScrolledDown) {
-            React.startTransition(() => {
-              setIsScrolledDown(nextIsScrolledDown)
-            })
-          }
         }, 80 /* Sync often enough you're unlikely to catch it unsynced */)
       }
     })
@@ -211,7 +199,6 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
                   index={i}
                   isReady={isReady}
                   isFocused={i === currentPage}
-                  isScrolledDown={isScrolledDown}
                   onScrollWorklet={i === currentPage ? onScrollWorklet : noop}
                   registerRef={registerRef}
                   renderTab={child}
@@ -293,7 +280,6 @@ function PagerItem({
   index,
   isReady,
   isFocused,
-  isScrolledDown,
   onScrollWorklet,
   renderTab,
   registerRef,
@@ -302,7 +288,6 @@ function PagerItem({
   index: number
   isFocused: boolean
   isReady: boolean
-  isScrolledDown: boolean
   registerRef: (scrollRef: AnimatedRef<any> | null, atIndex: number) => void
   onScrollWorklet: (e: NativeScrollEvent) => void
   renderTab: ((props: PagerWithHeaderChildParams) => JSX.Element) | null
@@ -328,7 +313,6 @@ function PagerItem({
   return renderTab({
     headerHeight,
     isFocused,
-    isScrolledDown,
     onScroll: scrollHandler,
     scrollElRef: scrollElRef as React.MutableRefObject<
       ListMethods | ScrollView | null