Add onScrolledDownChange

src/components/List/index.tsx

@@ -7,7 +7,9 @@ import {
 } from 'react-native'
 import Animated, {
   type FlatListPropsWithLayout,
+  runOnJS,
   useAnimatedScrollHandler,
+  useSharedValue,
 } from 'react-native-reanimated'
 
 import {useLightbox} from '#/state/lightbox'
@@ -40,6 +42,11 @@ type ListProps<Item> = Omit<FlatListProps<Item>, 'contentOffset'> & {
    * footers. Also applies insets to the scroll indicators.
    */
   footerOffset?: number
+  /**
+   * Configures the point at which `onScrolledDownChange` is called.
+   */
+  didScrollDownThreshold?: number
+  onScrolledDownChange?: (isScrolledDown: boolean) => void
 }
 
 export const List = forwardRef(function List<Item>(
@@ -48,10 +55,20 @@ export const List = forwardRef(function List<Item>(
 ) {
   const t = useTheme()
   const {activeLightbox} = useLightbox()
+  const isScrolledDown = useSharedValue(false)
   const scrollHandlers = useListScrollContext()
   const onScroll = useAnimatedScrollHandler({
     onScroll(e, ctx) {
       scrollHandlers.onScroll?.(e, ctx)
+
+      const didScrollDown =
+        e.contentOffset.y > (props.didScrollDownThreshold ?? 200)
+      if (isScrolledDown.get() !== didScrollDown) {
+        isScrolledDown.set(didScrollDown)
+        if (props.onScrolledDownChange) {
+          runOnJS(props.onScrolledDownChange)(didScrollDown)
+        }
+      }
     },
     onBeginDrag(e, ctx) {
       scrollHandlers.onScrollBeginDrag?.(e, ctx)

src/view/screens/StorybookLists/index.tsx

@@ -38,7 +38,7 @@ const log = (msg: any) => console.log(msg)
 export function Inner() {
   const onScrollWorklet = useListScrollHandler(e => {
     'worklet'
-    runOnJS(log)(`Scroll Y: ${e.contentOffset.y}`)
+    runOnJS(log)(`scroll ${e.contentOffset.y}`)
   }, [])
 
   return (
@@ -48,6 +48,9 @@ export function Inner() {
           data={items}
           headerOffset={100}
           footerOffset={100}
+          onScrolledDownChange={scrolledDown => {
+            console.log(`Scrolled down: ${scrolledDown}`)
+          }}
           renderItem={({item}) => (
             <View style={[a.p_md, a.border_b]}>
               <Text>{item.title}</Text>