@rific/scroll-view 0.6.0 → 0.6.2

package/dist/index.d.mts

@@ -6,7 +6,7 @@ import { ChipProps as ChipProps$1 } from '@rific/auto-paper';
 import * as react_native_reanimated from 'react-native-reanimated';
 import { SharedValue } from 'react-native-reanimated';
 
-type ChipProps = Omit<ChipProps$1, 'compact' | 'icon' | 'onPress'> & {
+type ChipProps = Omit<ChipProps$1, 'compact' | 'icon' | 'onPress' | 'children'> & {
     label?: ReactNode;
 };
 
@@ -122,7 +122,7 @@ declare const ScrollView: typeof ScrollViewInner;
 type ScrollViewContextType = {
     blur: boolean;
     footerAboveKeyboard: boolean;
-    footerHeight: number;
+    footerHeight: number | null;
     footerHeightShared: SharedValue<number>;
     footerFixed: boolean;
     footerOffset: SharedValue<number>;
@@ -141,7 +141,7 @@ type ScrollViewContextType = {
     progressing: boolean;
     scrollHeight: number;
     scrollPosition: SharedValue<number>;
-    setFooterHeight: (h: number) => void;
+    setFooterHeight: (h: number | null) => void;
     setHeaderHeight: (h: number | null) => void;
     setProgress: (p: number | null) => void;
     setProgressing: (b: boolean) => void;
@@ -158,7 +158,7 @@ declare const ScrollViewFooter: ({ children, style }: ScrollViewFooterProps) =>
 type ScrollViewHeaderProps = {
     actionSize?: number;
     actionStyle?: ViewStyle;
-    backAction?: () => void;
+    backAction?: (() => void) | ReactNode;
     backActionAccessibilityLabel?: string;
     backActionFixed?: boolean;
     caption?: string;

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import { ChipProps as ChipProps$1 } from '@rific/auto-paper';
 import * as react_native_reanimated from 'react-native-reanimated';
 import { SharedValue } from 'react-native-reanimated';
 
-type ChipProps = Omit<ChipProps$1, 'compact' | 'icon' | 'onPress'> & {
+type ChipProps = Omit<ChipProps$1, 'compact' | 'icon' | 'onPress' | 'children'> & {
     label?: ReactNode;
 };
 
@@ -122,7 +122,7 @@ declare const ScrollView: typeof ScrollViewInner;
 type ScrollViewContextType = {
     blur: boolean;
     footerAboveKeyboard: boolean;
-    footerHeight: number;
+    footerHeight: number | null;
     footerHeightShared: SharedValue<number>;
     footerFixed: boolean;
     footerOffset: SharedValue<number>;
@@ -141,7 +141,7 @@ type ScrollViewContextType = {
     progressing: boolean;
     scrollHeight: number;
     scrollPosition: SharedValue<number>;
-    setFooterHeight: (h: number) => void;
+    setFooterHeight: (h: number | null) => void;
     setHeaderHeight: (h: number | null) => void;
     setProgress: (p: number | null) => void;
     setProgressing: (b: boolean) => void;
@@ -158,7 +158,7 @@ declare const ScrollViewFooter: ({ children, style }: ScrollViewFooterProps) =>
 type ScrollViewHeaderProps = {
     actionSize?: number;
     actionStyle?: ViewStyle;
-    backAction?: () => void;
+    backAction?: (() => void) | ReactNode;
     backActionAccessibilityLabel?: string;
     backActionFixed?: boolean;
     caption?: string;

package/dist/index.js

@@ -64,15 +64,18 @@ var RefreshControl = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(impo
 // src/internal/ScrollViewChip.tsx
 var import_auto_paper = require("@rific/auto-paper");
 var import_react_native2 = require("react-native");
+var import_react_native_paper = require("react-native-paper");
 var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ScrollViewChip = ({ chipProps, isHorizontal, onChipPress, onPress, style }) => {
-  const { label, style: chipStyle, ...restChipProps } = chipProps ?? {};
+  const { colors } = (0, import_react_native_paper.useTheme)();
+  const { label, selectedColor, style: chipStyle, ...restChipProps } = chipProps ?? {};
   const handlePress = onChipPress ? () => {
     onPress();
     onChipPress();
   } : onPress;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_reanimated.default.View, { style: [styles.chip, style], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_auto_paper.Chip, { compact: true, ...restChipProps, icon: isHorizontal ? "chevron-left" : "chevron-up", onPress: handlePress, style: [styles.chipInner, chipStyle], children: label ?? (isHorizontal ? "Start" : "Top") }) });
+  const iconColor = selectedColor ?? (restChipProps.mode === "outlined" ? colors.onSurfaceVariant : colors.onSecondaryContainer);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_reanimated.default.View, { style: [styles.chip, style], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_auto_paper.Chip, { compact: true, selectedColor, ...restChipProps, avatar: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Icon, { source: isHorizontal ? "chevron-left" : "chevron-up", size: 18, color: iconColor }), onPress: handlePress, style: [styles.chipInner, chipStyle], children: label ?? (isHorizontal ? "Start" : "Top") }) });
 };
 var styles = import_react_native2.StyleSheet.create({
   chip: { alignItems: "center", left: 0, position: "absolute", right: 0, zIndex: 3 },
@@ -88,7 +91,7 @@ var import_react = require("react");
 var ScrollViewContext = (0, import_react.createContext)({
   blur: true,
   footerAboveKeyboard: false,
-  footerHeight: 0,
+  footerHeight: null,
   footerHeightShared: null,
   footerFixed: false,
   footerOffset: null,
@@ -428,7 +431,7 @@ 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, headerFixed: contextHeaderFixed, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared, tabBarHeight } = (0, import_react5.useContext)(ScrollViewContext);
+  const { 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;
   (0, import_react5.useEffect)(() => {
@@ -452,11 +455,11 @@ function useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedP
       return {
         opacity: chipHidden.value ? (0, import_react_native_reanimated5.withTiming)(0) : (0, import_react_native_reanimated5.withTiming)(1),
         pointerEvents,
-        top: Math.max(headerHeight ?? 0, insets.top) + 4,
+        top: Math.max(headerHeightShared.value, insets.top) + 4,
         transform: [{ translateX: chipHidden.value ? (0, import_react_native_reanimated5.withTiming)(-CHIP_SLIDE) : (0, import_react_native_reanimated5.withTiming)(0) }]
       };
     }
-    const h = headerHeight ?? 0;
+    const h = headerHeightShared.value;
     const slide = headerFixed ? 0 : snapBackHeaderShared.value ? -headerOffset.value : Math.max(0, scrollPosition.value + h - pullSearchHeightShared.value);
     const top = Math.max(h - slide, insets.top) + 4;
     return {
@@ -465,7 +468,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, chipHidden, snapBackHeaderShared, headerOffset, scrollPosition, pullSearchHeightShared]);
+  }, [isHorizontal, headerFixed, headerHeightShared, insets.top, chipHidden, snapBackHeaderShared, headerOffset, scrollPosition, pullSearchHeightShared]);
   return { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, contentPadding, footerFixed, headerFixed, headerHeight, insets, isHorizontal: isHorizontal ?? false };
 }
 
@@ -556,7 +559,7 @@ var import_react_native_gesture_handler2 = require("react-native-gesture-handler
 var import_auto_paper2 = require("@rific/auto-paper");
 var import_react7 = require("react");
 var import_react_native7 = require("react-native");
-var import_react_native_paper = require("react-native-paper");
+var import_react_native_paper2 = require("react-native-paper");
 var import_react_native_reanimated7 = __toESM(require("react-native-reanimated"));
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -586,7 +589,7 @@ var HorizontalDots = ({ total }) => {
   const { blur, footerHeightShared, scrollPosition } = (0, import_react7.useContext)(ScrollViewContext);
   const { width } = (0, import_react_native7.useWindowDimensions)();
   const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
-  const theme = (0, import_react_native_paper.useTheme)();
+  const theme = (0, import_react_native_paper2.useTheme)();
   const insetsBottom = insets.bottom;
   const activeColor = theme.colors.primary;
   const inactiveColor = theme.colors.outlineVariant;
@@ -880,12 +883,12 @@ var FlatList = (0, import_react9.memo)(FlatListInner);
 // src/PullSearch.tsx
 var import_react10 = require("react");
 var import_react_native9 = require("react-native");
-var import_react_native_paper2 = require("react-native-paper");
+var import_react_native_paper3 = require("react-native-paper");
 var import_react_native_reanimated9 = __toESM(require("react-native-reanimated"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var PullSearch = (0, import_react10.forwardRef)(function PullSearch2({ debounce, onChangeText, onHeightChange, placeholder, value: propValue }, ref) {
   const { headerHeight, scrollPosition } = (0, import_react10.useContext)(ScrollViewContext);
-  const theme = (0, import_react_native_paper2.useTheme)();
+  const theme = (0, import_react_native_paper3.useTheme)();
   const inputRef = (0, import_react10.useRef)(null);
   const [barHeight, setBarHeight] = (0, import_react10.useState)(0);
   const [value, setValue] = (0, import_react10.useState)(propValue ?? "");
@@ -943,7 +946,7 @@ var PullSearch = (0, import_react10.forwardRef)(function PullSearch2({ debounce,
     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, 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 }) });
+  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_paper3.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({
   container: { paddingVertical: 8 },
@@ -1058,14 +1061,20 @@ var import_react13 = require("react");
 var import_react_native11 = require("react-native");
 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 import_jsx_runtime8 = (
+  // 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
+  // bar has to clear it rather than rendering flush against 0 and overlapping/hiding behind it.
+  require("react/jsx-runtime")
+);
 var ScrollViewFooter = ({ children, style }) => {
-  const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared } = (0, import_react13.useContext)(ScrollViewContext);
+  const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared, tabBarHeight } = (0, import_react13.useContext)(ScrollViewContext);
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   const keyboardHeight = useKeyboardInset();
   (0, import_react13.useEffect)(
     () => () => {
-      setFooterHeight(0);
+      setFooterHeight(null);
     },
     [setFooterHeight]
   );
@@ -1081,17 +1090,17 @@ var ScrollViewFooter = ({ children, style }) => {
     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) }] };
+    return { transform: [{ translateY: Math.min(effective, footerHeight ?? 0) }] };
   }, [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 }),
+  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, { paddingBottom: rowPaddingBottom }, style], children })
   ] });
 };
 var styles6 = import_react_native11.StyleSheet.create({
-  footer: { bottom: 0, left: 0, position: "absolute", right: 0, zIndex: 2 },
+  footer: { left: 0, position: "absolute", right: 0, zIndex: 2 },
   row: { alignItems: "center", flexDirection: "row", zIndex: 1 }
 });
 
