@rific/scroll-view 0.4.3 → 0.6.0

package/README.md

@@ -71,12 +71,13 @@ Screen-level provider that owns header/footer state and scroll position. Must wr
 |------|------|---------|-------------|
 | `blur` | `boolean` | system | Enable frosted-glass backdrop on header/footer |
 | `fixed` | `boolean` | `false` | Pin both header and footer (overrides `headerFixed`/`footerFixed`) |
+| `footerAboveKeyboard` | `boolean` | `false` | With a fixed footer, float it above the keyboard instead of letting the keyboard cover it — see [Keyboard awareness](#keyboard-awareness) |
 | `headerFixed` | `boolean` | `false` | Pin header; overrides settings default |
 | `footerFixed` | `boolean` | `false` | Pin footer; overrides settings default |
 | `snapBack` | `boolean` | `false` | Snap header and footer back when scrolling up |
 | `snapBackHeader` | `boolean` | — | Override `snapBack` for header only |
 | `snapBackFooter` | `boolean` | — | Override `snapBack` for footer only |
-| `tabBarHeight` | `number` | `60` | Used to compute safe scroll height |
+| `tabBarHeight` | `number` | `0` | Extra bottom inset reserved for a host app's own persistent tab bar (added on top of the safe-area inset, independent of any `ScrollViewFooter`) |
 
 ---
 
@@ -269,6 +270,45 @@ export default function SearchScreen() {
 
 ---
 
+## Keyboard awareness
+
+Pass `keyboardAware` to any scroll component (`ScrollView`, `FlatList`, `SectionList`, `CustomList`) to add the keyboard's height to the bottom content inset, so a focused field near the bottom of the content stays above the keyboard instead of getting hidden behind it.
+
+```tsx
+<ScrollViewProvider>
+  <ScrollViewHeader title="Edit profile" />
+  <ScrollView keyboardAware>
+    <TextInput label="Name" />
+    <TextInput label="Bio" multiline />
+  </ScrollView>
+</ScrollViewProvider>
+```
+
+By default, a fixed `ScrollViewFooter` doesn't follow the keyboard — it stays pinned to the screen bottom and the keyboard simply covers it. If the footer holds something the user needs while typing (a submit button, say), set `footerAboveKeyboard` on `ScrollViewProvider` so the footer floats above the keyboard instead, reachable without dismissing it first:
+
+```tsx
+<ScrollViewProvider footerFixed footerAboveKeyboard>
+  <ScrollViewHeader title="Edit profile" />
+  <ScrollView keyboardAware>
+    <TextInput label="Name" />
+    <TextInput label="Bio" multiline />
+  </ScrollView>
+  <ScrollViewFooter>
+    <Button mode="contained" onPress={handleSubmit}>Save</Button>
+  </ScrollViewFooter>
+</ScrollViewProvider>
+```
+
+`footerAboveKeyboard` only has an effect when the footer is fixed (`footerFixed`) — a footer that scrolls away with content has nothing to reserve keyboard space for. Always pair it with `keyboardAware: true` on any scroll component that could have a focused input while it's visible. Content always reserves space for the current footer height regardless of `keyboardAware` (so a fixed footer never overlaps it) — and while floating, that height already includes the keyboard, so a list with `keyboardAware: false` ends up reserving keyboard space anyway, just indirectly through the footer rather than directly. There's no useful configuration where you'd want the footer reachable above the keyboard but *not* want that same list's own content clear of it too, so don't rely on `keyboardAware: false` to opt a list out of this while `footerAboveKeyboard` is on — it won't.
+
+Floating is done by growing the footer's own container rather than translating it, so its `BlurView` backdrop always stays sealed against the true physical screen bottom — nothing shows through beneath it, including at the keyboard's rounded top corners.
+
+While floating above an open keyboard, the footer also drops its safe-area bottom inset — it's no longer sitting at the physical screen edge, so that padding would just be dead space under its content. As the keyboard closes, the inset ramps back in continuously over the last bit of its travel rather than snapping back once it's fully closed, so the content settles at the safe-area line smoothly instead of dropping to the physical bottom edge and correcting back up.
+
+Keyboard awareness is native-only — `useKeyboardInset` (and therefore `keyboardAware`/`footerAboveKeyboard`) always resolves to `0` height on web.
+
+---
+
 ## Hooks
 
 ### `useScrollView`

package/dist/index.d.mts

@@ -121,6 +121,7 @@ declare const ScrollView: typeof ScrollViewInner;
 
 type ScrollViewContextType = {
     blur: boolean;
+    footerAboveKeyboard: boolean;
     footerHeight: number;
     footerHeightShared: SharedValue<number>;
     footerFixed: boolean;
@@ -158,6 +159,7 @@ type ScrollViewHeaderProps = {
     actionSize?: number;
     actionStyle?: ViewStyle;
     backAction?: () => void;
+    backActionAccessibilityLabel?: string;
     backActionFixed?: boolean;
     caption?: string;
     centerContent?: ReactNode;
@@ -169,12 +171,13 @@ type ScrollViewHeaderProps = {
     trailingAction?: ReactNode;
     trailingActionFixed?: boolean;
 };
-declare const ScrollViewHeader: ({ actionSize, actionStyle, backAction, backActionFixed, caption, centerContent, children, iconSize, style, title, topInset, trailingAction, trailingActionFixed }: ScrollViewHeaderProps) => react.JSX.Element;
+declare const ScrollViewHeader: ({ actionSize, actionStyle, backAction, backActionAccessibilityLabel, backActionFixed, caption, centerContent, children, iconSize, style, title, topInset, trailingAction, trailingActionFixed }: ScrollViewHeaderProps) => react.JSX.Element;
 
 type ScrollViewProviderProps = {
     blur?: boolean;
     children: ReactNode;
     fixed?: boolean;
+    footerAboveKeyboard?: boolean;
     footerFixed?: boolean;
     headerFixed?: boolean;
     snapBack?: boolean;
@@ -182,7 +185,7 @@ type ScrollViewProviderProps = {
     snapBackHeader?: boolean;
     tabBarHeight?: number;
 };
-declare const ScrollViewProvider: ({ blur, children, fixed, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight }: ScrollViewProviderProps) => react.JSX.Element;
+declare const ScrollViewProvider: ({ blur, children, fixed, footerAboveKeyboard, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight }: ScrollViewProviderProps) => react.JSX.Element;
 
 type ScrollViewSettingsProviderProps = {
     children: ReactNode;

package/dist/index.d.ts

@@ -121,6 +121,7 @@ declare const ScrollView: typeof ScrollViewInner;
 
 type ScrollViewContextType = {
     blur: boolean;
+    footerAboveKeyboard: boolean;
     footerHeight: number;
     footerHeightShared: SharedValue<number>;
     footerFixed: boolean;
@@ -158,6 +159,7 @@ type ScrollViewHeaderProps = {
     actionSize?: number;
     actionStyle?: ViewStyle;
     backAction?: () => void;
+    backActionAccessibilityLabel?: string;
     backActionFixed?: boolean;
     caption?: string;
     centerContent?: ReactNode;
@@ -169,12 +171,13 @@ type ScrollViewHeaderProps = {
     trailingAction?: ReactNode;
     trailingActionFixed?: boolean;
 };
-declare const ScrollViewHeader: ({ actionSize, actionStyle, backAction, backActionFixed, caption, centerContent, children, iconSize, style, title, topInset, trailingAction, trailingActionFixed }: ScrollViewHeaderProps) => react.JSX.Element;
+declare const ScrollViewHeader: ({ actionSize, actionStyle, backAction, backActionAccessibilityLabel, backActionFixed, caption, centerContent, children, iconSize, style, title, topInset, trailingAction, trailingActionFixed }: ScrollViewHeaderProps) => react.JSX.Element;
 
 type ScrollViewProviderProps = {
     blur?: boolean;
     children: ReactNode;
     fixed?: boolean;
+    footerAboveKeyboard?: boolean;
     footerFixed?: boolean;
     headerFixed?: boolean;
     snapBack?: boolean;
@@ -182,7 +185,7 @@ type ScrollViewProviderProps = {
     snapBackHeader?: boolean;
     tabBarHeight?: number;
 };
-declare const ScrollViewProvider: ({ blur, children, fixed, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight }: ScrollViewProviderProps) => react.JSX.Element;
+declare const ScrollViewProvider: ({ blur, children, fixed, footerAboveKeyboard, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight }: ScrollViewProviderProps) => react.JSX.Element;
 
 type ScrollViewSettingsProviderProps = {
     children: ReactNode;

package/dist/index.js

@@ -87,6 +87,7 @@ var import_react_native_reanimated3 = require("react-native-reanimated");
 var import_react = require("react");
 var ScrollViewContext = (0, import_react.createContext)({
   blur: true,
+  footerAboveKeyboard: false,
   footerHeight: 0,
   footerHeightShared: null,
   footerFixed: false,
@@ -116,7 +117,7 @@ var ScrollViewContext = (0, import_react.createContext)({
   },
   snapBackFooterShared: null,
   snapBackHeaderShared: null,
-  tabBarHeight: 60
+  tabBarHeight: 0
 });
 
 // src/useScrollInit.ts
@@ -424,17 +425,21 @@ var useKeyboardInset = import_react_native4.Platform.OS === "web" ? useKeyboardI
 var ZERO_INSET = { bottom: 0, top: 0 };
 var ZERO_OFFSET = { x: 0, y: 0 };
 var CHIP_SLIDE = 48;
-function useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, isHorizontal, keyboardAware, pullSearchHeight, style } = {}) {
+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 { footerHeight, footerFixed: contextFooterFixed, headerHeight, headerFixed: contextHeaderFixed, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared } = (0, import_react5.useContext)(ScrollViewContext);
+  const { footerAboveKeyboard, footerHeight, footerFixed: contextFooterFixed, headerHeight, headerFixed: contextHeaderFixed, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared, tabBarHeight } = (0, import_react5.useContext)(ScrollViewContext);
   const headerFixed = isHorizontal ? true : headerFixedProp ?? contextHeaderFixed;
   const footerFixed = isHorizontal ? true : 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: 0 }, style] : [import_react_native5.StyleSheet.absoluteFill, style], [headerHeight, style]);
-  const insetGeometry = (0, import_react5.useMemo)(() => ({ bottom: (footerFixed ? footerHeight || insets.bottom : insets.bottom) + (keyboardAware ? keyboardHeight : 0), top: headerHeight ?? 0 }), [footerFixed, footerHeight, insets.bottom, headerHeight, keyboardAware, keyboardHeight]);
+  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;
+    return { bottom, top: headerHeight ?? 0 };
+  }, [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);
@@ -460,7 +465,7 @@ function useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedP
       top,
       transform: [{ translateY: chipHidden.value ? (0, import_react_native_reanimated5.withTiming)(-CHIP_SLIDE) : (0, import_react_native_reanimated5.withTiming)(0) }]
     };
-  }, [isHorizontal, headerFixed, headerHeight, insets.top]);
+  }, [isHorizontal, headerFixed, headerHeight, insets.top, chipHidden, snapBackHeaderShared, headerOffset, scrollPosition, pullSearchHeightShared]);
   return { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, contentPadding, footerFixed, headerFixed, headerHeight, insets, isHorizontal: isHorizontal ?? false };
 }
 
