@rific/scroll-view 0.8.3 → 0.9.0

package/src/internal/useScrollHandler.ts

@@ -4,6 +4,7 @@ import { runOnJS, useAnimatedScrollHandler, useSharedValue, withTiming } from 'r
 
 import { ScrollViewContext } from '../ScrollViewContext'
 import { REMOUNT_SYNC_TOLERANCE } from '../useScrollInit'
+import { chromeSettleTarget, chromeTravel } from './chrome'
 import { usesContentInset } from './insetMode'
 
 type UseScrollHandlerOptions = {
@@ -20,7 +21,7 @@ type UseScrollHandlerOptions = {
 }
 
 export function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold = 100, footerFixed, headerFixed, isHorizontal, listGeneration, onRemountSyncRetry, onRemountSynced, remountSyncTarget }: UseScrollHandlerOptions) {
-  const { footerHeightShared, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared } = useContext(ScrollViewContext)
+  const { chromeHosted, chromeWritable, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared, stackHeightShared } = useContext(ScrollViewContext)
   const snapUpAccum = useSharedValue(0)
   const fromBottomBounce = useSharedValue(false)
 
@@ -58,7 +59,12 @@ export function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold
           fromBottomBounce.value = false
         }
         const snapHeader = snapBackHeaderShared.value && !headerFixed
-        const snapFooter = snapBackFooterShared.value && !footerFixed
+        // A hosted footer is one half of a stack that has to slide its full hide distance to clear
+        // the screen; a list that can't scroll that far (short content) would strand the stack half
+        // hidden with no way to finish the job, so it never starts hiding in the first place.
+        const hideable = !chromeHosted || chromeTravel(maxScroll, headerHeightShared.value) >= stackHeightShared.value
+        if (chromeHosted && !hideable && chromeWritable.value && footerOffset.value !== 0) footerOffset.value = 0
+        const snapFooter = snapBackFooterShared.value && !footerFixed && chromeWritable.value && hideable
         if (snapHeader || snapFooter) {
           if (yn <= -headerHeightShared.value) {
             snapUpAccum.value = 0
@@ -68,7 +74,7 @@ export function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold
             snapUpAccum.value = 0
             if (yn >= -headerHeightShared.value + pullSearchHeightShared.value) {
               if (snapHeader) headerOffset.value = Math.max(-headerHeightShared.value, Math.min(0, headerOffset.value - delta))
-              if (snapFooter) footerOffset.value = Math.max(0, Math.min(footerHeightShared.value, footerOffset.value + delta))
+              if (snapFooter) footerOffset.value = Math.max(0, Math.min(stackHeightShared.value, footerOffset.value + delta))
             }
           } else if (delta < 0 && !fromBottomBounce.value) {
             if (yn >= -headerHeightShared.value + pullSearchHeightShared.value) snapUpAccum.value -= delta
@@ -85,20 +91,35 @@ export function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold
         fromBottomBounce.value = false
         snapUpAccum.value = 0
       },
-      onEndDrag: ({ contentOffset: { y }, contentSize: { height: contentHeight }, layoutMeasurement: { height: layoutHeight } }) => {
+      onEndDrag: ({ contentOffset: { y }, contentSize: { height: contentHeight }, layoutMeasurement: { height: layoutHeight }, velocity }) => {
         'worklet'
         if (isHorizontal) return
+        // The 10pt scroll-up latch (snapUpAccum >= 10) has already started animating the footer offset
+        // back to 0; read it before anything below resets it, because settling on the in-flight value
+        // instead could pick "hidden" and reverse a deliberate reveal.
+        const revealing = snapUpAccum.value >= 10
         if (y >= contentHeight - layoutHeight - 10) {
           fromBottomBounce.value = true
           snapUpAccum.value = 0
         }
+        // A drag that released with momentum still to come keeps writing the offset through it, and
+        // settles when that ends; only a release that will genuinely stop here settles now.
+        if (chromeHosted && !footerFixed && chromeWritable.value && (velocity === undefined || Math.abs(velocity.y) < 0.1)) {
+          footerOffset.value = withTiming(revealing ? 0 : chromeSettleTarget(footerOffset.value, stackHeightShared.value), { duration: 200 })
+        }
       },
       onMomentumEnd: () => {
         'worklet'
+        const revealing = snapUpAccum.value >= 10
         fromBottomBounce.value = false
         snapUpAccum.value = 0
+        // Hosted: scroll tracks 1:1, so it can stop with the stack half hidden. The bar is the app's
+        // primary navigation, so it comes to rest fully shown or fully hidden, never cut off.
+        if (chromeHosted && !isHorizontal && !footerFixed && chromeWritable.value) {
+          footerOffset.value = withTiming(revealing ? 0 : chromeSettleTarget(footerOffset.value, stackHeightShared.value), { duration: 200 })
+        }
       }
     },
-    [capturedGeneration, headerFixed, footerFixed, isHorizontal, chipThreshold, listGeneration, onRemountSyncRetry, onRemountSynced, remountSyncTarget]
+    [capturedGeneration, chromeHosted, headerFixed, footerFixed, isHorizontal, chipThreshold, listGeneration, onRemountSyncRetry, onRemountSynced, remountSyncTarget]
   )
 }