@@ -1099,23 +1108,25 @@ var styles6 = import_react_native11.StyleSheet.create({
 var import_auto_paper4 = require("@rific/auto-paper");
 var import_react14 = require("react");
 var import_react_native12 = require("react-native");
-var import_react_native_paper3 = require("react-native-paper");
+var import_react_native_paper4 = require("react-native-paper");
 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 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 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 { blur, headerHeight, headerFixed, headerHeightShared, headerOffset, progress, progressing, pullSearchHeightShared, scrollPosition, setHeaderHeight, snapBackHeaderShared } = (0, import_react14.useContext)(ScrollViewContext);
   const { settings } = (0, import_react14.useContext)(ScrollViewSettingsContext);
   const effectiveBackActionFixed = backActionFixed ?? settings.backActionFixed;
   const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
-  const theme = (0, import_react_native_paper3.useTheme)();
+  const theme = (0, import_react_native_paper4.useTheme)();
   const top = topInset ? insets.top : 0;
+  const measuredShared = (0, import_react_native_reanimated12.useSharedValue)(false);
   const handleLayout = ({
     nativeEvent: {
       layout: { height }
     }
   }) => {
+    measuredShared.value = true;
     if (headerHeight !== height) setHeaderHeight(height);
   };
   const actionMargin = 4;
@@ -1124,23 +1135,23 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
   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;
+    const effective = scrollPosition.value + headerHeightShared.value - pullSearchHeightShared.value;
     if (effective <= 0) return { transform: [{ translateY: 0 }] };
     return { transform: [{ translateY: -effective }] };
-  }, [headerFixed, headerHeight, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared]);
+  }, [headerFixed, headerHeightShared, 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 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]);
+    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 h = headerHeight ?? 0;
+    const h = headerHeightShared.value;
     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, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared]);
+  }, [headerFixed, headerHeightShared, 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 };
@@ -1159,13 +1170,13 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
       ] }) }),
       !blur && /* @__PURE__ */ (0, import_jsx_runtime9.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_paper3.ProgressBar, { indeterminate: progress === null, visible: progressing, progress: progress ?? void 0 }) }),
