@rific/scroll-view 0.8.2 → 0.9.0

package/dist/index.js

@@ -34,6 +34,7 @@ __export(index_exports, {
   FlatList: () => FlatList,
   PullSearch: () => PullSearch,
   ScrollView: () => ScrollView,
+  ScrollViewChromeProvider: () => ScrollViewChromeProvider,
   ScrollViewContext: () => ScrollViewContext,
   ScrollViewFooter: () => ScrollViewFooter,
   ScrollViewHeader: () => ScrollViewHeader,
@@ -46,6 +47,9 @@ __export(index_exports, {
   scrollViewReducer: () => scrollViewReducer,
   useKeyboardInset: () => useKeyboardInset,
   useScrollView: () => useScrollView,
+  useScrollViewChromePin: () => useScrollViewChromePin,
+  useScrollViewChromeReveal: () => useScrollViewChromeReveal,
+  useScrollViewChromeStyle: () => useScrollViewChromeStyle,
   useScrollViewSettings: () => useScrollViewSettings
 });
 module.exports = __toCommonJS(index_exports);
@@ -90,6 +94,9 @@ var import_react_native_reanimated3 = require("react-native-reanimated");
 var import_react = require("react");
 var ScrollViewContext = (0, import_react.createContext)({
   blur: true,
+  chromeHosted: false,
+  chromeOverhang: 0,
+  chromeWritable: null,
   footerAboveKeyboard: false,
   footerHeight: null,
   footerHeightShared: null,
@@ -120,6 +127,7 @@ var ScrollViewContext = (0, import_react.createContext)({
   },
   snapBackFooterShared: null,
   snapBackHeaderShared: null,
+  stackHeightShared: null,
   tabBarHeight: 0
 });
 
@@ -311,9 +319,20 @@ function useScrollInit({ listHeaderComponent, onMomentumScrollEnd: externalMomen
   return { activeListHeader, handleMomentumScrollEnd, handleScrollBeginDrag, handleScrollEndDrag, hiddenHeader, onRemountSyncRetry, onRemountSynced, pullSearchMinHeight: pullSearchHeight ?? 0, remountSyncTarget, remountTarget, scrollReady };
 }
 
+// src/internal/chrome.ts
+var CHROME_SLACK = 2;
+var chromeTravel = (maxScroll, headerHeight) => {
+  "worklet";
+  return usesContentInset ? maxScroll + headerHeight : maxScroll;
+};
+var chromeSettleTarget = (offset, stackHeight) => {
+  "worklet";
+  return offset > stackHeight / 2 ? stackHeight : 0;
+};
+
 // src/internal/useScrollHandler.ts
 function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold = 100, footerFixed, headerFixed, isHorizontal, listGeneration, onRemountSyncRetry, onRemountSynced, remountSyncTarget }) {
-  const { footerHeightShared, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared } = (0, import_react3.useContext)(ScrollViewContext);
+  const { chromeHosted, chromeWritable, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared, stackHeightShared } = (0, import_react3.useContext)(ScrollViewContext);
   const snapUpAccum = (0, import_react_native_reanimated3.useSharedValue)(0);
   const fromBottomBounce = (0, import_react_native_reanimated3.useSharedValue)(false);
   return (0, import_react_native_reanimated3.useAnimatedScrollHandler)(
@@ -348,7 +367,9 @@ function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold = 100,
           fromBottomBounce.value = false;
         }
         const snapHeader = snapBackHeaderShared.value && !headerFixed;
-        const snapFooter = snapBackFooterShared.value && !footerFixed;
+        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;
@@ -358,7 +379,7 @@ function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold = 100,
             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;
@@ -375,21 +396,29 @@ function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold = 100,
         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;
+        const revealing = snapUpAccum.value >= 10;
         if (y >= contentHeight - layoutHeight - 10) {
           fromBottomBounce.value = true;
           snapUpAccum.value = 0;
         }
+        if (chromeHosted && !footerFixed && chromeWritable.value && (velocity === void 0 || Math.abs(velocity.y) < 0.1)) {
+          footerOffset.value = (0, import_react_native_reanimated3.withTiming)(revealing ? 0 : chromeSettleTarget(footerOffset.value, stackHeightShared.value), { duration: 200 });
+        }
       },
       onMomentumEnd: () => {
         "worklet";
+        const revealing = snapUpAccum.value >= 10;
         fromBottomBounce.value = false;
         snapUpAccum.value = 0;
+        if (chromeHosted && !isHorizontal && !footerFixed && chromeWritable.value) {
+          footerOffset.value = (0, import_react_native_reanimated3.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]
   );
 }
 
@@ -431,18 +460,20 @@ var CHIP_SLIDE = 48;
 function useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, hideUntilMeasured, isHorizontal, keyboardAware, pullSearchHeight, style } = {}) {
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
   const keyboardHeight = useKeyboardInset();
-  const { footerAboveKeyboard, footerHeight, footerFixed: contextFooterFixed, headerHeight, headerHeightShared, headerFixed: contextHeaderFixed, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared, tabBarHeight } = (0, import_react5.useContext)(ScrollViewContext);
+  const { chromeHosted, chromeOverhang, footerAboveKeyboard, footerHeight, footerFixed: contextFooterFixed, headerHeight, headerHeightShared, headerFixed: contextHeaderFixed, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared, tabBarHeight } = (0, import_react5.useContext)(ScrollViewContext);
   const headerFixed = isHorizontal ? true : headerFixedProp ?? contextHeaderFixed;
-  const footerFixed = isHorizontal ? true : footerFixedProp ?? contextFooterFixed;
+  const footerFixed = isHorizontal ? true : chromeHosted ? contextFooterFixed : footerFixedProp ?? contextFooterFixed;
   (0, import_react5.useEffect)(() => {
     pullSearchHeightShared.value = usesContentInset ? pullSearchHeight ?? 0 : 0;
   }, [pullSearchHeight, pullSearchHeightShared]);
   const containerStyle = (0, import_react5.useMemo)(() => headerHeight === null ? [{ flex: 1, opacity: hideUntilMeasured ? 0 : 1 }, style] : [import_react_native5.StyleSheet.absoluteFill, style], [headerHeight, hideUntilMeasured, style]);
   const insetGeometry = (0, import_react5.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]);
   const contentInset = usesContentInset ? insetGeometry : ZERO_INSET;
   const contentPadding = (0, import_react5.useMemo)(() => usesContentInset || isHorizontal ? null : { paddingBottom: insetGeometry.bottom, paddingTop: insetGeometry.top }, [insetGeometry, isHorizontal]);
   const [startedWithHeader] = (0, import_react5.useState)(headerHeight !== null);
