@rific/scroll-view 0.4.2 → 0.5.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/CustomList.tsx
 import { memo, useCallback as useCallback2, useContext as useContext4, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef2 } from "react";
-import { Dimensions, View } from "react-native";
+import { Dimensions, Platform as Platform3, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { runOnUI, useSharedValue as useSharedValue4 } from "react-native-reanimated";
 
@@ -35,6 +35,7 @@ import { runOnJS, useAnimatedScrollHandler, useSharedValue as useSharedValue2, w
 import { createContext } from "react";
 var ScrollViewContext = createContext({
   blur: true,
+  footerAboveKeyboard: false,
   footerHeight: 0,
   footerHeightShared: null,
   footerFixed: false,
@@ -64,7 +65,7 @@ var ScrollViewContext = createContext({
   },
   snapBackFooterShared: null,
   snapBackHeaderShared: null,
-  tabBarHeight: 60
+  tabBarHeight: 0
 });
 
 // src/useScrollInit.ts
@@ -372,17 +373,21 @@ var useKeyboardInset = Platform2.OS === "web" ? useKeyboardInsetWeb : useKeyboar
 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 = useSafeAreaInsets();
   const keyboardHeight = useKeyboardInset();
-  const { footerHeight, footerFixed: contextFooterFixed, headerHeight, headerFixed: contextHeaderFixed, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared } = useContext3(ScrollViewContext);
+  const { footerAboveKeyboard, footerHeight, footerFixed: contextFooterFixed, headerHeight, headerFixed: contextHeaderFixed, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared, tabBarHeight } = useContext3(ScrollViewContext);
   const headerFixed = isHorizontal ? true : headerFixedProp ?? contextHeaderFixed;
   const footerFixed = isHorizontal ? true : footerFixedProp ?? contextFooterFixed;
   useEffect2(() => {
     pullSearchHeightShared.value = usesContentInset ? pullSearchHeight ?? 0 : 0;
   }, [pullSearchHeight, pullSearchHeightShared]);
-  const containerStyle = useMemo(() => headerHeight === null ? [{ flex: 1, opacity: 0 }, style] : [StyleSheet2.absoluteFill, style], [headerHeight, style]);
-  const insetGeometry = useMemo(() => ({ bottom: (footerFixed ? footerHeight || insets.bottom : insets.bottom) + (keyboardAware ? keyboardHeight : 0), top: headerHeight ?? 0 }), [footerFixed, footerHeight, insets.bottom, headerHeight, keyboardAware, keyboardHeight]);
+  const containerStyle = useMemo(() => headerHeight === null ? [{ flex: 1, opacity: hideUntilMeasured ? 0 : 1 }, style] : [StyleSheet2.absoluteFill, style], [headerHeight, hideUntilMeasured, style]);
+  const insetGeometry = 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 = useMemo(() => usesContentInset || isHorizontal ? null : { paddingBottom: insetGeometry.bottom, paddingTop: insetGeometry.top }, [insetGeometry, isHorizontal]);
   const [startedWithHeader] = useState3(headerHeight !== null);
@@ -408,7 +413,7 @@ function useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedP
       top,
       transform: [{ translateY: chipHidden.value ? withTiming2(-CHIP_SLIDE) : withTiming2(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 };
 }
 
@@ -421,6 +426,10 @@ var CustomListInner = ({ chipProps, chipThreshold, component: List, renderFilter
   const capturedGeneration = useSharedValue4(-1);
   useLayoutEffect2(() => {
     const generation = listGeneration.value;
+    if (Platform3.OS === "web") {
+      capturedGeneration.value = generation;
+      return;
+    }
     runOnUI((gen) => {
       "worklet";
       capturedGeneration.value = gen;
@@ -518,7 +527,7 @@ var Dot = ({ activeColor, index, inactiveColor, pageWidth, scrollPosition }) =>
     const size = DOT_FULL + (DOT_SMALL - DOT_FULL) * t;
     const backgroundColor = interpolateColor(t, [0, 1], [activeColor, inactiveColor]);
     return { backgroundColor, borderRadius: size / 2, height: size, width: size };
-  });
+  }, [scrollPosition, pageWidth, index, activeColor, inactiveColor]);
   return /* @__PURE__ */ jsx4(View2, { style: styles3.dotContainer, children: /* @__PURE__ */ jsx4(Animated2.View, { style: circleStyle }) });
 };
 var HorizontalDots = ({ total }) => {
@@ -529,15 +538,18 @@ var HorizontalDots = ({ total }) => {
   const insetsBottom = insets.bottom;
   const activeColor = theme.colors.primary;
   const inactiveColor = theme.colors.outlineVariant;
-  const pillContainerStyle = useAnimatedStyle2(() => ({
-    bottom: Math.max(footerHeightShared.value, insetsBottom) + 8
-  }));
+  const pillContainerStyle = useAnimatedStyle2(
+    () => ({
+      bottom: Math.max(footerHeightShared.value, insetsBottom) + 8
+    }),
+    [footerHeightShared, insetsBottom]
+  );
   const rowStyle = useAnimatedStyle2(() => {
     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__ */ jsx4(Animated2.View, { pointerEvents: "none", style: [styles3.pillContainer, pillContainerStyle], children: /* @__PURE__ */ jsxs2(View2, { style: styles3.pill, children: [
     /* @__PURE__ */ jsx4(BlurView, { blur, style: StyleSheet3.absoluteFill }),
     /* @__PURE__ */ jsx4(View2, { style: styles3.dotsClip, children: /* @__PURE__ */ jsx4(Animated2.View, { style: [styles3.dotsRow, rowStyle], children: Array.from({ length: total }).map((_, i) => /* @__PURE__ */ jsx4(Dot, { activeColor, index: i, inactiveColor, pageWidth: width, scrollPosition }, i)) }) })
@@ -844,7 +856,10 @@ var PullSearch = forwardRef(function PullSearch2({ debounce, onChangeText, onHei
     (isHidden, wasHidden) => {
       if (isHidden && !wasHidden) runOnJS3(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 = useCallback5(() => {
     setValue("");
@@ -875,7 +890,7 @@ var PullSearch = forwardRef(function PullSearch2({ debounce, onChangeText, onHei
     const showY = -h;
     const hideY = -h + barHeight;
     return { opacity: interpolate(scrollPosition.value, [showY, hideY], [1, 0], Extrapolation.CLAMP) };
-  }, [barHeight, headerHeight]);
+  }, [barHeight, headerHeight, scrollPosition]);
   return /* @__PURE__ */ jsx6(Animated3.View, { onLayout: handleLayout, style: [styles5.container, animatedStyle], children: /* @__PURE__ */ jsx6(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 = StyleSheet4.create({
@@ -913,7 +928,7 @@ var scrollViewReducer = (state = defaultScrollViewSettings, action) => {
 
 // src/ScrollView.tsx
 import { memo as memo3, useCallback as useCallback6, useContext as useContext9, useLayoutEffect as useLayoutEffect4, useMemo as useMemo4, useRef as useRef6 } from "react";
-import { View as View4 } from "react-native";
+import { Platform as Platform4, View as View4 } from "react-native";
 import { Gesture as Gesture3, GestureDetector as GestureDetector3 } from "react-native-gesture-handler";
 import Animated4, { runOnUI as runOnUI2, useSharedValue as useSharedValue5 } from "react-native-reanimated";
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -925,6 +940,10 @@ var ScrollViewInner = ({ chipProps, chipThreshold, children, contentContainerSty
   const capturedGeneration = useSharedValue5(-1);
   useLayoutEffect4(() => {
     const generation = listGeneration.value;
+    if (Platform4.OS === "web") {
+      capturedGeneration.value = generation;
+      return;
+    }
     runOnUI2((gen) => {
       "worklet";
       capturedGeneration.value = gen;
@@ -989,8 +1008,9 @@ import Animated5, { useAnimatedStyle as useAnimatedStyle4 } from "react-native-r
 import { useSafeAreaInsets as useSafeAreaInsets3 } from "react-native-safe-area-context";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var ScrollViewFooter = ({ children, style }) => {
-  const { blur, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared } = useContext10(ScrollViewContext);
+  const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared } = useContext10(ScrollViewContext);
   const insets = useSafeAreaInsets3();
+  const keyboardHeight = useKeyboardInset();
   useEffect4(
     () => () => {
       setFooterHeight(0);
@@ -1010,10 +1030,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__ */ jsxs5(Animated5.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__ */ jsxs5(Animated5.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [styles6.footer, { paddingBottom: containerPaddingBottom }, footerStyle], children: [
     footerHeight > 0 && /* @__PURE__ */ jsx8(BlurView2, { blur, style: StyleSheet5.absoluteFill }),
-    /* @__PURE__ */ jsx8(View5, { style: [styles6.row, { paddingBottom: insets.bottom }, style], children })
+    /* @__PURE__ */ jsx8(View5, { style: [styles6.row, { paddingBottom: rowPaddingBottom }, style], children })
   ] });
 };
 var styles6 = StyleSheet5.create({
@@ -1030,7 +1052,7 @@ import Animated6, { useAnimatedStyle as useAnimatedStyle5 } from "react-native-r
 import { useSafeAreaInsets as useSafeAreaInsets4 } from "react-native-safe-area-context";
 import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var ActionBg = ({ blur, style }) => blur ? /* @__PURE__ */ jsx9(View6, { style: [StyleSheet6.absoluteFill, styles7.actionBg, style], children: /* @__PURE__ */ jsx9(BlurView3, { blur: true, style: StyleSheet6.absoluteFill }) }) : /* @__PURE__ */ jsx9(View6, { style: [StyleSheet6.absoluteFill, styles7.actionBg, style], pointerEvents: "none", children: /* @__PURE__ */ jsx9(Surface, { style: StyleSheet6.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 } = useContext11(ScrollViewContext);
   const { settings } = useContext11(ScrollViewSettingsContext);
   const effectiveBackActionFixed = backActionFixed ?? settings.backActionFixed;
@@ -1044,35 +1066,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 = useAnimatedStyle5(() => {
     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 = useAnimatedStyle5(() => {
+    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 = useAnimatedStyle5(() => {
     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__ */ jsxs6(Fragment4, { children: [
-    /* @__PURE__ */ jsx9(Animated6.View, { pointerEvents: "none", style: [styles7.blur, blurStyle], children: headerHeight !== null && headerHeight > 0 && /* @__PURE__ */ jsx9(BlurView3, { blur, style: [styles7.blurInner, { height: headerHeight }] }) }),
+    /* @__PURE__ */ jsx9(Animated6.View, { pointerEvents: "none", style: [styles7.blur, blurStyle], children: headerHeight !== 0 && /* @__PURE__ */ jsx9(BlurView3, { blur, style: [styles7.blurInner, { height: headerHeight ?? unmeasuredHeight }] }) }),
     /* @__PURE__ */ jsxs6(Animated6.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [headerHeight === null ? styles7.headerInit : styles7.header, translateStyle], children: [
       /* @__PURE__ */ jsx9(View6, { style: [{ paddingTop: top }, style], children: children ?? /* @__PURE__ */ jsxs6(View6, { style: [styles7.content, { minHeight: contentMinHeight }], children: [
         /* @__PURE__ */ jsx9(View6, { style: styles7.side }),
@@ -1087,10 +1110,10 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionFi
     /* @__PURE__ */ jsx9(Animated6.View, { pointerEvents: "none", style: [styles7.progress, progressStyle], children: /* @__PURE__ */ jsx9(ProgressBar, { indeterminate: progress === null, visible: progressing, progress: progress ?? void 0 }) }),
     backAction && (effectiveBackActionFixed ? /* @__PURE__ */ jsxs6(Animated6.View, { style: leadingStyle, children: [
       /* @__PURE__ */ jsx9(ActionBg, { blur, style: actionStyle }),
-      /* @__PURE__ */ jsx9(Appbar.BackAction, { onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
+      /* @__PURE__ */ jsx9(Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
     ] }) : /* @__PURE__ */ jsxs6(Animated6.View, { style: [leadingStyle, translateStyle], children: [
       /* @__PURE__ */ jsx9(ActionBg, { blur, style: actionStyle }),
-      /* @__PURE__ */ jsx9(Appbar.BackAction, { onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
+      /* @__PURE__ */ jsx9(Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
     ] })),
     trailingAction && (trailingActionFixed ? /* @__PURE__ */ jsxs6(View6, { style: trailingStyle, children: [
       /* @__PURE__ */ jsx9(ActionBg, { blur, style: actionStyle }),
@@ -1123,7 +1146,7 @@ import { useCallback as useCallback7, useContext as useContext12, useEffect as u
 import { Dimensions as Dimensions3 } from "react-native";
 import { useSharedValue as useSharedValue6 } from "react-native-reanimated";
 import { jsx as jsx10 } from "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 } = useContext12(ScrollViewSettingsContext);
   const effectiveBlur = useBlur(blur);
   const effectiveSnapBack = snapBack ?? settings.snapBack;
@@ -1149,10 +1172,11 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerFixed, headerFi
   }, [effectiveSnapBack, effectiveSnapBackFooter, effectiveSnapBackHeader, snapBackFooterShared, snapBackHeaderShared]);
   const setHeaderHeight = useCallback7(
     (h) => {
+      if (h === 0 && headerHeight) return;
       setHeaderHeightState(h);
       headerHeightShared.value = h ?? 0;
     },
-    [headerHeightShared]
+    [headerHeight, headerHeightShared]
   );
   const onListUnmount = useCallback7(() => {
     listGeneration.value += 1;
@@ -1177,7 +1201,7 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerFixed, headerFi
   const scrollHeight = useMemo5(() => Dimensions3.get("window").height - (headerHeight ?? 0) - footerHeight, [headerHeight, footerHeight]);
   const effectiveHeaderFixed = fixed || (headerFixed ?? settings.headerFixed);
   const effectiveFooterFixed = fixed || (footerFixed ?? settings.footerFixed);
-  const value = useMemo5(() => ({ 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 = useMemo5(() => ({ 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__ */ jsx10(ScrollViewContext.Provider, { value, children });
 };
 
@@ -1205,7 +1229,7 @@ var ScrollViewSettingsProvider = ({ children, onChange, initialValue }) => {
 
 // src/SectionList.tsx
 import { memo as memo4, useCallback as useCallback10, useContext as useContext14, useEffect as useEffect6, useLayoutEffect as useLayoutEffect6, useMemo as useMemo7, useRef as useRef9 } from "react";
-import { Dimensions as Dimensions4, SectionList as RNSectionList, View as View7 } from "react-native";
+import { Dimensions as Dimensions4, Platform as Platform5, SectionList as RNSectionList, View as View7 } from "react-native";
 import { Gesture as Gesture4, GestureDetector as GestureDetector4 } from "react-native-gesture-handler";
 import Animated7, { runOnUI as runOnUI3, useSharedValue as useSharedValue8 } from "react-native-reanimated";
 
@@ -1252,7 +1276,12 @@ function useStickyHeaders(headerFixed, enabled) {
     (curr, prev) => {
       if (curr !== prev) runOnJS4(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 = useAnimatedStyle6(() => {
     const hHeight = headerHeightShared.value;
@@ -1267,7 +1296,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 = useAnimatedStyle6(() => {
     const hidden = { opacity: 0, top: 0, transform: [{ translateY: 0 }] };
     if (!enabled) return hidden;
@@ -1295,7 +1324,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 = useCallback9(
     (index, pageY, height) => {
       const contentY = pageY + scrollPosition.value;
@@ -1324,11 +1353,15 @@ var AnimatedSectionList = Animated7.createAnimatedComponent(RNSectionList);
 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 = useRef9(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 } = useContext14(ScrollViewContext);
   const capturedGeneration = useSharedValue8(-1);
   useLayoutEffect6(() => {
     const generation = listGeneration.value;
+    if (Platform5.OS === "web") {
+      capturedGeneration.value = generation;
+      return;
+    }
     runOnUI3((gen) => {
       "worklet";
       capturedGeneration.value = gen;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/scroll-view",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Blur styled scroll system for React Native. Floating headers/footers, keyboard awareness, and scroll-away chrome",
   "keywords": [
     "react-native",
@@ -27,7 +27,7 @@
   "type": "commonjs",
   "exports": {
     ".": {
-      "react-native": "./src/index.ts",
+      "react-native": "./dist/index.js",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
@@ -35,7 +35,7 @@
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
-  "react-native": "src/index.ts",
+  "react-native": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
@@ -45,6 +45,7 @@
   ],
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "build:watch": "tsup src/index.ts --format cjs,esm --dts --watch",
     "fix": "eslint --fix",
     "lint": "eslint",
     "prepublishOnly": "npm run build",
@@ -59,7 +60,7 @@
   },
   "devDependencies": {
     "@reduxjs/toolkit": "^2.12.0",
-    "@rific/auto-paper": "^0.6.0",
+    "@rific/auto-paper": "^0.8.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
@@ -70,6 +71,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-package-json": "^1.0.0",
     "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-native": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^13.0.0",
     "jest": "^30.4.2",
@@ -86,11 +88,11 @@
     "ts-jest": "^29.4.9",
     "ts-node": "^10.9.2",
     "tsup": "^8.0.0",
-    "typescript": "^5.0.0",
+    "typescript": "^6.0.3",
     "typescript-eslint": "^8.59.3"
   },
   "peerDependencies": {
-    "@rific/auto-paper": "^0.6.0",
+    "@rific/auto-paper": "^0.8.0",
     "react": ">=18.0.0",
     "react-native": ">=0.76.0",
     "react-native-gesture-handler": ">=2.0.0",

package/src/CustomList.tsx

@@ -1,5 +1,5 @@
 import { type ComponentType, memo, type ReactElement, type ReactNode, type RefObject, useCallback, useContext, useLayoutEffect, useMemo, useRef } from 'react'
-import { Dimensions, type NativeScrollEvent, type NativeSyntheticEvent, type StyleProp, View, type ViewStyle } from 'react-native'
+import { Dimensions, type NativeScrollEvent, type NativeSyntheticEvent, Platform, type StyleProp, View, type ViewStyle } from 'react-native'
 import { Gesture, GestureDetector, type GestureType } from 'react-native-gesture-handler'
 import { runOnUI, useSharedValue } from 'react-native-reanimated'
 
@@ -52,8 +52,16 @@ const CustomListInner = <P extends object>({ chipProps, chipThreshold, component
   // imperative scrollTo calls). Routing the write itself through runOnUI puts it on the UI thread's
   // own serial queue, so it's guaranteed to run before any onScroll worklet invocation that could
   // only be queued after this component finishes mounting.
+  //
+  // Web has no such thread split, though — see ScrollView.tsx's own doc comment on this same
+  // pattern for why runOnUI's deferred-to-next-frame behavior there leaves a real gap, and why a
+  // synchronous assignment is the correct fix rather than a workaround.
   useLayoutEffect(() => {
     const generation = listGeneration.value
+    if (Platform.OS === 'web') {
+      capturedGeneration.value = generation
+      return
+    }
     runOnUI((gen: number) => {
       'worklet'
       capturedGeneration.value = gen

package/src/PullSearch.tsx

@@ -47,7 +47,10 @@ export const PullSearch = forwardRef<PullSearchHandle, PullSearchProps>(function
     (isHidden, wasHidden) => {
       if (isHidden && !wasHidden) 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 = useCallback(() => {
@@ -85,7 +88,7 @@ export const PullSearch = forwardRef<PullSearchHandle, PullSearchProps>(function
     const showY = -h
     const hideY = -h + barHeight
     return { opacity: interpolate(scrollPosition.value, [showY, hideY], [1, 0], Extrapolation.CLAMP) }
-  }, [barHeight, headerHeight])
+  }, [barHeight, headerHeight, scrollPosition])
 
   return (
     <Animated.View onLayout={handleLayout} style={[styles.container, animatedStyle]}>

package/src/ScrollView.tsx

@@ -1,5 +1,5 @@
 import { memo, type RefObject, useCallback, useContext, useLayoutEffect, useMemo, useRef } from 'react'
-import { type NativeScrollEvent, type NativeSyntheticEvent, ScrollView as RNScrollView, type ScrollViewProps as RNScrollViewProps, View } from 'react-native'
+import { type NativeScrollEvent, type NativeSyntheticEvent, Platform, ScrollView as RNScrollView, type ScrollViewProps as RNScrollViewProps, View } from 'react-native'
 import { Gesture, GestureDetector, type GestureType } from 'react-native-gesture-handler'
 import Animated, { runOnUI, useSharedValue } from 'react-native-reanimated'
 
@@ -47,8 +47,23 @@ const ScrollViewInner = ({ chipProps, chipThreshold, children, contentContainerS
   // imperative scrollTo calls). Routing the write itself through runOnUI puts it on the UI thread's
   // own serial queue, so it's guaranteed to run before any onScroll worklet invocation that could
   // only be queued after this component finishes mounting.
+  //
+  // Web has no such thread split, though — react-native-worklets' own runOnUI there (see its
+  // threads.js) only enqueues the callback for the NEXT requestAnimationFrame, it doesn't run it
+  // synchronously. That opens exactly the gap the native path exists to close: a scroll event
+  // (including useScrollInit's own mount-time imperative scrollTo) landing before that deferred
+  // frame sees capturedGeneration still at its -1 placeholder, fails the generation check below,
+  // and — since this effect only ever runs once per mount — never gets a second chance, silently
+  // disabling scroll tracking (and therefore header/footer scroll-away) for this instance's entire
+  // lifetime. Assigning directly is both simpler and provably correct on web: single-threaded JS
+  // makes a synchronous write immediately visible to any read that follows it in program order, so
+  // there's no cross-thread visibility gap here to guard against in the first place.
   useLayoutEffect(() => {
     const generation = listGeneration.value
+    if (Platform.OS === 'web') {
+      capturedGeneration.value = generation
+      return
+    }
     runOnUI((gen: number) => {
       'worklet'
       capturedGeneration.value = gen

package/src/ScrollViewContext.ts

@@ -3,6 +3,7 @@ import { SharedValue } from 'react-native-reanimated'
 
 export type ScrollViewContextType = {
   blur: boolean
+  footerAboveKeyboard: boolean
   footerHeight: number
   footerHeightShared: SharedValue<number>
   footerFixed: boolean
@@ -36,6 +37,7 @@ export type ScrollViewContextType = {
 
 export const ScrollViewContext = createContext<ScrollViewContextType>({
   blur: true,
+  footerAboveKeyboard: false,
   footerHeight: 0,
   footerHeightShared: null as unknown as SharedValue<number>,
   footerFixed: false,
@@ -59,5 +61,5 @@ export const ScrollViewContext = createContext<ScrollViewContextType>({
   setProgressing: () => {},
   snapBackFooterShared: null as unknown as SharedValue<boolean>,
   snapBackHeaderShared: null as unknown as SharedValue<boolean>,
-  tabBarHeight: 60
+  tabBarHeight: 0
 })

package/src/ScrollViewFooter.tsx

@@ -5,6 +5,7 @@ import Animated, { useAnimatedStyle } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { ScrollViewContext } from './ScrollViewContext'
+import { useKeyboardInset } from './useKeyboardInset'
 
 export type ScrollViewFooterProps = {
   children?: ReactNode | ReactNode[]
@@ -12,8 +13,9 @@ export type ScrollViewFooterProps = {
 }
 
 export const ScrollViewFooter = ({ children, style }: ScrollViewFooterProps) => {
-  const { blur, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared } = useContext(ScrollViewContext)
+  const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared } = useContext(ScrollViewContext)
   const insets = useSafeAreaInsets()
+  const keyboardHeight = useKeyboardInset()
   useEffect(
     () => () => {
       setFooterHeight(0)
@@ -27,17 +29,46 @@ export const ScrollViewFooter = ({ children, style }: ScrollViewFooterProps) =>
   }: LayoutChangeEvent) => {
     if (footerHeight !== height) setFooterHeight(height)
   }
+  // See ScrollViewHeader's translateStyle/blurStyle/progressStyle for why every SharedValue read
+  // here (scrollPosition, headerHeightShared, pullSearchHeightShared, snapBackFooterShared,
+  // footerOffset) also has to be listed explicitly — on web, reanimated doesn't pick up their
+  // mutations as reactive triggers unless they're in this array, unlike native.
   const footerStyle = useAnimatedStyle(() => {
     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) }] }
-  }, [footerHeight, footerFixed])
+  }, [footerHeight, footerFixed, headerHeightShared, pullSearchHeightShared, scrollPosition, snapBackFooterShared, footerOffset])
+  // Floating above the keyboard is done by GROWING this container (via paddingBottom) rather than
+  // translating it. Translating the whole bar left its bottom edge — and the BlurView filling it —
+  // floating above the true screen bottom, exposing a gap of whatever sits behind (visible as a
+  // strip above the keyboard, and worse at the keyboard's rounded top corners, which dip below its
+  // reported height). Growing the container instead keeps its `bottom: 0` anchor untouched: the
+  // blur backdrop always reaches all the way to the physical edge, sealing that gap entirely,
+  // while the extra height pushes the row (this bar's actual content) up by keyboardHeight, same
+  // as the old translateY did for it.
+  const containerPaddingBottom = footerFixed && footerAboveKeyboard ? keyboardHeight : 0
+  // The safe-area bottom inset exists to clear the home indicator at the physical screen edge.
+  // Once footerAboveKeyboard has floated this bar's content up above an open keyboard, it's no
+  // longer sitting at that edge — the keyboard itself now occupies that space — so the inset would
+  // just be dead space under the content (e.g. under a Save button) for no reason.
+  //
+  // This has to ramp continuously with keyboardHeight, not flip as a boolean once the keyboard
+  // fully closes: containerPaddingBottom above already tracks keyboardHeight every frame, so a
+  // step-function padding change here lands in the same frame keyboardHeight hits 0, growing this
+  // row by insets.bottom right as the container finishes shrinking back down — the content visually
+  // overshoots to the physical bottom edge and then snaps back up. Ramping this padding by the same
+  // keyboardHeight keeps the content's on-screen position moving continuously throughout: for
+  // keyboardHeight >= insets.bottom the padding is 0 (unchanged from mid-close), and for the last
+  // insets.bottom worth of keyboard travel, containerPaddingBottom's continued shrink and this
+  // padding's growth cancel out exactly, so the content holds still at the safe-area line instead
+  // of dropping past it and correcting back up.
+  const rowPaddingBottom = footerFixed && footerAboveKeyboard ? Math.max(insets.bottom - keyboardHeight, 0) : insets.bottom
   return (
-    <Animated.View onLayout={handleLayout} pointerEvents='box-none' style={[styles.footer, footerStyle]}>
+    <Animated.View onLayout={handleLayout} pointerEvents='box-none' style={[styles.footer, { paddingBottom: containerPaddingBottom }, footerStyle]}>
       {footerHeight > 0 && <BlurView blur={blur} style={StyleSheet.absoluteFill} />}
-      <View style={[styles.row, { paddingBottom: insets.bottom }, style]}>{children}</View>
+      <View style={[styles.row, { paddingBottom: rowPaddingBottom }, style]}>{children}</View>
     </Animated.View>
   )
 }