+    /* @__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 }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper3.Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
+      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 }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper3.Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
+      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
     ] })),
     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 }),
@@ -1205,7 +1216,7 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard =
   const effectiveSnapBackHeader = snapBackHeader ?? settings.snapBackHeader;
   const effectiveSnapBackFooter = snapBackFooter ?? settings.snapBackFooter;
   const [headerHeight, setHeaderHeightState] = (0, import_react15.useState)(null);
-  const [footerHeight, setFooterHeightState] = (0, import_react15.useState)(0);
+  const [footerHeight, setFooterHeightState] = (0, import_react15.useState)(null);
   const [progress, setProgress] = (0, import_react15.useState)(null);
   const [progressing, setProgressing] = (0, import_react15.useState)(false);
   const scrollPosition = (0, import_react_native_reanimated13.useSharedValue)(0);
@@ -1245,12 +1256,13 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard =
   }, [headerHeight]);
   const setFooterHeight = (0, import_react15.useCallback)(
     (h) => {
+      if (h === 0 && footerHeight) return;
       setFooterHeightState(h);
-      footerHeightShared.value = h;
+      footerHeightShared.value = h ?? 0;
     },
-    [footerHeightShared]
+    [footerHeight, footerHeightShared]
   );
-  const scrollHeight = (0, import_react15.useMemo)(() => import_react_native13.Dimensions.get("window").height - (headerHeight ?? 0) - footerHeight, [headerHeight, footerHeight]);
+  const scrollHeight = (0, import_react15.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_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]);

package/dist/index.mjs

@@ -12,15 +12,18 @@ var RefreshControl = (props) => /* @__PURE__ */ jsx(RNRefreshControl, { refreshi
 // src/internal/ScrollViewChip.tsx
 import { Chip } from "@rific/auto-paper";
 import { StyleSheet } from "react-native";
+import { Icon, useTheme } from "react-native-paper";
 import Animated from "react-native-reanimated";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var ScrollViewChip = ({ chipProps, isHorizontal, onChipPress, onPress, style }) => {
-  const { label, style: chipStyle, ...restChipProps } = chipProps ?? {};
+  const { colors } = useTheme();
+  const { label, selectedColor, style: chipStyle, ...restChipProps } = chipProps ?? {};
   const handlePress = onChipPress ? () => {
     onPress();
     onChipPress();
   } : onPress;
-  return /* @__PURE__ */ jsx2(Animated.View, { style: [styles.chip, style], children: /* @__PURE__ */ jsx2(Chip, { compact: true, ...restChipProps, icon: isHorizontal ? "chevron-left" : "chevron-up", onPress: handlePress, style: [styles.chipInner, chipStyle], children: label ?? (isHorizontal ? "Start" : "Top") }) });
+  const iconColor = selectedColor ?? (restChipProps.mode === "outlined" ? colors.onSurfaceVariant : colors.onSecondaryContainer);
+  return /* @__PURE__ */ jsx2(Animated.View, { style: [styles.chip, style], children: /* @__PURE__ */ jsx2(Chip, { compact: true, selectedColor, ...restChipProps, avatar: /* @__PURE__ */ jsx2(Icon, { source: isHorizontal ? "chevron-left" : "chevron-up", size: 18, color: iconColor }), onPress: handlePress, style: [styles.chipInner, chipStyle], children: label ?? (isHorizontal ? "Start" : "Top") }) });
 };
 var styles = StyleSheet.create({
   chip: { alignItems: "center", left: 0, position: "absolute", right: 0, zIndex: 3 },
@@ -36,7 +39,7 @@ import { createContext } from "react";
 var ScrollViewContext = createContext({
   blur: true,
   footerAboveKeyboard: false,
-  footerHeight: 0,
+  footerHeight: null,
   footerHeightShared: null,
   footerFixed: false,
   footerOffset: null,
@@ -376,7 +379,7 @@ var CHIP_SLIDE = 48;
 function useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, hideUntilMeasured, isHorizontal, keyboardAware, pullSearchHeight, style } = {}) {
   const insets = useSafeAreaInsets();
   const keyboardHeight = useKeyboardInset();
-  const { footerAboveKeyboard, footerHeight, footerFixed: contextFooterFixed, headerHeight, headerFixed: contextHeaderFixed, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared, tabBarHeight } = useContext3(ScrollViewContext);
+  const { footerAboveKeyboard, footerHeight, footerFixed: contextFooterFixed, headerHeight, headerHeightShared, headerFixed: contextHeaderFixed, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared, tabBarHeight } = useContext3(ScrollViewContext);
   const headerFixed = isHorizontal ? true : headerFixedProp ?? contextHeaderFixed;
   const footerFixed = isHorizontal ? true : footerFixedProp ?? contextFooterFixed;
   useEffect2(() => {
@@ -400,11 +403,11 @@ function useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedP
       return {
         opacity: chipHidden.value ? withTiming2(0) : withTiming2(1),
         pointerEvents,
-        top: Math.max(headerHeight ?? 0, insets.top) + 4,
+        top: Math.max(headerHeightShared.value, insets.top) + 4,
         transform: [{ translateX: chipHidden.value ? withTiming2(-CHIP_SLIDE) : withTiming2(0) }]
       };
     }
-    const h = headerHeight ?? 0;
+    const h = headerHeightShared.value;
     const slide = headerFixed ? 0 : snapBackHeaderShared.value ? -headerOffset.value : Math.max(0, scrollPosition.value + h - pullSearchHeightShared.value);
     const top = Math.max(h - slide, insets.top) + 4;
     return {
@@ -413,7 +416,7 @@ function useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedP
       top,
       transform: [{ translateY: chipHidden.value ? withTiming2(-CHIP_SLIDE) : withTiming2(0) }]
     };
-  }, [isHorizontal, headerFixed, headerHeight, insets.top, chipHidden, snapBackHeaderShared, headerOffset, scrollPosition, pullSearchHeightShared]);
+  }, [isHorizontal, headerFixed, headerHeightShared, insets.top, chipHidden, snapBackHeaderShared, headerOffset, scrollPosition, pullSearchHeightShared]);
   return { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, contentPadding, footerFixed, headerFixed, headerHeight, insets, isHorizontal: isHorizontal ?? false };
 }
 
@@ -504,7 +507,7 @@ import { Gesture as Gesture2, GestureDetector as GestureDetector2 } from "react-
 import { BlurView } from "@rific/auto-paper";
 import { useContext as useContext5 } from "react";
 import { StyleSheet as StyleSheet3, useWindowDimensions, View as View2 } from "react-native";
-import { useTheme } from "react-native-paper";
+import { useTheme as useTheme2 } from "react-native-paper";
 import Animated2, { interpolateColor, useAnimatedStyle as useAnimatedStyle2 } from "react-native-reanimated";
 import { useSafeAreaInsets as useSafeAreaInsets2 } from "react-native-safe-area-context";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -534,7 +537,7 @@ var HorizontalDots = ({ total }) => {
   const { blur, footerHeightShared, scrollPosition } = useContext5(ScrollViewContext);
   const { width } = useWindowDimensions();
   const insets = useSafeAreaInsets2();
-  const theme = useTheme();
+  const theme = useTheme2();
   const insetsBottom = insets.bottom;
   const activeColor = theme.colors.primary;
   const inactiveColor = theme.colors.outlineVariant;
@@ -828,12 +831,12 @@ var FlatList = memo2(FlatListInner);
 // src/PullSearch.tsx
 import { forwardRef, useCallback as useCallback5, useContext as useContext8, useEffect as useEffect3, useImperativeHandle, useRef as useRef5, useState as useState4 } from "react";
 import { StyleSheet as StyleSheet4 } from "react-native";
-import { Searchbar, useTheme as useTheme2 } from "react-native-paper";
+import { Searchbar, useTheme as useTheme3 } from "react-native-paper";
 import Animated3, { Extrapolation, interpolate, runOnJS as runOnJS3, useAnimatedReaction, useAnimatedStyle as useAnimatedStyle3 } from "react-native-reanimated";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var PullSearch = forwardRef(function PullSearch2({ debounce, onChangeText, onHeightChange, placeholder, value: propValue }, ref) {
   const { headerHeight, scrollPosition } = useContext8(ScrollViewContext);
-  const theme = useTheme2();
+  const theme = useTheme3();
   const inputRef = useRef5(null);
   const [barHeight, setBarHeight] = useState4(0);
   const [value, setValue] = useState4(propValue ?? "");
@@ -1008,12 +1011,12 @@ 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, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared } = useContext10(ScrollViewContext);
+  const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared, tabBarHeight } = useContext10(ScrollViewContext);
   const insets = useSafeAreaInsets3();
   const keyboardHeight = useKeyboardInset();
   useEffect4(
     () => () => {
-      setFooterHeight(0);
+      setFooterHeight(null);
     },
     [setFooterHeight]
   );
@@ -1029,17 +1032,23 @@ var ScrollViewFooter = ({ children, style }) => {
     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) }] };