package/src/internal/useScrollHandlerJS.ts

@@ -4,6 +4,7 @@ import type { SharedValue } from 'react-native-reanimated'
 import { withTiming } from 'react-native-reanimated'
 
 import { ScrollViewContext } from '../ScrollViewContext'
+import { chromeSettleTarget, chromeTravel } from './chrome'
 import { usesContentInset } from './insetMode'
 
 const REMOUNT_RETRY_TOLERANCE = 1
@@ -36,7 +37,7 @@ export type ScrollHandlerJS = {
 // their next UI-thread frame. This trades a small amount of latency for a plain scrollable that
 // reliably honors the initial `contentOffset` prop on (re)mount, which Animated.FlatList does not.
 export function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThreshold = 100, footerFixed, headerFixed, isHorizontal, jsListGeneration, remountTarget = null, scrollTo }: UseScrollHandlerJSOptions): ScrollHandlerJS {
-  const { footerHeightShared, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared } = useContext(ScrollViewContext)
+  const { chromeHosted, chromeWritable, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared, stackHeightShared } = useContext(ScrollViewContext)
   const snapUpAccum = useRef(0)
   const fromBottomBounce = useRef(false)
   // On a remount, the very first native position after mount isn't reliable — Fabric can skip
@@ -88,7 +89,11 @@ export function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThresho
         fromBottomBounce.current = false
       }
       const snapHeader = snapBackHeaderShared.value && !headerFixed
-      const snapFooter = snapBackFooterShared.value && !footerFixed
+      // See useScrollHandler: a hosted stack that this list can't scroll far enough to fully hide
+      // never starts hiding.
+      const hideable = !chromeHosted || chromeTravel(maxScroll, headerHeightShared.value) >= stackHeightShared.value
+      if (chromeHosted && !hideable && chromeWritable.value && footerOffset.value !== 0) footerOffset.value = 0
+      const snapFooter = snapBackFooterShared.value && !footerFixed && chromeWritable.value && hideable
       if (snapHeader || snapFooter) {
         if (yn <= -headerHeightShared.value) {
           snapUpAccum.current = 0
@@ -98,7 +103,7 @@ export function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThresho
           snapUpAccum.current = 0
           if (yn >= -headerHeightShared.value + pullSearchHeightShared.value) {
             if (snapHeader) headerOffset.value = Math.max(-headerHeightShared.value, Math.min(0, headerOffset.value - delta))
-            if (snapFooter) footerOffset.value = Math.max(0, Math.min(footerHeightShared.value, footerOffset.value + delta))
+            if (snapFooter) footerOffset.value = Math.max(0, Math.min(stackHeightShared.value, footerOffset.value + delta))
           }
         } else if (delta < 0 && !fromBottomBounce.current) {
           if (yn >= -headerHeightShared.value + pullSearchHeightShared.value) snapUpAccum.current -= delta
@@ -110,7 +115,7 @@ export function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThresho
         }
       }
     },