@@ -631,7 +662,7 @@ var import_react_native_reanimated8 = require("react-native-reanimated");
 var REMOUNT_RETRY_TOLERANCE = 1;
 var REMOUNT_RETRY_MAX_ATTEMPTS = 8;
 function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThreshold = 100, footerFixed, headerFixed, isHorizontal, jsListGeneration, remountTarget = null, scrollTo }) {
-  const { footerHeightShared, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared } = (0, import_react8.useContext)(ScrollViewContext);
+  const { chromeHosted, chromeWritable, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared, stackHeightShared } = (0, import_react8.useContext)(ScrollViewContext);
   const snapUpAccum = (0, import_react8.useRef)(0);
   const fromBottomBounce = (0, import_react8.useRef)(false);
   const pendingRemountTarget = (0, import_react8.useRef)(remountTarget);
@@ -675,7 +706,9 @@ function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThreshold = 10
         fromBottomBounce.current = false;
       }
       const snapHeader = snapBackHeaderShared.value && !headerFixed;
-      const snapFooter = snapBackFooterShared.value && !footerFixed;
+      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;
@@ -685,7 +718,7 @@ function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThreshold = 10
           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;
@@ -697,7 +730,7 @@ function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThreshold = 10
         }
       }
     },
-    [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 = (0, import_react8.useCallback)(() => {
     fromBottomBounce.current = false;
@@ -705,25 +738,37 @@ function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThreshold = 10
   }, []);
   const onMomentumScrollBegin = (0, import_react8.useCallback)(() => {
   }, []);
+  const settle = (0, import_react8.useCallback)(
+    (revealing) => {
+      if (!chromeHosted || footerFixed || !chromeWritable.value) return;
+      footerOffset.value = (0, import_react_native_reanimated8.withTiming)(revealing ? 0 : chromeSettleTarget(footerOffset.value, stackHeightShared.value), { duration: 200 });
+    },
+    [chromeHosted, chromeWritable, footerFixed, footerOffset, stackHeightShared]
+  );
   const onScrollEndDrag = (0, import_react8.useCallback)(
     (event) => {
       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;
       }
+      if (velocity === void 0 || Math.abs(velocity.y) < 0.1) settle(revealing);
     },
-    [isHorizontal]
+    [isHorizontal, settle]
   );
   const onMomentumScrollEnd = (0, import_react8.useCallback)(() => {
+    const revealing = snapUpAccum.current >= 10;
     fromBottomBounce.current = false;
     snapUpAccum.current = 0;
-  }, []);
+    if (!isHorizontal) settle(revealing);
+  }, [isHorizontal, settle]);
   return { onMomentumScrollBegin, onMomentumScrollEnd, onScroll, onScrollBeginDrag, onScrollEndDrag };
 }
 