+    return { transform: [{ translateY: Math.min(effective, footerHeight ?? 0) }] };
   }, [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: rowPaddingBottom }, style], children })
-  ] });
+  return (
+    // 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
+    // bar has to clear it rather than rendering flush against 0 and overlapping/hiding behind it.
+    /* @__PURE__ */ jsxs5(Animated5.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [styles6.footer, { bottom: tabBarHeight, paddingBottom: containerPaddingBottom }, footerStyle], children: [
+      (footerHeight ?? 0) > 0 && /* @__PURE__ */ jsx8(BlurView2, { blur, style: StyleSheet5.absoluteFill }),
+      /* @__PURE__ */ jsx8(View5, { style: [styles6.row, { paddingBottom: rowPaddingBottom }, style], children })
+    ] })
+  );
 };
 var styles6 = StyleSheet5.create({
-  footer: { bottom: 0, left: 0, position: "absolute", right: 0, zIndex: 2 },
+  footer: { left: 0, position: "absolute", right: 0, zIndex: 2 },
   row: { alignItems: "center", flexDirection: "row", zIndex: 1 }
 });
 
@@ -1047,23 +1056,25 @@ var styles6 = StyleSheet5.create({
 import { BlurView as BlurView3 } from "@rific/auto-paper";
 import { useContext as useContext11 } from "react";
 import { StyleSheet as StyleSheet6, Text, View as View6 } from "react-native";
-import { Appbar, ProgressBar, Surface, useTheme as useTheme3 } from "react-native-paper";
-import Animated6, { useAnimatedStyle as useAnimatedStyle5 } from "react-native-reanimated";
+import { Appbar, ProgressBar, Surface, useTheme as useTheme4 } from "react-native-paper";
+import Animated6, { useAnimatedStyle as useAnimatedStyle5, useSharedValue as useSharedValue6 } from "react-native-reanimated";
 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, 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 { blur, headerHeight, headerFixed, headerHeightShared, headerOffset, progress, progressing, pullSearchHeightShared, scrollPosition, setHeaderHeight, snapBackHeaderShared } = useContext11(ScrollViewContext);
   const { settings } = useContext11(ScrollViewSettingsContext);
   const effectiveBackActionFixed = backActionFixed ?? settings.backActionFixed;
   const insets = useSafeAreaInsets4();
-  const theme = useTheme3();
+  const theme = useTheme4();
   const top = topInset ? insets.top : 0;
+  const measuredShared = useSharedValue6(false);
   const handleLayout = ({
     nativeEvent: {
       layout: { height }
     }
   }) => {
+    measuredShared.value = true;
     if (headerHeight !== height) setHeaderHeight(height);
   };
   const actionMargin = 4;
@@ -1072,23 +1083,23 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
   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;
+    const effective = scrollPosition.value + headerHeightShared.value - pullSearchHeightShared.value;
     if (effective <= 0) return { transform: [{ translateY: 0 }] };
     return { transform: [{ translateY: -effective }] };
-  }, [headerFixed, headerHeight, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared]);
+  }, [headerFixed, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared]);
   const blurStyle = useAnimatedStyle5(() => {
-    if (headerHeight === null) return { height: unmeasuredHeight };
-    if (!headerHeight) return { height: 0 };
-    if (headerFixed) return { height: headerHeight };
-    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]);
+    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 = useAnimatedStyle5(() => {
-    const h = headerHeight ?? 0;
+    const h = headerHeightShared.value;
     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, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared]);
