@rific/scroll-view 0.6.0 → 0.6.1

package/dist/index.js

@@ -428,7 +428,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 +452,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 +465,7 @@ function useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedP
       top,
       transform: [{ translateY: chipHidden.value ? (0, import_react_native_reanimated5.withTiming)(-CHIP_SLIDE) : (0, import_react_native_reanimated5.withTiming)(0) }]
     };
-  }, [isHorizontal, headerFixed, headerHeight, insets.top, 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 };
 }
 
@@ -1105,17 +1105,19 @@ var import_react_native_safe_area_context4 = require("react-native-safe-area-con
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ActionBg = ({ blur, style }) => blur ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: [import_react_native12.StyleSheet.absoluteFill, styles7.actionBg, style], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_auto_paper4.BlurView, { blur: true, style: import_react_native12.StyleSheet.absoluteFill }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: [import_react_native12.StyleSheet.absoluteFill, styles7.actionBg, style], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper3.Surface, { style: import_react_native12.StyleSheet.absoluteFill, elevation: 1, children: null }) });
 var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, 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 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 +1126,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 };

package/dist/index.mjs

@@ -376,7 +376,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 +400,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 +413,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 };
 }
 
@@ -1048,22 +1048,24 @@ 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 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 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 +1074,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 };
@@ -1144,7 +1146,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);
@@ -1156,16 +1158,16 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard =
   const [footerHeight, setFooterHeightState] = useState5(0);
   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;
@@ -1231,19 +1233,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 +1357,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.1",
   "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/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'
@@ -41,17 +41,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 +68,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 }

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 }
 }