@@ -1052,13 +1097,47 @@ var ScrollViewInner = ({ chipProps, chipThreshold, children, contentContainerSty
 };
 var ScrollView = (0, import_react11.memo)(ScrollViewInner);
 
+// src/ScrollViewChromeProvider.tsx
+var import_react13 = require("react");
+var import_react_native_reanimated11 = require("react-native-reanimated");
+
+// src/ScrollViewChromeContext.ts
+var import_react12 = require("react");
+var ScrollViewChromeHostContext = (0, import_react12.createContext)(null);
+var ScrollViewChromeContext = (0, import_react12.createContext)(null);
+
+// src/ScrollViewChromeProvider.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var REVEAL_DURATION = 200;
+var alwaysActive = () => true;
+var ScrollViewChromeProvider = ({ children, footprint, overhang = 0, snapBack = true, useIsActive = alwaysActive }) => {
+  const offset = (0, import_react_native_reanimated11.useSharedValue)(0);
+  const [claims, setClaims] = (0, import_react13.useState)([]);
+  const [pins, setPins] = (0, import_react13.useState)(0);
+  const activeId = claims.length > 0 ? claims[claims.length - 1] : null;
+  const pinned = pins > 0;
+  const claim = (0, import_react13.useCallback)((id) => setClaims((current) => [...current.filter((c) => c !== id), id]), []);
+  const release = (0, import_react13.useCallback)((id) => setClaims((current) => current.filter((c) => c !== id)), []);
+  const addPin = (0, import_react13.useCallback)(() => setPins((current) => current + 1), []);
+  const removePin = (0, import_react13.useCallback)(() => setPins((current) => Math.max(0, current - 1)), []);
+  const reveal = (0, import_react13.useCallback)(() => {
+    offset.value = (0, import_react_native_reanimated11.withTiming)(0, { duration: REVEAL_DURATION });
+  }, [offset]);
+  (0, import_react13.useEffect)(() => {
+    reveal();
+  }, [activeId, pinned, reveal]);
+  const host = (0, import_react13.useMemo)(() => ({ activeId, claim, footprint, offset, overhang, pinned, release, reveal, snapBack, useIsActive }), [activeId, claim, footprint, offset, overhang, pinned, release, reveal, snapBack, useIsActive]);
+  const chrome = (0, import_react13.useMemo)(() => ({ addPin, footprint, offset, overhang, removePin, reveal }), [addPin, footprint, offset, overhang, removePin, reveal]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ScrollViewChromeContext.Provider, { value: chrome, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ScrollViewChromeHostContext.Provider, { value: host, children }) });
+};
+
 // src/ScrollViewFooter.tsx
 var import_auto_paper3 = require("@rific/auto-paper");
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_react_native11 = require("react-native");
-var import_react_native_reanimated11 = __toESM(require("react-native-reanimated"));
+var import_react_native_reanimated12 = __toESM(require("react-native-reanimated"));
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
-var import_jsx_runtime8 = (
+var import_jsx_runtime9 = (
   // bottom: tabBarHeight (not the styles.footer default of 0) - a consuming app's own persistent
   // tab bar (a fixture outside this package's header/footer concepts entirely, same as
   // useScrollList's content-inset reservation) sits below this at the true screen bottom, so this
@@ -1066,14 +1145,14 @@ var import_jsx_runtime8 = (
   require("react/jsx-runtime")
 );
 var ScrollViewFooter = ({ children, style }) => {
-  const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared, tabBarHeight } = (0, import_react12.useContext)(ScrollViewContext);
+  const { blur, chromeHosted, chromeOverhang, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared, stackHeightShared, tabBarHeight } = (0, import_react14.useContext)(ScrollViewContext);
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   const keyboardHeight = useKeyboardInset();
-  const setFooterHeightRef = (0, import_react12.useRef)(setFooterHeight);
-  (0, import_react12.useEffect)(() => {
+  const setFooterHeightRef = (0, import_react14.useRef)(setFooterHeight);
+  (0, import_react14.useEffect)(() => {
     setFooterHeightRef.current = setFooterHeight;
   });
-  (0, import_react12.useEffect)(
+  (0, import_react14.useEffect)(
     () => () => {
       setFooterHeightRef.current(null);
     },
@@ -1086,19 +1165,29 @@ var ScrollViewFooter = ({ children, style }) => {
   }) => {
     if (footerHeight !== height) setFooterHeight(height);
   };
-  const footerStyle = (0, import_react_native_reanimated11.useAnimatedStyle)(() => {
+  const footerStyle = (0, import_react_native_reanimated12.useAnimatedStyle)(() => {
+    if (chromeHosted) return { transform: [{ translateY: Math.min(Math.max(footerOffset.value, 0), stackHeightShared.value) }] };
     if (footerFixed) return { transform: [{ translateY: 0 }] };
     if (snapBackFooterShared.value) return { transform: [{ translateY: footerOffset.value }] };
     const effective = scrollPosition.value + headerHeightShared.value - pullSearchHeightShared.value;
     if (effective <= 0) return { transform: [{ translateY: 0 }] };
     return { transform: [{ translateY: Math.min(effective, footerHeight ?? 0) }] };
-  }, [footerHeight, footerFixed, headerHeightShared, pullSearchHeightShared, scrollPosition, snapBackFooterShared, footerOffset]);
+  }, [chromeHosted, footerHeight, footerFixed, headerHeightShared, pullSearchHeightShared, scrollPosition, snapBackFooterShared, footerOffset, stackHeightShared]);
   const containerPaddingBottom = footerFixed && footerAboveKeyboard ? keyboardHeight : 0;
-  const rowPaddingBottom = footerFixed && footerAboveKeyboard ? Math.max(insets.bottom - keyboardHeight, 0) : insets.bottom;
+  const rowRef = (0, import_react14.useRef)(null);
+  (0, import_react14.useLayoutEffect)(() => {
+    if (import_react_native11.Platform.OS !== "web" || footerHeight) return;
+    const height = rowRef.current?.offsetHeight;
+    if (typeof height !== "number" || height <= 0) return;
+    setFooterHeight(height + containerPaddingBottom);
+  }, []);
+  const bottomPadding = chromeHosted ? chromeOverhang : insets.bottom;
+  const rowPaddingBottom = footerFixed && footerAboveKeyboard ? Math.max(bottomPadding - keyboardHeight, 0) : bottomPadding;
+  const footerBottom = chromeHosted && footerFixed && footerAboveKeyboard ? Math.max(tabBarHeight - keyboardHeight, 0) : tabBarHeight;
   const { paddingBottom: consumerPaddingBottom, ...restStyle } = style ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native_reanimated11.default.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [styles6.footer, { bottom: tabBarHeight, paddingBottom: containerPaddingBottom }, footerStyle], children: [
-    (footerHeight ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_auto_paper3.BlurView, { blur, style: import_react_native11.StyleSheet.absoluteFill }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native11.View, { style: [styles6.row, restStyle, { paddingBottom: rowPaddingBottom + (typeof consumerPaddingBottom === "number" ? consumerPaddingBottom : 0) }], children })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native_reanimated12.default.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [styles6.footer, { bottom: footerBottom, paddingBottom: containerPaddingBottom }, footerStyle], children: [
+    (footerHeight ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_auto_paper3.BlurView, { blur, style: import_react_native11.StyleSheet.absoluteFill }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native11.View, { ref: rowRef, style: [styles6.row, restStyle, { paddingBottom: rowPaddingBottom + (typeof consumerPaddingBottom === "number" ? consumerPaddingBottom : 0) }], children })
   ] });
 };
 var styles6 = import_react_native11.StyleSheet.create({
@@ -1108,21 +1197,21 @@ var styles6 = import_react_native11.StyleSheet.create({
 
 // src/ScrollViewHeader.tsx
 var import_auto_paper4 = require("@rific/auto-paper");
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_react_native12 = require("react-native");
 var import_react_native_paper4 = require("react-native-paper");
-var import_react_native_reanimated12 = __toESM(require("react-native-reanimated"));
+var import_react_native_reanimated13 = __toESM(require("react-native-reanimated"));
 var import_react_native_safe_area_context4 = require("react-native-safe-area-context");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var ActionBg = ({ blur, style }) => blur ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: [import_react_native12.StyleSheet.absoluteFill, styles7.actionBg, style], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_auto_paper4.BlurView, { blur: true, style: import_react_native12.StyleSheet.absoluteFill }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: [import_react_native12.StyleSheet.absoluteFill, styles7.actionBg, style], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper4.Surface, { style: import_react_native12.StyleSheet.absoluteFill, elevation: 1, children: null }) });
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ActionBg = ({ blur, style }) => blur ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: [import_react_native12.StyleSheet.absoluteFill, styles7.actionBg, style], children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_auto_paper4.BlurView, { blur: true, style: import_react_native12.StyleSheet.absoluteFill }) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: [import_react_native12.StyleSheet.absoluteFill, styles7.actionBg, style], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper4.Surface, { style: import_react_native12.StyleSheet.absoluteFill, elevation: 1, children: null }) });
 var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAccessibilityLabel, backActionFixed, caption, centerContent, children, iconSize, style, title, topInset = true, trailingAction, trailingActionFixed = true }) => {
-  const { blur, headerHeight, headerFixed, headerHeightShared, headerOffset, progress, progressing, pullSearchHeightShared, scrollPosition, setHeaderHeight, snapBackHeaderShared } = (0, import_react13.useContext)(ScrollViewContext);
-  const { settings } = (0, import_react13.useContext)(ScrollViewSettingsContext);
+  const { blur, headerHeight, headerFixed, headerHeightShared, headerOffset, progress, progressing, pullSearchHeightShared, scrollPosition, setHeaderHeight, snapBackHeaderShared } = (0, import_react15.useContext)(ScrollViewContext);
+  const { settings } = (0, import_react15.useContext)(ScrollViewSettingsContext);
   const effectiveBackActionFixed = backActionFixed ?? settings.backActionFixed;
   const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
   const theme = (0, import_react_native_paper4.useTheme)();
   const top = topInset ? insets.top : 0;
-  const measuredShared = (0, import_react_native_reanimated12.useSharedValue)(false);
+  const measuredShared = (0, import_react_native_reanimated13.useSharedValue)(false);
   const handleLayout = ({
     nativeEvent: {
       layout: { height }
@@ -1131,24 +1220,32 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
     measuredShared.value = true;
     if (headerHeight !== height) setHeaderHeight(height);
   };
+  const contentRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useLayoutEffect)(() => {
+    if (import_react_native12.Platform.OS !== "web" || headerHeight) return;
+    const height = contentRef.current?.offsetHeight;
+    if (typeof height !== "number" || height <= 0) return;
+    measuredShared.value = true;
+    setHeaderHeight(height);
+  }, []);
   const actionMargin = 4;
   const contentMinHeight = actionSize + 2 * actionMargin;
   const unmeasuredHeight = top + contentMinHeight;
-  const translateStyle = (0, import_react_native_reanimated12.useAnimatedStyle)(() => {
+  const translateStyle = (0, import_react_native_reanimated13.useAnimatedStyle)(() => {
     if (headerFixed) return { transform: [{ translateY: 0 }] };
     if (snapBackHeaderShared.value) return { transform: [{ translateY: headerOffset.value }] };
     const effective = scrollPosition.value + headerHeightShared.value - pullSearchHeightShared.value;
     if (effective <= 0) return { transform: [{ translateY: 0 }] };
     return { transform: [{ translateY: -effective }] };
   }, [headerFixed, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared]);
-  const blurStyle = (0, import_react_native_reanimated12.useAnimatedStyle)(() => {
+  const blurStyle = (0, import_react_native_reanimated13.useAnimatedStyle)(() => {
     if (!measuredShared.value) return { height: unmeasuredHeight };
     if (!headerHeightShared.value) return { height: 0 };
     if (headerFixed) return { height: headerHeightShared.value };
     const translateY = snapBackHeaderShared.value ? headerOffset.value : -Math.max(0, scrollPosition.value + headerHeightShared.value - pullSearchHeightShared.value);
     return { height: Math.max(headerHeightShared.value + translateY, top) };
   }, [headerFixed, top, unmeasuredHeight, measuredShared, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared]);
-  const progressStyle = (0, import_react_native_reanimated12.useAnimatedStyle)(() => {
+  const progressStyle = (0, import_react_native_reanimated13.useAnimatedStyle)(() => {
     const h = headerHeightShared.value;
     if (headerFixed) return { top: h };
     const slide = snapBackHeaderShared.value ? -headerOffset.value : Math.max(0, scrollPosition.value + h - pullSearchHeightShared.value);
@@ -1159,32 +1256,32 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
   const actionShadow = { borderRadius: actionSize / 2, elevation: 2, shadowColor: "#000", shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.15, shadowRadius: 2 };
   const leadingStyle = { alignItems: "center", height: actionSize, justifyContent: "center", left: actionMargin, position: "absolute", top: actionTop, width: actionSize, zIndex: 3, ...actionShadow };
   const trailingStyle = { alignItems: "center", height: actionSize, justifyContent: "center", position: "absolute", right: actionMargin, top: actionTop, width: actionSize, zIndex: 3, ...actionShadow };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_reanimated12.default.View, { pointerEvents: "none", style: [styles7.blur, blurStyle], children: headerHeight !== 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_auto_paper4.BlurView, { blur, style: [styles7.blurInner, { height: headerHeight ?? unmeasuredHeight }] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native_reanimated12.default.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [headerHeight === null ? styles7.headerInit : styles7.header, translateStyle], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: [{ paddingTop: top }, style], children: children ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native12.View, { style: [styles7.content, { minHeight: contentMinHeight }], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: styles7.side }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: styles7.spacer }),
-        (centerContent || title || caption) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: [import_react_native12.StyleSheet.absoluteFill, styles7.titleContainer], pointerEvents: centerContent ? "box-none" : "none", children: centerContent ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.Text, { numberOfLines: 1, style: [styles7.title, { color: theme.colors.onSurface }], children: title }),
-          caption && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.Text, { numberOfLines: 1, style: [styles7.caption, { color: theme.colors.onSurfaceVariant }], children: caption })
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_reanimated13.default.View, { pointerEvents: "none", style: [styles7.blur, blurStyle], children: headerHeight !== 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_auto_paper4.BlurView, { blur, style: [styles7.blurInner, { height: headerHeight ?? unmeasuredHeight }] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native_reanimated13.default.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [headerHeight === null ? styles7.headerInit : styles7.header, translateStyle], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { ref: contentRef, style: [{ paddingTop: top }, style], children: children ?? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: [styles7.content, { minHeight: contentMinHeight }], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: styles7.side }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: styles7.spacer }),
+        (centerContent || title || caption) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: [import_react_native12.StyleSheet.absoluteFill, styles7.titleContainer], pointerEvents: centerContent ? "box-none" : "none", children: centerContent ?? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.Text, { numberOfLines: 1, style: [styles7.title, { color: theme.colors.onSurface }], children: title }),
+          caption && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.Text, { numberOfLines: 1, style: [styles7.caption, { color: theme.colors.onSurfaceVariant }], children: caption })
         ] }) })
       ] }) }),