@@ -473,6 +478,10 @@ var CustomListInner = ({ chipProps, chipThreshold, component: List, renderFilter
   const capturedGeneration = (0, import_react_native_reanimated6.useSharedValue)(-1);
   (0, import_react6.useLayoutEffect)(() => {
     const generation = listGeneration.value;
+    if (import_react_native6.Platform.OS === "web") {
+      capturedGeneration.value = generation;
+      return;
+    }
     (0, import_react_native_reanimated6.runOnUI)((gen) => {
       "worklet";
       capturedGeneration.value = gen;
@@ -570,7 +579,7 @@ var Dot = ({ activeColor, index, inactiveColor, pageWidth, scrollPosition }) =>
     const size = DOT_FULL + (DOT_SMALL - DOT_FULL) * t;
     const backgroundColor = (0, import_react_native_reanimated7.interpolateColor)(t, [0, 1], [activeColor, inactiveColor]);
     return { backgroundColor, borderRadius: size / 2, height: size, width: size };
-  });
+  }, [scrollPosition, pageWidth, index, activeColor, inactiveColor]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native7.View, { style: styles3.dotContainer, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_reanimated7.default.View, { style: circleStyle }) });
 };
 var HorizontalDots = ({ total }) => {
@@ -581,15 +590,18 @@ var HorizontalDots = ({ total }) => {
   const insetsBottom = insets.bottom;
   const activeColor = theme.colors.primary;
   const inactiveColor = theme.colors.outlineVariant;
-  const pillContainerStyle = (0, import_react_native_reanimated7.useAnimatedStyle)(() => ({
-    bottom: Math.max(footerHeightShared.value, insetsBottom) + 8
-  }));
+  const pillContainerStyle = (0, import_react_native_reanimated7.useAnimatedStyle)(
+    () => ({
+      bottom: Math.max(footerHeightShared.value, insetsBottom) + 8
+    }),
+    [footerHeightShared, insetsBottom]
+  );
   const rowStyle = (0, import_react_native_reanimated7.useAnimatedStyle)(() => {
     const page = scrollPosition.value / width;
     const maxOffset = Math.max(0, (total - CLIP_COUNT) * DOT_STEP);
     const offset = Math.max(0, Math.min((page - (CLIP_COUNT - 1) / 2) * DOT_STEP, maxOffset));
     return { transform: [{ translateX: -offset }] };
-  });
+  }, [scrollPosition, width, total]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_reanimated7.default.View, { pointerEvents: "none", style: [styles3.pillContainer, pillContainerStyle], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native7.View, { style: styles3.pill, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_auto_paper2.BlurView, { blur, style: import_react_native7.StyleSheet.absoluteFill }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native7.View, { style: styles3.dotsClip, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_reanimated7.default.View, { style: [styles3.dotsRow, rowStyle], children: Array.from({ length: total }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dot, { activeColor, index: i, inactiveColor, pageWidth: width, scrollPosition }, i)) }) })
@@ -896,7 +908,10 @@ var PullSearch = (0, import_react10.forwardRef)(function PullSearch2({ debounce,
     (isHidden, wasHidden) => {
       if (isHidden && !wasHidden) (0, import_react_native_reanimated9.runOnJS)(blurInput)();
     },
-    [barHeight, headerHeight, blurInput]
+    // scrollPosition has to be listed too, not just read — see useStickyHeaders' useAnimatedReaction
+    // for why: on web, without reanimated's Babel plugin active, an unlisted SharedValue mutation
+    // never re-triggers this reaction (confirmed empirically elsewhere in this package).
+    [barHeight, headerHeight, blurInput, scrollPosition]
   );
   const handleClear = (0, import_react10.useCallback)(() => {
     setValue("");
@@ -927,7 +942,7 @@ var PullSearch = (0, import_react10.forwardRef)(function PullSearch2({ debounce,
     const showY = -h;
     const hideY = -h + barHeight;
     return { opacity: (0, import_react_native_reanimated9.interpolate)(scrollPosition.value, [showY, hideY], [1, 0], import_react_native_reanimated9.Extrapolation.CLAMP) };
-  }, [barHeight, headerHeight]);
+  }, [barHeight, headerHeight, scrollPosition]);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_reanimated9.default.View, { onLayout: handleLayout, style: [styles5.container, animatedStyle], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper2.Searchbar, { autoCorrect: false, onChangeText: (text) => setValue((text || "").trimStart()), onClearIconPress: handleClear, placeholder, placeholderTextColor: theme.colors.onSurfaceVariant, ref: inputRef, spellCheck: false, style: styles5.input, value }) });
 });
 var styles5 = import_react_native9.StyleSheet.create({
@@ -977,6 +992,10 @@ var ScrollViewInner = ({ chipProps, chipThreshold, children, contentContainerSty
   const capturedGeneration = (0, import_react_native_reanimated10.useSharedValue)(-1);
   (0, import_react12.useLayoutEffect)(() => {
     const generation = listGeneration.value;
+    if (import_react_native10.Platform.OS === "web") {
+      capturedGeneration.value = generation;
+      return;
+    }
     (0, import_react_native_reanimated10.runOnUI)((gen) => {
       "worklet";
       capturedGeneration.value = gen;
@@ -1041,8 +1060,9 @@ var import_react_native_reanimated11 = __toESM(require("react-native-reanimated"
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var ScrollViewFooter = ({ children, style }) => {
-  const { blur, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared } = (0, import_react13.useContext)(ScrollViewContext);
+  const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared } = (0, import_react13.useContext)(ScrollViewContext);
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
+  const keyboardHeight = useKeyboardInset();
   (0, import_react13.useEffect)(
     () => () => {
       setFooterHeight(0);
@@ -1062,10 +1082,12 @@ var ScrollViewFooter = ({ children, style }) => {
     const effective = scrollPosition.value + headerHeightShared.value - pullSearchHeightShared.value;
     if (effective <= 0) return { transform: [{ translateY: 0 }] };
     return { transform: [{ translateY: Math.min(effective, footerHeight) }] };
-  }, [footerHeight, footerFixed]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native_reanimated11.default.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [styles6.footer, footerStyle], children: [
+  }, [footerHeight, footerFixed, headerHeightShared, pullSearchHeightShared, scrollPosition, snapBackFooterShared, footerOffset]);
+  const containerPaddingBottom = footerFixed && footerAboveKeyboard ? keyboardHeight : 0;
+  const rowPaddingBottom = footerFixed && footerAboveKeyboard ? Math.max(insets.bottom - keyboardHeight, 0) : insets.bottom;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native_reanimated11.default.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [styles6.footer, { paddingBottom: containerPaddingBottom }, footerStyle], children: [
     footerHeight > 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, { paddingBottom: insets.bottom }, style], children })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native11.View, { style: [styles6.row, { paddingBottom: rowPaddingBottom }, style], children })
   ] });
 };
 var styles6 = import_react_native11.StyleSheet.create({
@@ -1082,7 +1104,7 @@ var import_react_native_reanimated12 = __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_paper3.Surface, { style: import_react_native12.StyleSheet.absoluteFill, elevation: 1, children: null }) });
-var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionFixed, caption, centerContent, children, iconSize, style, title, topInset = true, trailingAction, trailingActionFixed = true }) => {
+var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAccessibilityLabel, backActionFixed, caption, centerContent, children, iconSize, style, title, topInset = true, trailingAction, trailingActionFixed = true }) => {
   const { blur, headerHeight, headerFixed, headerOffset, progress, progressing, pullSearchHeightShared, scrollPosition, setHeaderHeight, snapBackHeaderShared } = (0, import_react14.useContext)(ScrollViewContext);
   const { settings } = (0, import_react14.useContext)(ScrollViewSettingsContext);
   const effectiveBackActionFixed = backActionFixed ?? settings.backActionFixed;
@@ -1096,35 +1118,36 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionFi
   }) => {
     if (headerHeight !== height) setHeaderHeight(height);
   };