+  }, [headerFixed, headerHeightShared, 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 };
@@ -1110,10 +1121,10 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
     /* @__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, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
+      typeof backAction === "function" ? /* @__PURE__ */ jsx9(Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
     ] }) : /* @__PURE__ */ jsxs6(Animated6.View, { style: [leadingStyle, translateStyle], children: [
       /* @__PURE__ */ jsx9(ActionBg, { blur, style: actionStyle }),
-      /* @__PURE__ */ jsx9(Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
+      typeof backAction === "function" ? /* @__PURE__ */ jsx9(Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
     ] })),
     trailingAction && (trailingActionFixed ? /* @__PURE__ */ jsxs6(View6, { style: trailingStyle, children: [
       /* @__PURE__ */ jsx9(ActionBg, { blur, style: actionStyle }),
@@ -1144,7 +1155,7 @@ var styles7 = StyleSheet6.create({
 import { useBlur } from "@rific/auto-paper";
 import { useCallback as useCallback7, useContext as useContext12, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef7, useState as useState5 } from "react";
 import { Dimensions as Dimensions3 } from "react-native";
-import { useSharedValue as useSharedValue6 } from "react-native-reanimated";
+import { useSharedValue as useSharedValue7 } from "react-native-reanimated";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard = false, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight = 0 }) => {
   const { settings } = useContext12(ScrollViewSettingsContext);
@@ -1153,19 +1164,19 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard =
   const effectiveSnapBackHeader = snapBackHeader ?? settings.snapBackHeader;
   const effectiveSnapBackFooter = snapBackFooter ?? settings.snapBackFooter;
   const [headerHeight, setHeaderHeightState] = useState5(null);
-  const [footerHeight, setFooterHeightState] = useState5(0);
+  const [footerHeight, setFooterHeightState] = useState5(null);
   const [progress, setProgress] = useState5(null);
   const [progressing, setProgressing] = useState5(false);
-  const scrollPosition = useSharedValue6(0);
-  const listGeneration = useSharedValue6(0);
+  const scrollPosition = useSharedValue7(0);
+  const listGeneration = useSharedValue7(0);
   const jsListGeneration = useRef7(0);
-  const headerHeightShared = useSharedValue6(0);
-  const footerHeightShared = useSharedValue6(0);
-  const headerOffset = useSharedValue6(0);
-  const footerOffset = useSharedValue6(0);
-  const pullSearchHeightShared = useSharedValue6(0);
-  const snapBackHeaderShared = useSharedValue6(false);
-  const snapBackFooterShared = useSharedValue6(false);
+  const headerHeightShared = useSharedValue7(0);
+  const footerHeightShared = useSharedValue7(0);
+  const headerOffset = useSharedValue7(0);
+  const footerOffset = useSharedValue7(0);
+  const pullSearchHeightShared = useSharedValue7(0);
+  const snapBackHeaderShared = useSharedValue7(false);
+  const snapBackFooterShared = useSharedValue7(false);
   useEffect5(() => {
     snapBackHeaderShared.value = effectiveSnapBackHeader ?? effectiveSnapBack;
     snapBackFooterShared.value = effectiveSnapBackFooter ?? effectiveSnapBack;
@@ -1193,12 +1204,13 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard =
   }, [headerHeight]);
   const setFooterHeight = useCallback7(
     (h) => {
+      if (h === 0 && footerHeight) return;
       setFooterHeightState(h);
-      footerHeightShared.value = h;
+      footerHeightShared.value = h ?? 0;
     },
-    [footerHeightShared]
+    [footerHeight, footerHeightShared]
   );
-  const scrollHeight = useMemo5(() => Dimensions3.get("window").height - (headerHeight ?? 0) - footerHeight, [headerHeight, footerHeight]);
+  const scrollHeight = useMemo5(() => Dimensions3.get("window").height - (headerHeight ?? 0) - (footerHeight ?? 0), [headerHeight, footerHeight]);
   const effectiveHeaderFixed = fixed || (headerFixed ?? settings.headerFixed);
   const effectiveFooterFixed = fixed || (footerFixed ?? settings.footerFixed);
   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]);
@@ -1231,19 +1243,19 @@ var ScrollViewSettingsProvider = ({ children, onChange, initialValue }) => {
 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, 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";
+import Animated7, { runOnUI as runOnUI3, useSharedValue as useSharedValue9 } from "react-native-reanimated";
 
 // src/internal/useStickyHeaders.ts
 import { useCallback as useCallback9, useContext as useContext13, useLayoutEffect as useLayoutEffect5, useRef as useRef8, useState as useState7 } from "react";
-import { runOnJS as runOnJS4, useAnimatedReaction as useAnimatedReaction2, useAnimatedStyle as useAnimatedStyle6, useSharedValue as useSharedValue7 } from "react-native-reanimated";
+import { runOnJS as runOnJS4, useAnimatedReaction as useAnimatedReaction2, useAnimatedStyle as useAnimatedStyle6, useSharedValue as useSharedValue8 } from "react-native-reanimated";
 import { useSafeAreaInsets as useSafeAreaInsets5 } from "react-native-safe-area-context";
 function useStickyHeaders(headerFixed, enabled) {
   const { headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared } = useContext13(ScrollViewContext);
   const insetsTop = useSafeAreaInsets5().top;
-  const sectionYPositions = useSharedValue7([]);
-  const sectionHeights = useSharedValue7([]);
+  const sectionYPositions = useSharedValue8([]);
+  const sectionHeights = useSharedValue8([]);
   const [activeIndex, setActiveIndex] = useState7(-1);
-  const contentIndexShared = useSharedValue7(-1);
+  const contentIndexShared = useSharedValue8(-1);
   useLayoutEffect5(() => {
     contentIndexShared.value = activeIndex;
   }, [activeIndex, contentIndexShared]);
@@ -1355,7 +1367,7 @@ var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: exter
   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 } = useContext14(ScrollViewContext);
-  const capturedGeneration = useSharedValue8(-1);
+  const capturedGeneration = useSharedValue9(-1);
   useLayoutEffect6(() => {
     const generation = listGeneration.value;
     if (Platform5.OS === "web") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/scroll-view",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "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": "./dist/index.mjs",
+      "react-native": "./src/index.ts",
       "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": "dist/index.mjs",
+  "react-native": "src/index.ts",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
@@ -79,12 +79,13 @@
     "prettier": "^3.8.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-native": "^0.76.0",
-    "react-native-gesture-handler": "*",
+    "react-native": "^0.83.0",
+    "react-native-gesture-handler": "^2.32.0",
     "react-native-keyboard-controller": "*",
     "react-native-paper": "^5.12.0",
-    "react-native-reanimated": "*",
+    "react-native-reanimated": "^4.5.1",
     "react-native-safe-area-context": "*",
+    "react-native-worklets": "^0.10.3",
     "ts-jest": "^29.4.9",
     "ts-node": "^10.9.2",
     "tsup": "^8.0.0",
@@ -93,13 +94,14 @@
   },
   "peerDependencies": {
     "@rific/auto-paper": "^0.8.0",
-    "react": ">=18.0.0",
-    "react-native": ">=0.76.0",
-    "react-native-gesture-handler": ">=2.0.0",
+    "react": ">=19.0.0",
+    "react-native": ">=0.83.0",
+    "react-native-gesture-handler": ">=2.0.0 <3.0.0",
     "react-native-keyboard-controller": ">=1.0.0",
     "react-native-paper": ">=5.0.0",
-    "react-native-reanimated": ">=3.0.0",
-    "react-native-safe-area-context": ">=5.0.0"
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-safe-area-context": ">=5.0.0",
+    "react-native-worklets": "0.10.x"
   },
   "publishConfig": {
     "access": "public"

package/src/ScrollViewContext.ts

@@ -4,7 +4,7 @@ import { SharedValue } from 'react-native-reanimated'
 export type ScrollViewContextType = {
   blur: boolean
   footerAboveKeyboard: boolean
-  footerHeight: number
+  footerHeight: number | null
   footerHeightShared: SharedValue<number>
   footerFixed: boolean
   footerOffset: SharedValue<number>
@@ -28,7 +28,7 @@ export type ScrollViewContextType = {
   progressing: boolean
   scrollHeight: number
   scrollPosition: SharedValue<number>
-  setFooterHeight: (h: number) => void
+  setFooterHeight: (h: number | null) => void
   setHeaderHeight: (h: number | null) => void
   setProgress: (p: number | null) => void
   setProgressing: (b: boolean) => void
@@ -38,7 +38,7 @@ export type ScrollViewContextType = {
 export const ScrollViewContext = createContext<ScrollViewContextType>({
   blur: true,
   footerAboveKeyboard: false,
-  footerHeight: 0,
+  footerHeight: null,
   footerHeightShared: null as unknown as SharedValue<number>,
   footerFixed: false,
   footerOffset: null as unknown as SharedValue<number>,

package/src/ScrollViewFooter.tsx

@@ -13,12 +13,12 @@ export type ScrollViewFooterProps = {
 }
 
 export const ScrollViewFooter = ({ children, style }: ScrollViewFooterProps) => {
-  const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared } = useContext(ScrollViewContext)
+  const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared, tabBarHeight } = useContext(ScrollViewContext)
   const insets = useSafeAreaInsets()
   const keyboardHeight = useKeyboardInset()
   useEffect(
     () => () => {
-      setFooterHeight(0)
+      setFooterHeight(null)
     },
     [setFooterHeight]
   )
@@ -38,7 +38,7 @@ export const ScrollViewFooter = ({ children, style }: ScrollViewFooterProps) =>
     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) }] }
+    return { transform: [{ translateY: Math.min(effective, footerHeight ?? 0) }] }
   }, [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 —
@@ -66,14 +66,18 @@ export const ScrollViewFooter = ({ children, style }: ScrollViewFooterProps) =>
   // 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, { paddingBottom: containerPaddingBottom }, footerStyle]}>
-      {footerHeight > 0 && <BlurView blur={blur} style={StyleSheet.absoluteFill} />}
+    // 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
+    // bar has to clear it rather than rendering flush against 0 and overlapping/hiding behind it.
+    <Animated.View onLayout={handleLayout} pointerEvents='box-none' style={[styles.footer, { bottom: tabBarHeight, paddingBottom: containerPaddingBottom }, footerStyle]}>
+      {(footerHeight ?? 0) > 0 && <BlurView blur={blur} style={StyleSheet.absoluteFill} />}
       <View style={[styles.row, { paddingBottom: rowPaddingBottom }, style]}>{children}</View>
     </Animated.View>
   )
 }
 
 const styles = StyleSheet.create({
-  footer: { bottom: 0, left: 0, position: 'absolute', right: 0, zIndex: 2 },
+  footer: { left: 0, position: 'absolute', right: 0, zIndex: 2 },
   row: { alignItems: 'center', flexDirection: 'row', zIndex: 1 }
 })

package/src/ScrollViewHeader.tsx

@@ -2,7 +2,7 @@ import { BlurView } from '@rific/auto-paper'
 import { type ReactNode, useContext } from 'react'
 import { type LayoutChangeEvent, StyleSheet, Text, View, type ViewStyle } from 'react-native'
 import { Appbar, ProgressBar, Surface, useTheme } from 'react-native-paper'
-import Animated, { useAnimatedStyle } from 'react-native-reanimated'
+import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { ScrollViewContext } from './ScrollViewContext'
@@ -11,7 +11,14 @@ import { ScrollViewSettingsContext } from './ScrollViewSettingsContext'
 export type ScrollViewHeaderProps = {
   actionSize?: number
   actionStyle?: ViewStyle
-  backAction?: () => void
+  // A plain callback renders the default Appbar.BackAction (themed onSurface, sized/positioned by
+  // actionSize/iconSize below) — the common case, unchanged from before. Passing a ReactNode
+  // instead skips that default entirely and renders the given element in its place, same escape
+  // hatch trailingAction already gave the other corner: a caller that wants its own color, icon,
+  // or component altogether (a colored IconButton, say) isn't stuck fighting Appbar.BackAction's
+  // own fixed color/no-customization API to get it. backActionAccessibilityLabel/iconSize below
+  // only apply to the default-rendered case — a custom element carries its own.
+  backAction?: (() => void) | ReactNode
   backActionAccessibilityLabel?: string
   backActionFixed?: boolean
   caption?: string
@@ -41,17 +48,24 @@ const ActionBg = ({ blur, style }: ActionBgProps) =>
   )
 
 export const ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAccessibilityLabel, backActionFixed, caption, centerContent, children, iconSize, style, title, topInset = true, trailingAction, trailingActionFixed = true }: ScrollViewHeaderProps) => {
-  const { blur, headerHeight, headerFixed, headerOffset, progress, progressing, pullSearchHeightShared, scrollPosition, setHeaderHeight, snapBackHeaderShared } = useContext(ScrollViewContext)
+  const { blur, headerHeight, headerFixed, headerHeightShared, headerOffset, progress, progressing, pullSearchHeightShared, scrollPosition, setHeaderHeight, snapBackHeaderShared } = useContext(ScrollViewContext)
   const { settings } = useContext(ScrollViewSettingsContext)
   const effectiveBackActionFixed = backActionFixed ?? settings.backActionFixed
   const insets = useSafeAreaInsets()
   const theme = useTheme()
   const top = topInset ? insets.top : 0
+  // Tracks "has this header's own onLayout fired yet" as a SharedValue rather than deriving it from
+  // headerHeight (a plain, React-state-backed number) so the worklets below never have to list a
+  // value that flips from null to a real measured number in their dependency arrays — see the
+  // comment on translateStyle/blurStyle/progressStyle for why that recreation was a real crash, not
+  // just a perf concern.
+  const measuredShared = useSharedValue(false)
   const handleLayout = ({
     nativeEvent: {
       layout: { height }
     }
   }: LayoutChangeEvent) => {
+    measuredShared.value = true
     if (headerHeight !== height) setHeaderHeight(height)
   }
   const actionMargin = 4
@@ -61,33 +75,39 @@ export const ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, bac
   // pattern) — used as the blur backdrop's own height for that same pre-measurement window, so it
   // doesn't render as a flat, unblurred box for the ~60-80ms an onLayout round trip takes on web.
   const unmeasuredHeight = top + contentMinHeight
-  // Every one of these worklets reads several SharedValues (scrollPosition, snapBackHeaderShared,
-  // headerOffset, pullSearchHeightShared) whose *mutations* — not just headerFixed/headerHeight
-  // changing — need to re-trigger the style recompute. Reanimated's automatic worklet dependency
-  // capture covers this on native without needing them listed, but not on web, where a SharedValue
-  // has to appear in the array itself (object identity, not .value) for its mutations to be
-  // treated as reactive — omitting them here silently froze the header/blur/progress-bar's scroll
-  // tracking on web at whatever scrollPosition happened to be when headerHeight last changed.
+  // Every one of these worklets reads SharedValues only (scrollPosition, snapBackHeaderShared,
+  // headerOffset, pullSearchHeightShared, headerHeightShared, measuredShared) — deliberately NOT the
+  // plain `headerHeight` context value, even though it holds the same number. `headerHeight` is a
+  // React-state-backed `number | null` that changes identity on every measurement (starting at null,
+  // then flipping to a real pixel value within a frame of mount); putting it in a useAnimatedStyle
+  // dependency array forces Reanimated to tear down and recreate the worklet the moment that happens
+  // — which crashed outright ("[Worklets] Tried to synchronously call a Remote Function") on
+  // react-native-worklets 0.10.1. SharedValues never change identity, only their `.value`, so they're
+  // safe to depend on and don't retrigger this. They still have to be LISTED here despite that: on
+  // web, without the Reanimated Babel plugin's automatic worklet dependency capture, a SharedValue's
+  // mutations aren't picked up as reactive unless its reference appears in this array — omitting one
+  // silently freezes that value's contribution to the header/blur/progress-bar's scroll tracking at
+  // whatever it was when the array last changed.
   const translateStyle = useAnimatedStyle(() => {
     if (headerFixed) return { transform: [{ translateY: 0 }] }
     if (snapBackHeaderShared.value) return { transform: [{ translateY: headerOffset.value }] }
-    const effective = scrollPosition.value + (headerHeight ?? 0) - pullSearchHeightShared.value
+    const effective = scrollPosition.value + headerHeightShared.value - pullSearchHeightShared.value
     if (effective <= 0) return { transform: [{ translateY: 0 }] }
     return { transform: [{ translateY: -effective }] }
-  }, [headerFixed, headerHeight, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared])
+  }, [headerFixed, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared])
   const blurStyle = useAnimatedStyle(() => {
-    if (headerHeight === null) return { height: unmeasuredHeight }
-    if (!headerHeight) return { height: 0 }
-    if (headerFixed) return { height: headerHeight }
-    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])
+    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 = useAnimatedStyle(() => {
-    const h = headerHeight ?? 0
+    const h = headerHeightShared.value
     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, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared])
+  }, [headerFixed, headerHeightShared, 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 }
@@ -134,12 +154,12 @@ export const ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, bac
         (effectiveBackActionFixed ? (
           <Animated.View style={leadingStyle}>
             <ActionBg blur={blur} style={actionStyle} />
-            <Appbar.BackAction accessibilityLabel={backActionAccessibilityLabel} onPress={backAction} size={iconSize ?? actionSize / 2} style={buttonStyle} />
+            {typeof backAction === 'function' ? <Appbar.BackAction accessibilityLabel={backActionAccessibilityLabel} onPress={backAction} size={iconSize ?? actionSize / 2} style={buttonStyle} /> : backAction}
           </Animated.View>
         ) : (
           <Animated.View style={[leadingStyle, translateStyle]}>
             <ActionBg blur={blur} style={actionStyle} />
-            <Appbar.BackAction accessibilityLabel={backActionAccessibilityLabel} onPress={backAction} size={iconSize ?? actionSize / 2} style={buttonStyle} />
+            {typeof backAction === 'function' ? <Appbar.BackAction accessibilityLabel={backActionAccessibilityLabel} onPress={backAction} size={iconSize ?? actionSize / 2} style={buttonStyle} /> : backAction}
           </Animated.View>
         ))}
       {trailingAction &&

package/src/ScrollViewProvider.tsx

@@ -26,7 +26,7 @@ export const ScrollViewProvider = ({ blur, children, fixed = false, footerAboveK
   const effectiveSnapBackHeader = snapBackHeader ?? settings.snapBackHeader
   const effectiveSnapBackFooter = snapBackFooter ?? settings.snapBackFooter
   const [headerHeight, setHeaderHeightState] = useState<number | null>(null)
-  const [footerHeight, setFooterHeightState] = useState(0)
+  const [footerHeight, setFooterHeightState] = useState<number | null>(null)
   const [progress, setProgress] = useState<number | null>(null)
   const [progressing, setProgressing] = useState(false)
   const scrollPosition = useSharedValue(0)
@@ -71,13 +71,20 @@ export const ScrollViewProvider = ({ blur, children, fixed = false, footerAboveK
     return () => clearTimeout(timeout)
   }, [headerHeight])
   const setFooterHeight = useCallback(
-    (h: number) => {
+    (h: number | null) => {
+      // Same race setHeaderHeight guards against, on the footer side: react-native-screens' web
+      // shim (and a footer's own unmount cleanup below, which now passes null instead of 0 for
+      // exactly this reason) can report/force a spurious 0 while a real footer is effectively
+      // still on screen (e.g. a wizard cycling through several <ScrollViewFooter> instances).
+      // Never let that clobber a known height — only an explicit null (genuinely no footer
+      // mounted) may reset it.
+      if (h === 0 && footerHeight) return
       setFooterHeightState(h)
-      footerHeightShared.value = h
+      footerHeightShared.value = h ?? 0
     },
-    [footerHeightShared]
+    [footerHeight, footerHeightShared]
   )
-  const scrollHeight = useMemo(() => Dimensions.get('window').height - (headerHeight ?? 0) - footerHeight, [headerHeight, footerHeight])
+  const scrollHeight = useMemo(() => Dimensions.get('window').height - (headerHeight ?? 0) - (footerHeight ?? 0), [headerHeight, footerHeight])
   const effectiveHeaderFixed = fixed || (headerFixed ?? settings.headerFixed)
   const effectiveFooterFixed = fixed || (footerFixed ?? settings.footerFixed)
   const value = 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])

package/src/internal/ScrollViewChip.tsx

@@ -1,9 +1,16 @@
 import { Chip, type ChipProps as AutoPaperChipProps } from '@rific/auto-paper'
 import { type ReactNode } from 'react'
 import { StyleSheet, type ViewStyle } from 'react-native'
+import { Icon, useTheme } from 'react-native-paper'
 import Animated, { type AnimatedStyle } from 'react-native-reanimated'
 
-export type ChipProps = Omit<AutoPaperChipProps, 'compact' | 'icon' | 'onPress'> & {
+// 'children' omitted alongside the rest — this chip's own text always comes from `label` (or the
+// isHorizontal-driven 'Start'/'Top' default below), passed as the real JSX children the underlying
+// Chip renders with, which is what actually wins: React always takes the children an element is
+// given between its tags over one merely passed as a "children" prop via spread. A `children` in
+// chipProps would therefore type-check but silently do nothing at runtime — omitting it here means
+// TypeScript catches that mismatch instead of a caller finding out the hard way.
+export type ChipProps = Omit<AutoPaperChipProps, 'compact' | 'icon' | 'onPress' | 'children'> & {
   label?: ReactNode
 }
 
@@ -16,16 +23,27 @@ type Props = {
 }
 
 export const ScrollViewChip = ({ chipProps, isHorizontal, onChipPress, onPress, style }: Props) => {
-  const { label, style: chipStyle, ...restChipProps } = (chipProps ?? {}) as Partial<ChipProps>
+  const { colors } = useTheme()
+  const { label, selectedColor, style: chipStyle, ...restChipProps } = (chipProps ?? {}) as Partial<ChipProps>
   const handlePress = onChipPress
     ? () => {
         onPress()
         onChipPress()
       }
     : onPress
+  // Rendered via `avatar`, not Chip's own `icon` prop: react-native-paper's MD3 Chip hardcodes
+  // `icon`'s color to theme.colors.primary and ignores `selectedColor` entirely (its own doc
+  // comment: "With theme version 3 selectedColor doesn't apply to the icon. If you want [a]
+  // custom color for the icon, render your own Icon component") — a chip whose own background
+  // IS theme.colors.primary (this library's callers all set that; see Hangman's own vivid-chip
+  // convention) renders that icon invisible against itself. `avatar` has no such override; it
+  // clones whatever element/color it's given. Falls back to the same default Paper itself would
+  // resolve for unselected/non-outlined text (onSecondaryContainer) or outlined text
+  // (onSurfaceVariant), so the icon still matches the label color when no selectedColor is set.
+  const iconColor = selectedColor ?? (restChipProps.mode === 'outlined' ? colors.onSurfaceVariant : colors.onSecondaryContainer)
   return (
     <Animated.View style={[styles.chip, style]}>
-      <Chip compact {...restChipProps} icon={isHorizontal ? 'chevron-left' : 'chevron-up'} onPress={handlePress} style={[styles.chipInner, chipStyle]}>
+      <Chip compact selectedColor={selectedColor} {...restChipProps} avatar={<Icon source={isHorizontal ? 'chevron-left' : 'chevron-up'} size={18} color={iconColor} />} onPress={handlePress} style={[styles.chipInner, chipStyle]}>
         {label ?? (isHorizontal ? 'Start' : 'Top')}
       </Chip>
     </Animated.View>

package/src/internal/useScrollList.ts

@@ -25,7 +25,7 @@ export type UseScrollListOptions = {
 export function useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, hideUntilMeasured, isHorizontal, keyboardAware, pullSearchHeight, style }: UseScrollListOptions = {}) {
   const insets = useSafeAreaInsets()
   const keyboardHeight = useKeyboardInset()
-  const { footerAboveKeyboard, footerHeight, footerFixed: contextFooterFixed, headerHeight, headerFixed: contextHeaderFixed, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared, tabBarHeight } = useContext(ScrollViewContext)
+  const { footerAboveKeyboard, footerHeight, footerFixed: contextFooterFixed, headerHeight, headerHeightShared, headerFixed: contextHeaderFixed, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared, tabBarHeight } = useContext(ScrollViewContext)
 
   const headerFixed = isHorizontal ? true : (headerFixedProp ?? contextHeaderFixed)
   const footerFixed = isHorizontal ? true : (footerFixedProp ?? contextFooterFixed)
@@ -79,21 +79,25 @@ export function useScrollList({ footerFixed: footerFixedProp, headerFixed: heade
   const contentOffset = usesContentInset ? insetContentOffset : ZERO_OFFSET
 
   const chipHidden = useSharedValue(1)
-  // chipHidden/snapBackHeaderShared/headerOffset/scrollPosition/pullSearchHeightShared all need to
-  // be listed here too, not just read — see ScrollViewHeader's translateStyle for why (web-only
-  // reanimated reactivity gap: a SharedValue's mutations don't retrigger useAnimatedStyle unless
-  // the value itself is in this array).
+  // chipHidden/snapBackHeaderShared/headerOffset/scrollPosition/pullSearchHeightShared/
+  // headerHeightShared all need to be listed here too, not just read — see ScrollViewHeader's
+  // translateStyle for why (web-only reanimated reactivity gap: a SharedValue's mutations don't
+  // retrigger useAnimatedStyle unless the value itself is in this array). headerHeightShared is
+  // used here rather than the plain `headerHeight` context value specifically because the latter
+  // changes identity (null -> a real number) shortly after mount, which forces Reanimated to
+  // recreate this worklet — a crash on react-native-worklets 0.10.1, not just a perf concern. See
+  // ScrollViewHeader's translateStyle/blurStyle/progressStyle for the full explanation.
   const chipStyle = useAnimatedStyle(() => {
     const pointerEvents = chipHidden.value ? ('none' as const) : ('box-none' as const)
     if (isHorizontal) {
       return {
         opacity: chipHidden.value ? withTiming(0) : withTiming(1),
         pointerEvents,
-        top: Math.max(headerHeight ?? 0, insets.top) + 4,
+        top: Math.max(headerHeightShared.value, insets.top) + 4,
         transform: [{ translateX: chipHidden.value ? withTiming(-CHIP_SLIDE) : withTiming(0) }]
       }
     }
-    const h = headerHeight ?? 0
+    const h = headerHeightShared.value
     const slide = headerFixed ? 0 : snapBackHeaderShared.value ? -headerOffset.value : Math.max(0, scrollPosition.value + h - pullSearchHeightShared.value)
     const top = Math.max(h - slide, insets.top) + 4
     return {
@@ -102,7 +106,7 @@ export function useScrollList({ footerFixed: footerFixedProp, headerFixed: heade
       top,
       transform: [{ translateY: chipHidden.value ? withTiming(-CHIP_SLIDE) : withTiming(0) }]
     }
-  }, [isHorizontal, headerFixed, headerHeight, insets.top, chipHidden, snapBackHeaderShared, headerOffset, scrollPosition, pullSearchHeightShared])
+  }, [isHorizontal, headerFixed, headerHeightShared, insets.top, chipHidden, snapBackHeaderShared, headerOffset, scrollPosition, pullSearchHeightShared])
 
   return { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, contentPadding, footerFixed, headerFixed, headerHeight, insets, isHorizontal: isHorizontal ?? false }
 }