-      !blur && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: [styles7.divider, { backgroundColor: theme.colors.outlineVariant }] })
+      !blur && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: [styles7.divider, { backgroundColor: theme.colors.outlineVariant }] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_reanimated12.default.View, { pointerEvents: "none", style: [styles7.progress, progressStyle], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper4.ProgressBar, { indeterminate: progress === null, visible: progressing, progress: progress ?? void 0 }) }),
-    backAction && (effectiveBackActionFixed ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native_reanimated12.default.View, { style: leadingStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ActionBg, { blur, style: actionStyle }),
-      typeof backAction === "function" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper4.Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native_reanimated12.default.View, { style: [leadingStyle, translateStyle], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ActionBg, { blur, style: actionStyle }),
-      typeof backAction === "function" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper4.Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_reanimated13.default.View, { pointerEvents: "none", style: [styles7.progress, progressStyle], children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper4.ProgressBar, { indeterminate: progress === null, visible: progressing, progress: progress ?? void 0 }) }),
+    backAction && (effectiveBackActionFixed ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native_reanimated13.default.View, { style: leadingStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ActionBg, { blur, style: actionStyle }),
+      typeof backAction === "function" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper4.Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native_reanimated13.default.View, { style: [leadingStyle, translateStyle], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ActionBg, { blur, style: actionStyle }),
+      typeof backAction === "function" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper4.Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
     ] })),
-    trailingAction && (trailingActionFixed ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native12.View, { style: trailingStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ActionBg, { blur, style: actionStyle }),
+    trailingAction && (trailingActionFixed ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: trailingStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ActionBg, { blur, style: actionStyle }),
       trailingAction
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native_reanimated12.default.View, { style: [trailingStyle, translateStyle], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ActionBg, { blur, style: actionStyle }),
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native_reanimated13.default.View, { style: [trailingStyle, translateStyle], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ActionBg, { blur, style: actionStyle }),
       trailingAction
     ] }))
   ] });