+  const actionMargin = 4;
+  const contentMinHeight = actionSize + 2 * actionMargin;
+  const unmeasuredHeight = top + contentMinHeight;
   const translateStyle = (0, import_react_native_reanimated12.useAnimatedStyle)(() => {
     if (headerFixed) return { transform: [{ translateY: 0 }] };
     if (snapBackHeaderShared.value) return { transform: [{ translateY: headerOffset.value }] };
     const effective = scrollPosition.value + (headerHeight ?? 0) - pullSearchHeightShared.value;
     if (effective <= 0) return { transform: [{ translateY: 0 }] };
     return { transform: [{ translateY: -effective }] };
-  }, [headerFixed, headerHeight]);
+  }, [headerFixed, headerHeight, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared]);
   const blurStyle = (0, import_react_native_reanimated12.useAnimatedStyle)(() => {
+    if (headerHeight === null) return { height: unmeasuredHeight };
     if (!headerHeight) return { height: 0 };
     if (headerFixed) return { height: headerHeight };
-    const h = headerHeight ?? 0;
-    const translateY = snapBackHeaderShared.value ? headerOffset.value : -Math.max(0, scrollPosition.value + h - pullSearchHeightShared.value);
-    return { height: Math.max(h + translateY, top) };
-  }, [headerFixed, headerHeight, top]);
+    const translateY = snapBackHeaderShared.value ? headerOffset.value : -Math.max(0, scrollPosition.value + headerHeight - pullSearchHeightShared.value);
+    return { height: Math.max(headerHeight + translateY, top) };
+  }, [headerFixed, headerHeight, top, unmeasuredHeight, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared]);
   const progressStyle = (0, import_react_native_reanimated12.useAnimatedStyle)(() => {
     const h = headerHeight ?? 0;
     if (headerFixed) return { top: h };
     const slide = snapBackHeaderShared.value ? -headerOffset.value : Math.max(0, scrollPosition.value + h - pullSearchHeightShared.value);
     return { top: Math.max(h - slide, top) };
-  }, [headerFixed, headerHeight, top]);
-  const actionMargin = 4;
-  const contentMinHeight = actionSize + 2 * actionMargin;
+  }, [headerFixed, headerHeight, top, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared]);
   const actionTop = top + actionMargin;
   const buttonStyle = { borderRadius: actionSize, height: actionSize, margin: 0, width: actionSize };
   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 !== null && headerHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_auto_paper4.BlurView, { blur, style: [styles7.blurInner, { height: headerHeight }] }) }),
