Add onScrolledDownChange

src/view/com/feeds/FeedPage.tsx

@@ -52,7 +52,8 @@ export function FeedPage({
   const {isDesktop} = useWebMediaQueries()
   const queryClient = useQueryClient()
   const {openComposer} = useComposerControls()
-  const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll()
+  const [isScrolledDown, setIsScrolledDown] = React.useState(false)
+  const [onMainScroll, resetMainScroll] = useOnMainScroll()
   const {screen, track} = useAnalytics()
   const headerOffset = useHeaderOffset()
   const scrollElRef = React.useRef<ListMethods>(null)
@@ -173,6 +174,7 @@ export function FeedPage({
         pollInterval={POLL_FREQ}
         scrollElRef={scrollElRef}
         onScroll={onMainScroll}
+        onScrolledDownChange={setIsScrolledDown}
         onHasNew={setHasNew}
         scrollEventThrottle={1}
         renderEmptyState={renderEmptyState}

src/view/com/notifications/Feed.tsx

@@ -25,11 +25,13 @@ export function Feed({
   scrollElRef,
   onPressTryAgain,
   onScroll,
+  onScrolledDownChange,
   ListHeaderComponent,
 }: {
   scrollElRef?: ListRef
   onPressTryAgain?: () => void
   onScroll?: OnScrollHandler
+  onScrolledDownChange: (isScrolledDown: boolean) => void
   ListHeaderComponent?: () => JSX.Element
 }) {
   const pal = usePalette('default')
@@ -166,6 +168,7 @@ export function Feed({
         onEndReached={onEndReached}
         onEndReachedThreshold={0.6}
         onScroll={scrollHandler}
+        onScrolledDownChange={onScrolledDownChange}
         scrollEventThrottle={1}
         contentContainerStyle={s.contentContainer}
         // @ts-ignore our .web version only -prf

src/view/com/posts/Feed.tsx

@@ -46,6 +46,7 @@ let Feed = ({
   pollInterval,
   scrollElRef,
   onScroll,
+  onScrolledDownChange,
   onHasNew,
   scrollEventThrottle,
   renderEmptyState,
@@ -65,6 +66,7 @@ let Feed = ({
   scrollElRef?: ListRef
   onHasNew?: (v: boolean) => void
   onScroll?: OnScrollHandler
+  onScrolledDownChange?: (isScrolledDown: boolean) => void
   scrollEventThrottle?: number
   renderEmptyState: () => JSX.Element
   renderEndOfFeed?: () => JSX.Element
@@ -295,6 +297,7 @@ let Feed = ({
         }}
         style={{paddingTop: headerOffset}}
         onScroll={onScroll != null ? scrollHandler : undefined}
+        onScrolledDownChange={onScrolledDownChange}
         scrollEventThrottle={scrollEventThrottle}
         indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
         onEndReached={onEndReached}

src/view/com/util/List.tsx

@@ -1,13 +1,34 @@
-import React from 'react'
+import React, {useState} from 'react'
 import {FlatListProps} from 'react-native'
 import {FlatList_INTERNAL} from './Views'
+import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 
 export type ListMethods = FlatList_INTERNAL
-export type ListProps<ItemT> = FlatListProps<ItemT>
+export type ListProps<ItemT> = FlatListProps<ItemT> & {
+  onScrolledDownChange?: (isScrolledDown: boolean) => void
+}
 export type ListRef = React.MutableRefObject<FlatList_INTERNAL | null>
 
-function ListImpl<ItemT>(props: ListProps<ItemT>, ref: React.Ref<ListMethods>) {
-  return <FlatList_INTERNAL {...props} ref={ref} />
+const SCROLLED_DOWN_LIMIT = 200
+
+function ListImpl<ItemT>(
+  {onScrolledDownChange, ...props}: ListProps<ItemT>,
+  ref: React.Ref<ListMethods>,
+) {
+  const [isScrolledDown, setIsScrolledDown] = useState(false)
+
+  // TODO: This ignores the passed-in onScroll completely.
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll(e) {
+      const didScrollDown = e.contentOffset.y > SCROLLED_DOWN_LIMIT
+      if (isScrolledDown !== didScrollDown) {
+        setIsScrolledDown(didScrollDown)
+        onScrolledDownChange?.(didScrollDown)
+      }
+    },
+  })
+
+  return <FlatList_INTERNAL {...props} onScroll={scrollHandler} ref={ref} />
 }
 
 export const List = React.forwardRef(ListImpl) as <ItemT>(