-    [capturedGeneration, chipHidden, chipThreshold, footerFixed, footerHeightShared, footerOffset, headerFixed, headerHeightShared, headerOffset, isHorizontal, jsListGeneration, pullSearchHeightShared, scrollPosition, scrollTo, snapBackFooterShared, snapBackHeaderShared]
+    [capturedGeneration, chipHidden, chipThreshold, chromeHosted, chromeWritable, footerFixed, footerOffset, headerFixed, headerHeightShared, headerOffset, isHorizontal, jsListGeneration, pullSearchHeightShared, scrollPosition, scrollTo, snapBackFooterShared, snapBackHeaderShared, stackHeightShared]
   )
 
   const onScrollBeginDrag = useCallback(() => {
@@ -120,26 +125,45 @@ export function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThresho
 
   const onMomentumScrollBegin = useCallback(() => {}, [])
 
+  // Hosted: scroll tracks 1:1, so it can stop with the stack half hidden; it settles to fully shown
+  // or fully hidden instead, since the bar is the app's primary navigation. `revealing` is whether
+  // the 10pt scroll-up latch has already started animating the offset back to 0 — settling on the
+  // in-flight value instead could pick "hidden" and reverse a deliberate reveal.
+  const settle = useCallback(
+    (revealing: boolean) => {
+      if (!chromeHosted || footerFixed || !chromeWritable.value) return
+      footerOffset.value = withTiming(revealing ? 0 : chromeSettleTarget(footerOffset.value, stackHeightShared.value), { duration: 200 })
+    },
+    [chromeHosted, chromeWritable, footerFixed, footerOffset, stackHeightShared]
+  )
+
   const onScrollEndDrag = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
       if (isHorizontal) return
       const {
         contentOffset: { y },
         contentSize: { height: contentHeight },
-        layoutMeasurement: { height: layoutHeight }
+        layoutMeasurement: { height: layoutHeight },
+        velocity
       } = event.nativeEvent
+      const revealing = snapUpAccum.current >= 10
       if (y >= contentHeight - layoutHeight - 10) {
         fromBottomBounce.current = true
         snapUpAccum.current = 0
       }
+      // A release with momentum still to come keeps writing the offset through it and settles when
+      // that ends; only one that will genuinely stop here settles now.
+      if (velocity === undefined || Math.abs(velocity.y) < 0.1) settle(revealing)
     },
-    [isHorizontal]
+    [isHorizontal, settle]
   )
 
   const onMomentumScrollEnd = useCallback(() => {
+    const revealing = snapUpAccum.current >= 10
     fromBottomBounce.current = false
     snapUpAccum.current = 0
-  }, [])
+    if (!isHorizontal) settle(revealing)
+  }, [isHorizontal, settle])
 
   return { onMomentumScrollBegin, onMomentumScrollEnd, onScroll, onScrollBeginDrag, onScrollEndDrag }
 }

package/src/internal/useScrollList.ts