@@ -1207,56 +1304,100 @@ var styles7 = import_react_native12.StyleSheet.create({
 
 // src/ScrollViewProvider.tsx
 var import_auto_paper5 = require("@rific/auto-paper");
-var import_react14 = require("react");
+var import_react17 = require("react");
 var import_react_native13 = require("react-native");
-var import_react_native_reanimated13 = require("react-native-reanimated");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard = false, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight = 0 }) => {
-  const { settings } = (0, import_react14.useContext)(ScrollViewSettingsContext);
+var import_react_native_reanimated14 = require("react-native-reanimated");
+
+// src/internal/ChromeRegistrar.tsx
+var import_react16 = require("react");
+var ChromeRegistrar = ({ footerFixed, host, writable }) => {
+  const id = (0, import_react16.useId)();
+  const active = host.useIsActive();
+  const { activeId, claim, pinned, release, reveal } = host;
+  (0, import_react16.useEffect)(() => {
+    if (!active) return void 0;
+    claim(id);
+    return () => release(id);
+  }, [active, claim, id, release]);
+  const owner = activeId === id;
+  (0, import_react16.useEffect)(() => {
+    writable.value = owner && !pinned;
+  }, [owner, pinned, writable]);
+  (0, import_react16.useEffect)(() => {
+    if (owner && footerFixed) reveal();
+  }, [footerFixed, owner, reveal]);
+  return null;
+};
+
+// src/ScrollViewProvider.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ScrollViewProvider = ({ blur, chrome, children, fixed = false, footerAboveKeyboard = false, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight = 0 }) => {
+  const { settings } = (0, import_react17.useContext)(ScrollViewSettingsContext);
+  const enclosingHost = (0, import_react17.useContext)(ScrollViewChromeHostContext);
+  const chromeHost = chrome === false ? null : enclosingHost;
+  const chromeHosted = chromeHost !== null;
+  const chromeFootprint = chromeHost?.footprint ?? 0;
+  const chromeOverhang = chromeHost?.overhang ?? 0;
+  const chromeSnapBack = chromeHost?.snapBack ?? false;
   const effectiveBlur = (0, import_auto_paper5.useBlur)(blur);
   const effectiveSnapBack = snapBack ?? settings.snapBack;
   const effectiveSnapBackHeader = snapBackHeader ?? settings.snapBackHeader;
   const effectiveSnapBackFooter = snapBackFooter ?? settings.snapBackFooter;
-  const [headerHeight, setHeaderHeightState] = (0, import_react14.useState)(null);
-  const [footerHeight, setFooterHeightState] = (0, import_react14.useState)(null);
-  const [progress, setProgress] = (0, import_react14.useState)(null);
-  const [progressing, setProgressing] = (0, import_react14.useState)(false);
-  const scrollPosition = (0, import_react_native_reanimated13.useSharedValue)(0);
-  const listGeneration = (0, import_react_native_reanimated13.useSharedValue)(0);
-  const jsListGeneration = (0, import_react14.useRef)(0);
-  const headerHeightShared = (0, import_react_native_reanimated13.useSharedValue)(0);
-  const footerHeightShared = (0, import_react_native_reanimated13.useSharedValue)(0);
-  const headerOffset = (0, import_react_native_reanimated13.useSharedValue)(0);
-  const footerOffset = (0, import_react_native_reanimated13.useSharedValue)(0);
-  const pullSearchHeightShared = (0, import_react_native_reanimated13.useSharedValue)(0);
-  const snapBackHeaderShared = (0, import_react_native_reanimated13.useSharedValue)(false);
-  const snapBackFooterShared = (0, import_react_native_reanimated13.useSharedValue)(false);
-  (0, import_react14.useEffect)(() => {
+  const [headerHeight, setHeaderHeightState] = (0, import_react17.useState)(null);
+  const [footerHeight, setFooterHeightState] = (0, import_react17.useState)(null);
+  const [progress, setProgress] = (0, import_react17.useState)(null);
+  const [progressing, setProgressing] = (0, import_react17.useState)(false);
+  const scrollPosition = (0, import_react_native_reanimated14.useSharedValue)(0);
+  const listGeneration = (0, import_react_native_reanimated14.useSharedValue)(0);
+  const jsListGeneration = (0, import_react17.useRef)(0);
+  const headerHeightShared = (0, import_react_native_reanimated14.useSharedValue)(0);
+  const footerHeightShared = (0, import_react_native_reanimated14.useSharedValue)(0);
+  const headerOffset = (0, import_react_native_reanimated14.useSharedValue)(0);
+  const ownFooterOffset = (0, import_react_native_reanimated14.useSharedValue)(0);
+  const ownStackHeight = (0, import_react_native_reanimated14.useSharedValue)(0);
+  const footerOffset = chromeHost ? chromeHost.offset : ownFooterOffset;
+  const chromeWritable = (0, import_react_native_reanimated14.useSharedValue)(!chromeHosted);
+  (0, import_react17.useEffect)(() => {
+    if (!chromeHosted) chromeWritable.value = true;
+  }, [chromeHosted, chromeWritable]);
+  const revealChrome = chromeHost?.reveal;
+  const stackHeightShared = chromeHosted ? ownStackHeight : footerHeightShared;
+  const pullSearchHeightShared = (0, import_react_native_reanimated14.useSharedValue)(0);
+  const snapBackHeaderShared = (0, import_react_native_reanimated14.useSharedValue)(false);
+  const snapBackFooterShared = (0, import_react_native_reanimated14.useSharedValue)(false);
+  (0, import_react17.useEffect)(() => {
     snapBackHeaderShared.value = effectiveSnapBackHeader ?? effectiveSnapBack;
-    snapBackFooterShared.value = effectiveSnapBackFooter ?? effectiveSnapBack;
-  }, [effectiveSnapBack, effectiveSnapBackFooter, effectiveSnapBackHeader, snapBackFooterShared, snapBackHeaderShared]);
-  const setHeaderHeight = (0, import_react14.useCallback)(
-    (h) => {
-      if (h === 0 && headerHeight) return;
-      setHeaderHeightState(h);
-      headerHeightShared.value = h ?? 0;
-    },
-    [headerHeight, headerHeightShared]
-  );
-  const onListUnmount = (0, import_react14.useCallback)(() => {
+    snapBackFooterShared.value = chromeHosted ? chromeSnapBack : effectiveSnapBackFooter ?? effectiveSnapBack;
+  }, [chromeHosted, chromeSnapBack, effectiveSnapBack, effectiveSnapBackFooter, effectiveSnapBackHeader, snapBackFooterShared, snapBackHeaderShared]);
+  (0, import_react17.useEffect)(() => {
+    if (!chromeHosted) return;
+    ownStackHeight.value = chromeFootprint + Math.max(footerHeight ?? 0, chromeOverhang) + CHROME_SLACK;
+  }, [chromeFootprint, chromeHosted, chromeOverhang, footerHeight, ownStackHeight]);
+  const headerHeightRef = (0, import_react17.useRef)(null);
+  const footerHeightRef = (0, import_react17.useRef)(null);
+  const setHeaderHeight = (0, import_react17.useCallback)((h) => {
+    if (h === 0 && headerHeightRef.current) return;
+    headerHeightRef.current = h;
+    setHeaderHeightState(h);
+  }, []);
+  (0, import_react17.useLayoutEffect)(() => {
+    headerHeightShared.value = headerHeight ?? 0;
+  }, [headerHeight, headerHeightShared]);
+  const onListUnmount = (0, import_react17.useCallback)(() => {
     listGeneration.value += 1;
-  }, [listGeneration]);
-  const onJsListUnmount = (0, import_react14.useCallback)(() => {
+    if (revealChrome && chromeWritable.value) revealChrome();
+  }, [chromeWritable, listGeneration, revealChrome]);
+  const onJsListUnmount = (0, import_react17.useCallback)(() => {
     jsListGeneration.current += 1;
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!__DEV__ || headerHeight !== null) return;
     const timeout = setTimeout(() => {
       console.warn("[scroll-view] No ScrollViewHeader ever measured inside this ScrollViewProvider \u2014 scroll content stays hidden (opacity: 0) until one does. Render a <ScrollViewHeader> (it can be empty / zero height) inside this provider.");
     }, 3e3);
     return () => clearTimeout(timeout);
   }, [headerHeight]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (import_react_native13.Platform.OS !== "web" || headerHeight !== null) return;
     let raf2 = 0;
     const raf1 = requestAnimationFrame(() => {
@@ -1267,47 +1408,55 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard =
       cancelAnimationFrame(raf2);
     };
   }, [headerHeight, setHeaderHeight]);
-  const setFooterHeight = (0, import_react14.useCallback)(
+  const setFooterHeight = (0, import_react17.useCallback)(
     (h) => {
-      if (h === 0 && footerHeight) return;
+      if (h === 0 && footerHeightRef.current) return;
+      footerHeightRef.current = h;
       setFooterHeightState(h);
       footerHeightShared.value = h ?? 0;
     },
-    [footerHeight, footerHeightShared]
+    [footerHeightShared]
   );
-  const scrollHeight = (0, import_react14.useMemo)(() => import_react_native13.Dimensions.get("window").height - (headerHeight ?? 0) - (footerHeight ?? 0), [headerHeight, footerHeight]);
+  const scrollHeight = (0, import_react17.useMemo)(() => import_react_native13.Dimensions.get("window").height - (headerHeight ?? 0) - (footerHeight ?? 0), [headerHeight, footerHeight]);
   const effectiveHeaderFixed = fixed || (headerFixed ?? settings.headerFixed);
   const effectiveFooterFixed = fixed || (footerFixed ?? settings.footerFixed);
-  const value = (0, import_react14.useMemo)(() => ({ blur: effectiveBlur, footerAboveKeyboard, footerHeight, footerHeightShared, footerFixed: effectiveFooterFixed, footerOffset, headerHeight, headerHeightShared, headerFixed: effectiveHeaderFixed, headerOffset, jsListGeneration, listGeneration, onJsListUnmount, onListUnmount, progress, pullSearchHeightShared, progressing, scrollHeight, scrollPosition, setFooterHeight, setHeaderHeight, setProgress, setProgressing, snapBackFooterShared, snapBackHeaderShared, tabBarHeight }), [effectiveBlur, footerAboveKeyboard, effectiveFooterFixed, effectiveHeaderFixed, footerHeight, footerHeightShared, footerOffset, headerHeight, headerHeightShared, headerOffset, jsListGeneration, listGeneration, onJsListUnmount, onListUnmount, progress, pullSearchHeightShared, progressing, scrollHeight, scrollPosition, setFooterHeight, setHeaderHeight, snapBackFooterShared, snapBackHeaderShared, tabBarHeight]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ScrollViewContext.Provider, { value, children });
+  const effectiveTabBarHeight = chromeHosted ? chromeFootprint : tabBarHeight;
+  const value = (0, import_react17.useMemo)(
+    () => ({ blur: effectiveBlur, chromeHosted, chromeOverhang, chromeWritable, footerAboveKeyboard, footerHeight, footerHeightShared, footerFixed: effectiveFooterFixed, footerOffset, headerHeight, headerHeightShared, headerFixed: effectiveHeaderFixed, headerOffset, jsListGeneration, listGeneration, onJsListUnmount, onListUnmount, progress, pullSearchHeightShared, progressing, scrollHeight, scrollPosition, setFooterHeight, setHeaderHeight, setProgress, setProgressing, snapBackFooterShared, snapBackHeaderShared, stackHeightShared, tabBarHeight: effectiveTabBarHeight }),
+    [effectiveBlur, chromeHosted, chromeOverhang, chromeWritable, footerAboveKeyboard, effectiveFooterFixed, effectiveHeaderFixed, footerHeight, footerHeightShared, footerOffset, headerHeight, headerHeightShared, headerOffset, jsListGeneration, listGeneration, onJsListUnmount, onListUnmount, progress, pullSearchHeightShared, progressing, scrollHeight, scrollPosition, setFooterHeight, setHeaderHeight, snapBackFooterShared, snapBackHeaderShared, stackHeightShared, effectiveTabBarHeight]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScrollViewContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ScrollViewChromeHostContext.Provider, { value: null, children: [
+    children,
+    chromeHost ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChromeRegistrar, { footerFixed: effectiveFooterFixed, host: chromeHost, writable: chromeWritable }) : null
+  ] }) });
 };
 
 // src/ScrollViewSettingsProvider.tsx
 var ScrollViewSettingsProvider = scrollViewSettingsProvider;
 
 // src/SectionList.tsx