+    /* @__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 }),
@@ -1139,10 +1162,10 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionFi
     /* @__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_paper3.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 }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper3.Appbar.BackAction, { onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper3.Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
     ] }) : /* @__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 }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper3.Appbar.BackAction, { onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper3.Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
     ] })),
     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 }),
@@ -1175,7 +1198,7 @@ var import_react15 = 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, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight = 60 }) => {
+var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard = false, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight = 0 }) => {
   const { settings } = (0, import_react15.useContext)(ScrollViewSettingsContext);
   const effectiveBlur = (0, import_auto_paper5.useBlur)(blur);
   const effectiveSnapBack = snapBack ?? settings.snapBack;
@@ -1201,10 +1224,11 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerFixed, headerFi
   }, [effectiveSnapBack, effectiveSnapBackFooter, effectiveSnapBackHeader, snapBackFooterShared, snapBackHeaderShared]);
   const setHeaderHeight = (0, import_react15.useCallback)(
     (h) => {
+      if (h === 0 && headerHeight) return;
       setHeaderHeightState(h);
       headerHeightShared.value = h ?? 0;
     },
-    [headerHeightShared]
+    [headerHeight, headerHeightShared]
   );
   const onListUnmount = (0, import_react15.useCallback)(() => {
     listGeneration.value += 1;
@@ -1229,7 +1253,7 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerFixed, headerFi
   const scrollHeight = (0, import_react15.useMemo)(() => import_react_native13.Dimensions.get("window").height - (headerHeight ?? 0) - footerHeight, [headerHeight, footerHeight]);
   const effectiveHeaderFixed = fixed || (headerFixed ?? settings.headerFixed);
   const effectiveFooterFixed = fixed || (footerFixed ?? settings.footerFixed);
-  const value = (0, import_react15.useMemo)(() => ({ blur: effectiveBlur, 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, effectiveFooterFixed, effectiveHeaderFixed, footerHeight, footerHeightShared, footerOffset, headerHeight, headerHeightShared, headerOffset, jsListGeneration, listGeneration, onJsListUnmount, onListUnmount, progress, pullSearchHeightShared, progressing, scrollHeight, scrollPosition, setFooterHeight, setHeaderHeight, snapBackFooterShared, snapBackHeaderShared, tabBarHeight]);
+  const value = (0, import_react15.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 });
 };
 
@@ -1304,7 +1328,12 @@ function useStickyHeaders(headerFixed, enabled) {
     (curr, prev) => {
       if (curr !== prev) (0, import_react_native_reanimated14.runOnJS)(setActiveIndex)(curr);
     },
-    [enabled, headerFixed, insetsTop]
+    // Same web-only reanimated gap as useAnimatedStyle elsewhere in this file: this "prepare"
+    // function's own SharedValue reads (sectionYPositions, headerHeightShared, scrollPosition,
+    // snapBackHeaderShared, headerOffset, pullSearchHeightShared) need to be listed explicitly too
+    // — confirmed empirically that without them, useAnimatedReaction re-evaluates once on mount and
+    // 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 hHeight = headerHeightShared.value;
@@ -1319,7 +1348,7 @@ function useStickyHeaders(headerFixed, enabled) {
       stickyTop = effective <= 0 ? hHeight : Math.max(insetsTop, hHeight - effective);
     }
     return { top: stickyTop };
-  }, [enabled, headerFixed, insetsTop]);
+  }, [enabled, headerFixed, insetsTop, headerHeightShared, scrollPosition, snapBackHeaderShared, headerOffset, pullSearchHeightShared]);
   const overlayStyle = (0, import_react_native_reanimated14.useAnimatedStyle)(() => {
     const hidden = { opacity: 0, top: 0, transform: [{ translateY: 0 }] };
     if (!enabled) return hidden;
@@ -1347,7 +1376,7 @@ function useStickyHeaders(headerFixed, enabled) {
       if (nextScreenY < pushThreshold) translateY = nextScreenY - pushThreshold;
     }
     return { opacity: 1, top: 0, transform: [{ translateY }] };
-  }, [enabled, headerFixed, insetsTop]);
+  }, [enabled, headerFixed, insetsTop, contentIndexShared, sectionYPositions, headerHeightShared, scrollPosition, snapBackHeaderShared, headerOffset, pullSearchHeightShared, sectionHeights]);
   const measureHeader = (0, import_react17.useCallback)(
     (index, pageY, height) => {
       const contentY = pageY + scrollPosition.value;
@@ -1376,11 +1405,15 @@ var AnimatedSectionList = import_react_native_reanimated15.default.createAnimate
 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_react18.useRef)(null);
   const { stickySectionHeadersEnabled = true, renderSectionHeader, ...passThroughProps } = props;
-  const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, contentPadding, footerFixed, headerFixed, headerHeight } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, keyboardAware, pullSearchHeight, style });
+  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_react18.useContext)(ScrollViewContext);
   const capturedGeneration = (0, import_react_native_reanimated15.useSharedValue)(-1);
   (0, import_react18.useLayoutEffect)(() => {
     const generation = listGeneration.value;
+    if (import_react_native14.Platform.OS === "web") {
+      capturedGeneration.value = generation;
+      return;
+    }
     (0, import_react_native_reanimated15.runOnUI)((gen) => {
       "worklet";
       capturedGeneration.value = gen;