@@ -25,10 +25,13 @@ export type UseScrollListOptions = {
 export function useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, hideUntilMeasured, isHorizontal, keyboardAware, pullSearchHeight, style }: UseScrollListOptions = {}) {
   const insets = useSafeAreaInsets()
   const keyboardHeight = useKeyboardInset()
-  const { footerAboveKeyboard, footerHeight, footerFixed: contextFooterFixed, headerHeight, headerHeightShared, headerFixed: contextHeaderFixed, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared, tabBarHeight } = useContext(ScrollViewContext)
+  const { chromeHosted, chromeOverhang, footerAboveKeyboard, footerHeight, footerFixed: contextFooterFixed, headerHeight, headerHeightShared, headerFixed: contextHeaderFixed, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared, tabBarHeight } = useContext(ScrollViewContext)
 
   const headerFixed = isHorizontal ? true : (headerFixedProp ?? contextHeaderFixed)
-  const footerFixed = isHorizontal ? true : (footerFixedProp ?? contextFooterFixed)
+  // Hosted, the footer and the bar share ONE offset that the provider's registrar reveals when Footer
+  // Lock turns on — and the registrar only sees the provider-level flag. A per-list override that
+  // turned the handlers off on its own would leave the stack stuck wherever it was hidden.
+  const footerFixed = isHorizontal ? true : chromeHosted ? contextFooterFixed : (footerFixedProp ?? contextFooterFixed)
 
   useEffect(() => {
     pullSearchHeightShared.value = usesContentInset ? (pullSearchHeight ?? 0) : 0
@@ -59,11 +62,25 @@ export function useScrollList({ footerFixed: footerFixedProp, headerFixed: heade
   // footerReserve + keyboardHeight in that case would leave a gap the size of the now-hidden footer
   // between the focused input and the keyboard, so max() reserves only whichever bottom obstruction
   // is actually taller right now.
+  //
+  // Hosted, tabBarHeight is the bar's footprint and it already contains the safe-area inset, so the
+  // base reserve is only what pokes above the bar (chromeOverhang) — not insets.bottom a second
+  // time. Hosted also reserves the screen footer's own height whether or not it is fixed: unlike an
+  // unhosted footer (whose position is a function of scroll, so scrolling to the end always hides
+  // it), a hosted stack settles wherever the last gesture left it, so a revealed footer at the end
+  // of a list would otherwise cover the last rows with no way to scroll them clear. This reserve
+  // stays constant even while the stack is hidden: contentInset can't animate, so the space stays
+  // reserved at the end of the list rather than the list growing as the bar slides away.
+  //
+  // A hosted, keyboard-floating footer pins itself at max(footprint - keyboardHeight, 0) instead of
+  // the full footprint (see ScrollViewFooter), so the bar reserve shrinks the same way.
   const insetGeometry = useMemo(() => {
-    const footerReserve = footerFixed ? footerHeight || insets.bottom : insets.bottom
-    const bottom = (!keyboardAware || (footerFixed && footerAboveKeyboard) ? footerReserve : Math.max(footerReserve, keyboardHeight)) + tabBarHeight
+    const baseReserve = chromeHosted ? chromeOverhang : insets.bottom
+    const footerReserve = chromeHosted ? Math.max(footerHeight ?? 0, baseReserve) : footerFixed ? footerHeight || baseReserve : baseReserve
+    const barReserve = chromeHosted && footerFixed && footerAboveKeyboard ? Math.max(tabBarHeight - keyboardHeight, 0) : tabBarHeight
+    const bottom = (!keyboardAware || (footerFixed && footerAboveKeyboard) ? footerReserve : Math.max(footerReserve, keyboardHeight)) + barReserve
     return { bottom, top: headerHeight ?? 0 }
-  }, [footerAboveKeyboard, footerFixed, footerHeight, insets.bottom, tabBarHeight, headerHeight, keyboardAware, keyboardHeight])
+  }, [chromeHosted, chromeOverhang, footerAboveKeyboard, footerFixed, footerHeight, insets.bottom, tabBarHeight, headerHeight, keyboardAware, keyboardHeight])
   // Outside inset mode the same geometry is applied as content padding instead; contentInset is
   // zeroed (not omitted) so consumers' offset math — scroll-to-top targets, minHeight — stays
   // correct in the raw 0-based coordinate space those platforms actually scroll in.

package/src/useScrollViewChrome.ts

@@ -0,0 +1,41 @@
+import { useContext, useEffect } from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
+import { type AnimatedStyle, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
+
+import { ScrollViewChromeContext } from './ScrollViewChromeContext'
+
+const noop = () => {}
+
+// Animated style for a persistent bar hosted by ScrollViewChromeProvider: translates it by the same
+// shared offset the focused screen's footer uses, so the two hide and reveal together. Outside any
+// host it is a permanent zero translate, so a bar can call this unconditionally.
+//
+// The return type is spelled out with reanimated's PUBLIC AnimatedStyle rather than left inferred:
+// useAnimatedStyle's own inferred type (AnimatedStyleHandle) lives in a private reanimated deep path
+// that the built .d.ts would otherwise import from, which only resolves for the exact reanimated
+// file layout this was built against.
+export const useScrollViewChromeStyle = (): StyleProp<AnimatedStyle<StyleProp<ViewStyle>>> => {
+  const chrome = useContext(ScrollViewChromeContext)
+  const fallback = useSharedValue(0)
+  const offset = chrome?.offset ?? fallback
+  return useAnimatedStyle(() => ({ transform: [{ translateY: offset.value }] }), [offset])
+}
+
+// Holds the bar fully revealed (and stops scroll from hiding it) while `active` is true. Pins are
+// counted, so two independent pinners can't release each other. Inert outside a host.
+export const useScrollViewChromePin = (active: boolean) => {
+  const chrome = useContext(ScrollViewChromeContext)
+  const addPin = chrome?.addPin
+  const removePin = chrome?.removePin
+  useEffect(() => {
+    if (!active || !addPin || !removePin) return undefined
+    addPin()
+    return removePin
+  }, [active, addPin, removePin])
+}
+
+// Returns a function that animates the bar back to fully revealed. Inert outside a host.
+export const useScrollViewChromeReveal = () => {
+  const chrome = useContext(ScrollViewChromeContext)
+  return chrome?.reveal ?? noop
+}