-var import_react16 = require("react");
+var import_react19 = require("react");
 var import_react_native14 = require("react-native");
 var import_react_native_gesture_handler4 = require("react-native-gesture-handler");
-var import_react_native_reanimated15 = __toESM(require("react-native-reanimated"));
+var import_react_native_reanimated16 = __toESM(require("react-native-reanimated"));
 
 // src/internal/useStickyHeaders.ts
-var import_react15 = require("react");
-var import_react_native_reanimated14 = require("react-native-reanimated");
+var import_react18 = require("react");
+var import_react_native_reanimated15 = require("react-native-reanimated");
 var import_react_native_safe_area_context5 = require("react-native-safe-area-context");
 function useStickyHeaders(headerFixed, enabled) {
-  const { headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared } = (0, import_react15.useContext)(ScrollViewContext);
+  const { headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared } = (0, import_react18.useContext)(ScrollViewContext);
   const insetsTop = (0, import_react_native_safe_area_context5.useSafeAreaInsets)().top;
-  const sectionYPositions = (0, import_react_native_reanimated14.useSharedValue)([]);
-  const sectionHeights = (0, import_react_native_reanimated14.useSharedValue)([]);
-  const [activeIndex, setActiveIndex] = (0, import_react15.useState)(-1);
-  const contentIndexShared = (0, import_react_native_reanimated14.useSharedValue)(-1);
-  (0, import_react15.useLayoutEffect)(() => {
+  const sectionYPositions = (0, import_react_native_reanimated15.useSharedValue)([]);
+  const sectionHeights = (0, import_react_native_reanimated15.useSharedValue)([]);
+  const [activeIndex, setActiveIndex] = (0, import_react18.useState)(-1);
+  const contentIndexShared = (0, import_react_native_reanimated15.useSharedValue)(-1);
+  (0, import_react18.useLayoutEffect)(() => {
     contentIndexShared.value = activeIndex;
   }, [activeIndex, contentIndexShared]);
-  const positionsCache = (0, import_react15.useRef)([]);
-  const heightsCache = (0, import_react15.useRef)([]);
-  (0, import_react_native_reanimated14.useAnimatedReaction)(
+  const positionsCache = (0, import_react18.useRef)([]);
+  const heightsCache = (0, import_react18.useRef)([]);
+  (0, import_react_native_reanimated15.useAnimatedReaction)(
     () => {
       if (!enabled) return -1;
       const positions = sectionYPositions.value;
@@ -1332,7 +1481,7 @@ function useStickyHeaders(headerFixed, enabled) {
       return active;
     },
     (curr, prev) => {
-      if (curr !== prev) (0, import_react_native_reanimated14.runOnJS)(setActiveIndex)(curr);
+      if (curr !== prev) (0, import_react_native_reanimated15.runOnJS)(setActiveIndex)(curr);
     },
     // Same web-only reanimated gap as useAnimatedStyle elsewhere in this file: this "prepare"
     // function's own SharedValue reads (sectionYPositions, headerHeightShared, scrollPosition,
@@ -1341,7 +1490,7 @@ function useStickyHeaders(headerFixed, enabled) {
     // then never again on web, permanently freezing activeIndex/the active sticky section.
     [enabled, headerFixed, insetsTop, sectionYPositions, headerHeightShared, scrollPosition, snapBackHeaderShared, headerOffset, pullSearchHeightShared]
   );
-  const clipStyle = (0, import_react_native_reanimated14.useAnimatedStyle)(() => {
+  const clipStyle = (0, import_react_native_reanimated15.useAnimatedStyle)(() => {
     const hHeight = headerHeightShared.value;
     const scrollPos = scrollPosition.value;
     let stickyTop;
@@ -1355,7 +1504,7 @@ function useStickyHeaders(headerFixed, enabled) {
     }
     return { top: stickyTop };
   }, [enabled, headerFixed, insetsTop, headerHeightShared, scrollPosition, snapBackHeaderShared, headerOffset, pullSearchHeightShared]);
-  const overlayStyle = (0, import_react_native_reanimated14.useAnimatedStyle)(() => {
+  const overlayStyle = (0, import_react_native_reanimated15.useAnimatedStyle)(() => {
     const hidden = { opacity: 0, top: 0, transform: [{ translateY: 0 }] };
     if (!enabled) return hidden;
     const index = contentIndexShared.value;
@@ -1383,7 +1532,7 @@ function useStickyHeaders(headerFixed, enabled) {
     }
     return { opacity: 1, top: 0, transform: [{ translateY }] };
   }, [enabled, headerFixed, insetsTop, contentIndexShared, sectionYPositions, headerHeightShared, scrollPosition, snapBackHeaderShared, headerOffset, pullSearchHeightShared, sectionHeights]);
-  const measureHeader = (0, import_react15.useCallback)(
+  const measureHeader = (0, import_react18.useCallback)(
     (index, pageY, height) => {
       const contentY = pageY + scrollPosition.value;
       positionsCache.current[index] = contentY;
@@ -1393,7 +1542,7 @@ function useStickyHeaders(headerFixed, enabled) {
     },
     [scrollPosition, sectionHeights, sectionYPositions]
   );
-  const resetPositions = (0, import_react15.useCallback)(
+  const resetPositions = (0, import_react18.useCallback)(
     (count) => {
       positionsCache.current = Array.from({ length: count }, () => -1);
       sectionYPositions.value = positionsCache.current.slice();
@@ -1406,36 +1555,36 @@ function useStickyHeaders(headerFixed, enabled) {
 }
 
 // src/SectionList.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var AnimatedSectionList = import_react_native_reanimated15.default.createAnimatedComponent(import_react_native14.SectionList);
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var AnimatedSectionList = import_react_native_reanimated16.default.createAnimatedComponent(import_react_native14.SectionList);
 var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: externalContentContainerStyle, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onContentSizeChange, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, removeClippedSubviews = false, sections, showsVerticalScrollIndicator, style, ref: externalRef, windowSize = 100, ...props }) => {
-  const scrollView = (0, import_react16.useRef)(null);
+  const scrollView = (0, import_react19.useRef)(null);
   const { stickySectionHeadersEnabled = true, renderSectionHeader, ...passThroughProps } = props;
   const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, contentPadding, footerFixed, headerFixed, headerHeight } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, hideUntilMeasured: true, keyboardAware, pullSearchHeight, style });
-  const { listGeneration, onListUnmount } = (0, import_react16.useContext)(ScrollViewContext);
-  const capturedGeneration = (0, import_react_native_reanimated15.useSharedValue)(-1);
-  (0, import_react16.useLayoutEffect)(() => {
+  const { listGeneration, onListUnmount } = (0, import_react19.useContext)(ScrollViewContext);
+  const capturedGeneration = (0, import_react_native_reanimated16.useSharedValue)(-1);
+  (0, import_react19.useLayoutEffect)(() => {
     const generation = listGeneration.value;
     if (import_react_native14.Platform.OS === "web") {
       capturedGeneration.value = generation;
       return;
     }
-    (0, import_react_native_reanimated15.runOnUI)((gen) => {
+    (0, import_react_native_reanimated16.runOnUI)((gen) => {
       "worklet";
       capturedGeneration.value = gen;
     })(generation);
   }, [capturedGeneration, listGeneration]);
   const usesCustomSticky = stickySectionHeadersEnabled && renderSectionHeader != null;
   const { activeIndex, clipStyle, measureHeader, overlayStyle, resetPositions } = useStickyHeaders(headerFixed, usesCustomSticky);
-  (0, import_react16.useLayoutEffect)(() => {
+  (0, import_react19.useLayoutEffect)(() => {
     if (usesCustomSticky) resetPositions(sections.length);
   }, [sections, usesCustomSticky, resetPositions, headerHeight]);
-  const sectionViewRefs = (0, import_react16.useRef)(/* @__PURE__ */ new Map());
-  const wrappedRenderSectionHeader = (0, import_react16.useMemo)(() => {
+  const sectionViewRefs = (0, import_react19.useRef)(/* @__PURE__ */ new Map());
+  const wrappedRenderSectionHeader = (0, import_react19.useMemo)(() => {
     if (!usesCustomSticky) return renderSectionHeader ?? void 0;
     return (info) => {
       const idx = sections.findIndex((s) => s === info.section);
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         import_react_native14.View,
         {
           ref: (el) => {
@@ -1452,8 +1601,8 @@ var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: exter
       );
     };
   }, [usesCustomSticky, renderSectionHeader, sections, measureHeader]);
-  (0, import_react16.useLayoutEffect)(() => () => onListUnmount(), [onListUnmount]);
-  const scrollTo = (0, import_react16.useCallback)((offset, animated) => {
+  (0, import_react19.useLayoutEffect)(() => () => onListUnmount(), [onListUnmount]);
+  const scrollTo = (0, import_react19.useCallback)((offset, animated) => {
     scrollView.current?.getScrollResponder()?.scrollTo({ y: offset, animated });
   }, []);
   const {
@@ -1471,16 +1620,16 @@ var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: exter
     pullSearchHeight,
     scrollTo
   });
-  const activeListHeader = (0, import_react16.useMemo)(() => {
+  const activeListHeader = (0, import_react19.useMemo)(() => {
     if (!renderFilters) return pullSearchHeader;
     const Inner = pullSearchHeader;
-    return () => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      Inner ? typeof Inner === "function" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Inner, {}) : Inner : null,
+    return () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      Inner ? typeof Inner === "function" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Inner, {}) : Inner : null,
       renderFilters
     ] });
   }, [pullSearchHeader, renderFilters]);
-  const pullSearchSettled = (0, import_react16.useRef)(false);
-  (0, import_react16.useEffect)(() => {
+  const pullSearchSettled = (0, import_react19.useRef)(false);
+  (0, import_react19.useEffect)(() => {
     if (!usesCustomSticky || activeListHeader == null || pullSearchSettled.current) return;
     pullSearchSettled.current = true;
     const handle = requestAnimationFrame(() => {
@@ -1492,24 +1641,24 @@ var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: exter
     });
     return () => cancelAnimationFrame(handle);
   }, [activeListHeader, usesCustomSticky, measureHeader]);
-  const contentContainerStyle = (0, import_react16.useMemo)(() => [{ minHeight: import_react_native14.Dimensions.get("window").height - contentInset.top - contentInset.bottom + pullSearchMinHeight }, externalContentContainerStyle, contentPadding], [contentInset.bottom, contentInset.top, contentPadding, externalContentContainerStyle, pullSearchMinHeight]);
+  const contentContainerStyle = (0, import_react19.useMemo)(() => [{ minHeight: import_react_native14.Dimensions.get("window").height - contentInset.top - contentInset.bottom + pullSearchMinHeight }, externalContentContainerStyle, contentPadding], [contentInset.bottom, contentInset.top, contentPadding, externalContentContainerStyle, pullSearchMinHeight]);
   const handleScroll = useScrollHandler({ capturedGeneration, chipHidden, chipThreshold, footerFixed, headerFixed, listGeneration });
-  const handleScrollToTop = (0, import_react16.useCallback)(() => {
+  const handleScrollToTop = (0, import_react19.useCallback)(() => {
     const offset = pullSearchHeight ? -contentInset.top + pullSearchHeight : -contentInset.top;
     scrollView.current?.getScrollResponder()?.scrollTo({ y: offset, animated: true });
   }, [contentInset.top, pullSearchHeight]);
-  const handleContentSizeChange = (0, import_react16.useCallback)(
+  const handleContentSizeChange = (0, import_react19.useCallback)(
     (w, h) => {
       if (onContentSizeChange) onContentSizeChange(w, h);
     },
     [onContentSizeChange]
   );
-  const refreshControl = (0, import_react16.useMemo)(() => onRefresh ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RefreshControl, { onRefresh, refreshing: refreshing ?? false }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RefreshControl, {}), [onRefresh, refreshing]);
-  const nativeGesture = (0, import_react16.useMemo)(() => import_react_native_gesture_handler4.Gesture.Native(), []);
-  const combinedGesture = (0, import_react16.useMemo)(() => gesture !== void 0 ? import_react_native_gesture_handler4.Gesture.Simultaneous(gesture, nativeGesture) : nativeGesture, [gesture, nativeGesture]);
+  const refreshControl = (0, import_react19.useMemo)(() => onRefresh ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RefreshControl, { onRefresh, refreshing: refreshing ?? false }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RefreshControl, {}), [onRefresh, refreshing]);
+  const nativeGesture = (0, import_react19.useMemo)(() => import_react_native_gesture_handler4.Gesture.Native(), []);
+  const combinedGesture = (0, import_react19.useMemo)(() => gesture !== void 0 ? import_react_native_gesture_handler4.Gesture.Simultaneous(gesture, nativeGesture) : nativeGesture, [gesture, nativeGesture]);
   const detectorGesture = gesture !== void 0 ? combinedGesture : void 0;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native14.View, { style: containerStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native14.View, { style: containerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       AnimatedSectionList,
       {
         ...passThroughProps,
@@ -1539,26 +1688,52 @@ var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: exter
       },
       headerHeight !== null && headerHeight > 0 ? 1 : 0
     ),
-    hiddenHeader && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native14.View, { pointerEvents: "none", style: styles8.measureContainer, children: hiddenHeader }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScrollViewChip, { chipProps, onChipPress, onPress: handleScrollToTop, style: chipStyle }),
-    usesCustomSticky && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_reanimated15.default.View, { pointerEvents: "none", style: [styles8.stickyClip, clipStyle], children: activeIndex >= 0 && activeIndex < sections.length && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_reanimated15.default.View, { style: [styles8.stickyOverlay, overlayStyle], children: renderSectionHeader({ section: sections[activeIndex] }) }) })
+    hiddenHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native14.View, { pointerEvents: "none", style: styles8.measureContainer, children: hiddenHeader }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollViewChip, { chipProps, onChipPress, onPress: handleScrollToTop, style: chipStyle }),
+    usesCustomSticky && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_reanimated16.default.View, { pointerEvents: "none", style: [styles8.stickyClip, clipStyle], children: activeIndex >= 0 && activeIndex < sections.length && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_reanimated16.default.View, { style: [styles8.stickyOverlay, overlayStyle], children: renderSectionHeader({ section: sections[activeIndex] }) }) })
   ] });
-  return detectorGesture ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_gesture_handler4.GestureDetector, { gesture: detectorGesture, children: content }) : content;
+  return detectorGesture ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_gesture_handler4.GestureDetector, { gesture: detectorGesture, children: content }) : content;
 };
 var styles8 = {
   measureContainer: { left: 0, opacity: 0, position: "absolute", right: 0, top: -9999 },
   stickyClip: { bottom: 0, left: 0, overflow: "hidden", position: "absolute", right: 0, zIndex: 2 },
   stickyOverlay: { left: 0, position: "absolute", right: 0 }
 };
-var SectionList = (0, import_react16.memo)(SectionListInner);
+var SectionList = (0, import_react19.memo)(SectionListInner);
 
 // src/useScrollView.ts
-var import_react17 = require("react");
+var import_react20 = require("react");
 var useScrollView = () => {
-  const { progress, progressing, scrollHeight, scrollPosition, setProgress, setProgressing } = (0, import_react17.useContext)(ScrollViewContext);
+  const { progress, progressing, scrollHeight, scrollPosition, setProgress, setProgressing } = (0, import_react20.useContext)(ScrollViewContext);
   return { progress, progressing, scrollHeight, scrollPosition, setProgress, setProgressing };
 };
 
+// src/useScrollViewChrome.ts
+var import_react21 = require("react");
+var import_react_native_reanimated17 = require("react-native-reanimated");
+var noop = () => {
+};
+var useScrollViewChromeStyle = () => {
+  const chrome = (0, import_react21.useContext)(ScrollViewChromeContext);
+  const fallback = (0, import_react_native_reanimated17.useSharedValue)(0);
+  const offset = chrome?.offset ?? fallback;
+  return (0, import_react_native_reanimated17.useAnimatedStyle)(() => ({ transform: [{ translateY: offset.value }] }), [offset]);
+};
+var useScrollViewChromePin = (active) => {
+  const chrome = (0, import_react21.useContext)(ScrollViewChromeContext);
+  const addPin = chrome?.addPin;
+  const removePin = chrome?.removePin;
+  (0, import_react21.useEffect)(() => {
+    if (!active || !addPin || !removePin) return void 0;
+    addPin();
+    return removePin;
+  }, [active, addPin, removePin]);
+};
+var useScrollViewChromeReveal = () => {
+  const chrome = (0, import_react21.useContext)(ScrollViewChromeContext);
+  return chrome?.reveal ?? noop;
+};
+
 // src/useScrollViewSettings.ts
 var useScrollViewSettings = scrollViewUseSettings;
 // Annotate the CommonJS export names for ESM import in node:
@@ -1567,6 +1742,7 @@ var useScrollViewSettings = scrollViewUseSettings;
   FlatList,
   PullSearch,
   ScrollView,
+  ScrollViewChromeProvider,
   ScrollViewContext,
   ScrollViewFooter,
   ScrollViewHeader,
@@ -1579,5 +1755,8 @@ var useScrollViewSettings = scrollViewUseSettings;
   scrollViewReducer,
   useKeyboardInset,
   useScrollView,
+  useScrollViewChromePin,
+  useScrollViewChromeReveal,
+  useScrollViewChromeStyle,
   useScrollViewSettings
 });