@rific/scroll-view 1.0.0 → 1.1.1

package/README.md

@@ -2,6 +2,8 @@
 
 Blur-chrome scroll system for React Native. Drop-in replacements for `ScrollView`, `FlatList`, and `SectionList` with floating headers and footers, pull-to-search, keyboard awareness, horizontal paging, and frosted-glass chrome.
 
+**[Live demo](https://rific.jaydeaton.com/demos/scroll-view)**
+
 ## Installation
 
 ```sh

package/dist/index.js

@@ -61,7 +61,7 @@ module.exports = __toCommonJS(index_exports);
 var import_react6 = require("react");
 var import_react_native6 = require("react-native");
 var import_react_native_gesture_handler = require("react-native-gesture-handler");
-var import_react_native_reanimated6 = require("react-native-reanimated");
+var import_react_native_reanimated5 = require("react-native-reanimated");
 
 // src/internal/RefreshControl.tsx
 var import_react_native = require("react-native");
@@ -90,8 +90,10 @@ var styles = import_react_native2.StyleSheet.create({
 });
 
 // src/internal/useScrollHandler.ts
+var import_core = require("@rific/core");
 var import_react3 = require("react");
 var import_react_native_reanimated3 = require("react-native-reanimated");
+var import_react_native_worklets = require("react-native-worklets");
 
 // src/ScrollViewContext.ts
 var import_react = require("react");
@@ -338,6 +340,8 @@ function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold = 100,
   const { chromeHosted, chromeWritable, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared, stackHeightShared } = (0, import_react3.useContext)(ScrollViewContext);
   const snapUpAccum = (0, import_react_native_reanimated3.useSharedValue)(0);
   const fromBottomBounce = (0, import_react_native_reanimated3.useSharedValue)(false);
+  const remountSyncedKey = (0, import_core.useWorkletCallback)((y) => onRemountSynced?.(y));
+  const remountSyncRetryKey = (0, import_core.useWorkletCallback)((y) => onRemountSyncRetry?.(y));
   return (0, import_react_native_reanimated3.useAnimatedScrollHandler)(
     {
       onScroll: ({ contentOffset: { x, y }, contentSize: { height: contentHeight }, layoutMeasurement: { height: layoutHeight } }) => {
@@ -346,9 +350,9 @@ function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold = 100,
           const target = remountSyncTarget.value;
           if (Math.abs(y - target) < REMOUNT_SYNC_TOLERANCE) {
             remountSyncTarget.value = null;
-            if (onRemountSynced) (0, import_react_native_reanimated3.runOnJS)(onRemountSynced)(y);
+            if (onRemountSynced) (0, import_react_native_worklets.scheduleOnRN)(import_core.callWorkletCallback, remountSyncedKey, y);
           } else if (onRemountSyncRetry) {
-            (0, import_react_native_reanimated3.runOnJS)(onRemountSyncRetry)(y);
+            (0, import_react_native_worklets.scheduleOnRN)(import_core.callWorkletCallback, remountSyncRetryKey, y);
           }
           return;
         }
@@ -428,25 +432,27 @@ function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold = 100,
 // src/internal/useScrollList.ts
 var import_react5 = require("react");
 var import_react_native5 = require("react-native");
-var import_react_native_reanimated5 = require("react-native-reanimated");
+var import_react_native_reanimated4 = require("react-native-reanimated");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
 
 // src/useKeyboardInset.ts
+var import_core2 = require("@rific/core");
 var import_react4 = require("react");
 var import_react_native4 = require("react-native");
 var import_react_native_keyboard_controller = require("react-native-keyboard-controller");
-var import_react_native_reanimated4 = require("react-native-reanimated");
+var import_react_native_worklets2 = require("react-native-worklets");
 var useKeyboardInsetNative = () => {
   const [keyboardHeight, setKeyboardHeight] = (0, import_react4.useState)(0);
+  const keyboardHeightKey = (0, import_core2.useWorkletCallback)(setKeyboardHeight);
   (0, import_react_native_keyboard_controller.useKeyboardHandler)(
     {
       onMove: (e) => {
         "worklet";
-        (0, import_react_native_reanimated4.runOnJS)(setKeyboardHeight)(e.height);
+        (0, import_react_native_worklets2.scheduleOnRN)(import_core2.callWorkletCallback, keyboardHeightKey, e.height);
       },
       onEnd: (e) => {
         "worklet";
-        (0, import_react_native_reanimated4.runOnJS)(setKeyboardHeight)(e.height);
+        (0, import_react_native_worklets2.scheduleOnRN)(import_core2.callWorkletCallback, keyboardHeightKey, e.height);
       }
     },
     []
@@ -482,25 +488,25 @@ function useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedP
   const [startedWithHeader] = (0, import_react5.useState)(headerHeight !== null);
   const insetContentOffset = (0, import_react5.useMemo)(() => ({ x: 0, y: headerHeight !== null ? -headerHeight + (startedWithHeader && !isHorizontal && pullSearchHeight ? pullSearchHeight : 0) : 0 }), [headerHeight, isHorizontal, pullSearchHeight, startedWithHeader]);
   const contentOffset = usesContentInset ? insetContentOffset : ZERO_OFFSET;
-  const chipHidden = (0, import_react_native_reanimated5.useSharedValue)(1);
-  const chipStyle = (0, import_react_native_reanimated5.useAnimatedStyle)(() => {
+  const chipHidden = (0, import_react_native_reanimated4.useSharedValue)(1);
+  const chipStyle = (0, import_react_native_reanimated4.useAnimatedStyle)(() => {
     const pointerEvents = chipHidden.value ? "none" : "box-none";
     if (isHorizontal) {
       return {
-        opacity: chipHidden.value ? (0, import_react_native_reanimated5.withTiming)(0) : (0, import_react_native_reanimated5.withTiming)(1),
+        opacity: chipHidden.value ? (0, import_react_native_reanimated4.withTiming)(0) : (0, import_react_native_reanimated4.withTiming)(1),
         pointerEvents,
         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) }]
+        transform: [{ translateX: chipHidden.value ? (0, import_react_native_reanimated4.withTiming)(-CHIP_SLIDE) : (0, import_react_native_reanimated4.withTiming)(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 {
-      opacity: chipHidden.value ? (0, import_react_native_reanimated5.withTiming)(0) : (0, import_react_native_reanimated5.withTiming)(1),
+      opacity: chipHidden.value ? (0, import_react_native_reanimated4.withTiming)(0) : (0, import_react_native_reanimated4.withTiming)(1),
       pointerEvents,
       top,
-      transform: [{ translateY: chipHidden.value ? (0, import_react_native_reanimated5.withTiming)(-CHIP_SLIDE) : (0, import_react_native_reanimated5.withTiming)(0) }]
+      transform: [{ translateY: chipHidden.value ? (0, import_react_native_reanimated4.withTiming)(-CHIP_SLIDE) : (0, import_react_native_reanimated4.withTiming)(0) }]
     };
   }, [isHorizontal, headerFixed, headerHeightShared, insets.top, chipHidden, snapBackHeaderShared, headerOffset, scrollPosition, pullSearchHeightShared]);
   return { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, contentPadding, footerFixed, headerFixed, headerHeight, insets, isHorizontal: isHorizontal ?? false };
@@ -512,14 +518,14 @@ var CustomListInner = ({ chipProps, chipThreshold, component: List, renderFilter
   const { ListHeaderComponent: listHeaderComponent, contentContainerStyle: externalContentContainerStyle, ...restProps } = props;
   const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, contentPadding, footerFixed, headerFixed } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, keyboardAware, pullSearchHeight, style });
   const { listGeneration, onListUnmount } = (0, import_react6.useContext)(ScrollViewContext);
-  const capturedGeneration = (0, import_react_native_reanimated6.useSharedValue)(-1);
+  const capturedGeneration = (0, import_react_native_reanimated5.useSharedValue)(-1);
   (0, import_react6.useLayoutEffect)(() => {
     const generation = listGeneration.value;
     if (import_react_native6.Platform.OS === "web") {
       capturedGeneration.value = generation;
       return;
     }
-    (0, import_react_native_reanimated6.runOnUI)((gen) => {
+    (0, import_react_native_reanimated5.runOnUI)((gen) => {
       "worklet";
       capturedGeneration.value = gen;
     })(generation);
@@ -594,7 +600,7 @@ var import_auto_paper2 = require("@rific/auto-paper");
 var import_react7 = require("react");
 var import_react_native7 = require("react-native");
 var import_react_native_paper2 = require("react-native-paper");
-var import_react_native_reanimated7 = __toESM(require("react-native-reanimated"));
+var import_react_native_reanimated6 = __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");
 var DOT_FULL = 8;
@@ -609,15 +615,15 @@ var PILL_HEIGHT = DOT_FULL + PILL_PAD_V * 2;
 var PILL_RADIUS = PILL_HEIGHT / 2;
 var PILL_WIDTH = CLIP_WIDTH + PILL_PAD_H * 2;
 var Dot = ({ activeColor, index, inactiveColor, pageWidth, scrollPosition }) => {
-  const circleStyle = (0, import_react_native_reanimated7.useAnimatedStyle)(() => {
+  const circleStyle = (0, import_react_native_reanimated6.useAnimatedStyle)(() => {
     const page = scrollPosition.value / pageWidth;
     const distance = Math.abs(index - page);
     const t = Math.max(0, Math.min((distance - 0.5) / 2, 1));
     const size = DOT_FULL + (DOT_SMALL - DOT_FULL) * t;
-    const backgroundColor = (0, import_react_native_reanimated7.interpolateColor)(t, [0, 1], [activeColor, inactiveColor]);
+    const backgroundColor = (0, import_react_native_reanimated6.interpolateColor)(t, [0, 1], [activeColor, inactiveColor]);
     return { backgroundColor, borderRadius: size / 2, height: size, width: size };
   }, [scrollPosition, pageWidth, index, activeColor, inactiveColor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native7.View, { style: styles3.dotContainer, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_reanimated7.default.View, { style: circleStyle }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native7.View, { style: styles3.dotContainer, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_reanimated6.default.View, { style: circleStyle }) });
 };
 var HorizontalDots = ({ total }) => {
   const { blur, footerHeightShared, scrollPosition } = (0, import_react7.useContext)(ScrollViewContext);
@@ -627,21 +633,21 @@ var HorizontalDots = ({ total }) => {
   const insetsBottom = insets.bottom;
   const activeColor = theme.colors.primary;
   const inactiveColor = theme.colors.outlineVariant;
-  const pillContainerStyle = (0, import_react_native_reanimated7.useAnimatedStyle)(
+  const pillContainerStyle = (0, import_react_native_reanimated6.useAnimatedStyle)(
     () => ({
       bottom: Math.max(footerHeightShared.value, insetsBottom) + 8
     }),
     [footerHeightShared, insetsBottom]
   );
-  const rowStyle = (0, import_react_native_reanimated7.useAnimatedStyle)(() => {
+  const rowStyle = (0, import_react_native_reanimated6.useAnimatedStyle)(() => {
     const page = scrollPosition.value / width;
     const maxOffset = Math.max(0, (total - CLIP_COUNT) * DOT_STEP);
     const offset = Math.max(0, Math.min((page - (CLIP_COUNT - 1) / 2) * DOT_STEP, maxOffset));
     return { transform: [{ translateX: -offset }] };
   }, [scrollPosition, width, total]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_reanimated7.default.View, { pointerEvents: "none", style: [styles3.pillContainer, pillContainerStyle], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native7.View, { style: styles3.pill, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_reanimated6.default.View, { pointerEvents: "none", style: [styles3.pillContainer, pillContainerStyle], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native7.View, { style: styles3.pill, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_auto_paper2.BlurView, { blur, style: import_react_native7.StyleSheet.absoluteFill }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native7.View, { style: styles3.dotsClip, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_reanimated7.default.View, { style: [styles3.dotsRow, rowStyle], children: Array.from({ length: total }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dot, { activeColor, index: i, inactiveColor, pageWidth: width, scrollPosition }, i)) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native7.View, { style: styles3.dotsClip, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_reanimated6.default.View, { style: [styles3.dotsRow, rowStyle], children: Array.from({ length: total }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dot, { activeColor, index: i, inactiveColor, pageWidth: width, scrollPosition }, i)) }) })
   ] }) });
 };
 var styles3 = import_react_native7.StyleSheet.create({
@@ -661,7 +667,7 @@ var styles3 = import_react_native7.StyleSheet.create({
 
 // src/internal/useScrollHandlerJS.ts
 var import_react8 = require("react");
-var import_react_native_reanimated8 = require("react-native-reanimated");
+var import_react_native_reanimated7 = require("react-native-reanimated");
 var REMOUNT_RETRY_TOLERANCE = 1;
 var REMOUNT_RETRY_MAX_ATTEMPTS = 8;
 function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThreshold = 100, footerFixed, headerFixed, isHorizontal, jsListGeneration, remountTarget = null, scrollTo }) {
@@ -727,8 +733,8 @@ function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThreshold = 10
           if (yn >= -headerHeightShared.value + pullSearchHeightShared.value) snapUpAccum.current -= delta;
           if (snapUpAccum.current >= 10) {
             snapUpAccum.current = 999;
-            if (snapHeader) headerOffset.value = (0, import_react_native_reanimated8.withTiming)(0, { duration: 200 });
-            if (snapFooter) footerOffset.value = (0, import_react_native_reanimated8.withTiming)(0, { duration: 200 });
+            if (snapHeader) headerOffset.value = (0, import_react_native_reanimated7.withTiming)(0, { duration: 200 });
+            if (snapFooter) footerOffset.value = (0, import_react_native_reanimated7.withTiming)(0, { duration: 200 });
           }
         }
       }
@@ -744,7 +750,7 @@ function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThreshold = 10
   const settle = (0, import_react8.useCallback)(
     (revealing) => {
       if (!chromeHosted || footerFixed || !chromeWritable.value) return;
-      footerOffset.value = (0, import_react_native_reanimated8.withTiming)(revealing ? 0 : chromeSettleTarget(footerOffset.value, stackHeightShared.value), { duration: 200 });
+      footerOffset.value = (0, import_react_native_reanimated7.withTiming)(revealing ? 0 : chromeSettleTarget(footerOffset.value, stackHeightShared.value), { duration: 200 });
     },
     [chromeHosted, chromeWritable, footerFixed, footerOffset, stackHeightShared]
   );
@@ -929,10 +935,12 @@ var styles4 = { measureContainer: { left: 0, opacity: 0, position: "absolute", r
 var FlatList = (0, import_react9.memo)(FlatListInner);
 
 // src/PullSearch.tsx
+var import_core3 = require("@rific/core");
 var import_react10 = require("react");
 var import_react_native9 = require("react-native");
 var import_react_native_paper3 = require("react-native-paper");
-var import_react_native_reanimated9 = __toESM(require("react-native-reanimated"));
+var import_react_native_reanimated8 = __toESM(require("react-native-reanimated"));
+var import_react_native_worklets3 = require("react-native-worklets");
 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);
@@ -951,13 +959,14 @@ var PullSearch = (0, import_react10.forwardRef)(function PullSearch2({ debounce,
     focus: () => inputRef.current?.focus()
   }));
   const blurInput = (0, import_react10.useCallback)(() => inputRef.current?.blur(), []);
-  (0, import_react_native_reanimated9.useAnimatedReaction)(
+  const blurKey = (0, import_core3.useWorkletCallback)(blurInput);
+  (0, import_react_native_reanimated8.useAnimatedReaction)(
     () => {
       if (barHeight === 0) return false;
       return scrollPosition.value >= -(headerHeight ?? 0) + barHeight;
     },
     (isHidden, wasHidden) => {
-      if (isHidden && !wasHidden) (0, import_react_native_reanimated9.runOnJS)(blurInput)();
+      if (isHidden && !wasHidden) (0, import_react_native_worklets3.scheduleOnRN)(import_core3.callWorkletCallback, blurKey);
     },
     // scrollPosition has to be listed too, not just read - see useStickyHeaders' useAnimatedReaction
     // for why: on web, without reanimated's Babel plugin active, an unlisted SharedValue mutation
@@ -988,14 +997,14 @@ var PullSearch = (0, import_react10.forwardRef)(function PullSearch2({ debounce,
     onChangeText(normalizedValue);
     return void 0;
   }, [debounce, onChangeText, value]);
-  const animatedStyle = (0, import_react_native_reanimated9.useAnimatedStyle)(() => {
+  const animatedStyle = (0, import_react_native_reanimated8.useAnimatedStyle)(() => {
     if (barHeight === 0) return { opacity: 0 };
     const h = headerHeight ?? 0;
     const showY = -h;
     const hideY = -h + barHeight;
-    return { opacity: (0, import_react_native_reanimated9.interpolate)(scrollPosition.value, [showY, hideY], [1, 0], import_react_native_reanimated9.Extrapolation.CLAMP) };
+    return { opacity: (0, import_react_native_reanimated8.interpolate)(scrollPosition.value, [showY, hideY], [1, 0], import_react_native_reanimated8.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_paper3.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_reanimated8.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 },
@@ -1003,23 +1012,23 @@ var styles5 = import_react_native9.StyleSheet.create({
 });
 
 // src/redux/scrollViewSlice.ts
-var import_core2 = require("@rific/core");
+var import_core5 = require("@rific/core");
 
 // src/ScrollViewSettingsContext.ts
-var import_core = require("@rific/core");
+var import_core4 = require("@rific/core");
 var defaultScrollViewSettings = {
   backActionFixed: true,
   footerFixed: false,
   headerFixed: false,
   snapBack: false
 };
-var settingsContext = (0, import_core.createSettingsContext)(defaultScrollViewSettings);
+var settingsContext = (0, import_core4.createSettingsContext)(defaultScrollViewSettings);
 var ScrollViewSettingsContext = settingsContext.Context;
 var scrollViewSettingsProvider = settingsContext.Provider;
 var scrollViewUseSettings = settingsContext.useSettings;
 
 // src/redux/scrollViewSlice.ts
-var scrollViewSlice = (0, import_core2.createSettingsSlice)("scrollView", {
+var scrollViewSlice = (0, import_core5.createSettingsSlice)("scrollView", {
   initialState: defaultScrollViewSettings,
   fieldSetters: []
 });
@@ -1030,21 +1039,21 @@ var scrollViewReducer = scrollViewSlice.reducer;
 var import_react11 = require("react");
 var import_react_native10 = require("react-native");
 var import_react_native_gesture_handler3 = require("react-native-gesture-handler");
-var import_react_native_reanimated10 = __toESM(require("react-native-reanimated"));
+var import_react_native_reanimated9 = __toESM(require("react-native-reanimated"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var ScrollViewInner = ({ chipProps, chipThreshold, children, contentContainerStyle: externalContentContainerStyle, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, style, ...props }) => {
   const scrollView = (0, import_react11.useRef)(null);
   const isHorizontal = horizontal === true;
   const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, contentPadding, footerFixed, headerFixed } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, isHorizontal, keyboardAware, pullSearchHeight, style });
   const { listGeneration, onListUnmount } = (0, import_react11.useContext)(ScrollViewContext);
-  const capturedGeneration = (0, import_react_native_reanimated10.useSharedValue)(-1);
+  const capturedGeneration = (0, import_react_native_reanimated9.useSharedValue)(-1);
   (0, import_react11.useLayoutEffect)(() => {
     const generation = listGeneration.value;
     if (import_react_native10.Platform.OS === "web") {
       capturedGeneration.value = generation;
       return;
     }
-    (0, import_react_native_reanimated10.runOnUI)((gen) => {
+    (0, import_react_native_reanimated9.runOnUI)((gen) => {
       "worklet";
       capturedGeneration.value = gen;
     })(generation);
@@ -1075,7 +1084,7 @@ var ScrollViewInner = ({ chipProps, chipThreshold, children, contentContainerSty
   const detectorGesture = gesture !== void 0 ? combinedGesture : void 0;
   const content = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native10.View, { style: containerStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react_native_reanimated10.default.ScrollView,
+      import_react_native_reanimated9.default.ScrollView,
       {
         ...props,
         contentContainerStyle: contentPadding ? [externalContentContainerStyle, contentPadding] : externalContentContainerStyle,
@@ -1102,7 +1111,7 @@ var ScrollView = (0, import_react11.memo)(ScrollViewInner);
 
 // src/ScrollViewChromeProvider.tsx
 var import_react13 = require("react");
-var import_react_native_reanimated11 = require("react-native-reanimated");
+var import_react_native_reanimated10 = require("react-native-reanimated");
 
 // src/ScrollViewChromeContext.ts
 var import_react12 = require("react");
@@ -1114,7 +1123,7 @@ var import_jsx_runtime8 = require("react/jsx-runtime");
 var REVEAL_DURATION = 200;
 var alwaysActive = () => true;
 var ScrollViewChromeProvider = ({ children, footprint, overhang = 0, snapBack = true, useIsActive = alwaysActive }) => {
-  const offset = (0, import_react_native_reanimated11.useSharedValue)(0);
+  const offset = (0, import_react_native_reanimated10.useSharedValue)(0);
   const [claims, setClaims] = (0, import_react13.useState)([]);
   const [pins, setPins] = (0, import_react13.useState)(0);
   const activeId = claims.length > 0 ? claims[claims.length - 1] : null;
@@ -1124,7 +1133,7 @@ var ScrollViewChromeProvider = ({ children, footprint, overhang = 0, snapBack =
   const addPin = (0, import_react13.useCallback)(() => setPins((current) => current + 1), []);
   const removePin = (0, import_react13.useCallback)(() => setPins((current) => Math.max(0, current - 1)), []);
   const reveal = (0, import_react13.useCallback)(() => {
-    offset.value = (0, import_react_native_reanimated11.withTiming)(0, { duration: REVEAL_DURATION });
+    offset.value = (0, import_react_native_reanimated10.withTiming)(0, { duration: REVEAL_DURATION });
   }, [offset]);
   (0, import_react13.useEffect)(() => {
     reveal();
@@ -1135,8 +1144,8 @@ var ScrollViewChromeProvider = ({ children, footprint, overhang = 0, snapBack =
 };
 
 // src/ScrollViewConfig.tsx
-var import_core3 = require("@rific/core");
-var scrollViewConfig = (0, import_core3.createModuleConfig)();
+var import_core6 = require("@rific/core");
+var scrollViewConfig = (0, import_core6.createModuleConfig)();
 var configureScrollView = scrollViewConfig.configure;
 var getScrollViewConfig = scrollViewConfig.getConfig;
 var ScrollViewConfigProvider = scrollViewConfig.Provider;
@@ -1145,7 +1154,7 @@ var ScrollViewConfigProvider = scrollViewConfig.Provider;
 var import_auto_paper3 = require("@rific/auto-paper");
 var import_react14 = require("react");
 var import_react_native11 = require("react-native");
-var import_react_native_reanimated12 = __toESM(require("react-native-reanimated"));
+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_runtime9 = (
   // bottom: tabBarHeight (not the styles.footer default of 0) - a consuming app's own persistent
@@ -1175,7 +1184,7 @@ var ScrollViewFooter = ({ children, style }) => {
   }) => {
     if (footerHeight !== height) setFooterHeight(height);
   };
-  const footerStyle = (0, import_react_native_reanimated12.useAnimatedStyle)(() => {
+  const footerStyle = (0, import_react_native_reanimated11.useAnimatedStyle)(() => {
     if (chromeHosted) return { transform: [{ translateY: Math.min(Math.max(footerOffset.value, 0), stackHeightShared.value) }] };
     if (footerFixed) return { transform: [{ translateY: 0 }] };
     if (snapBackFooterShared.value) return { transform: [{ translateY: footerOffset.value }] };
@@ -1195,7 +1204,7 @@ var ScrollViewFooter = ({ children, style }) => {
   const rowPaddingBottom = footerFixed && footerAboveKeyboard ? Math.max(bottomPadding - keyboardHeight, 0) : bottomPadding;
   const footerBottom = chromeHosted && footerFixed && footerAboveKeyboard ? Math.max(tabBarHeight - keyboardHeight, 0) : tabBarHeight;
   const { paddingBottom: consumerPaddingBottom, ...restStyle } = style ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native_reanimated12.default.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [styles6.footer, { bottom: footerBottom, paddingBottom: containerPaddingBottom }, footerStyle], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native_reanimated11.default.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [styles6.footer, { bottom: footerBottom, paddingBottom: containerPaddingBottom }, footerStyle], children: [
     (footerHeight ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_auto_paper3.BlurView, { blur, style: import_react_native11.StyleSheet.absoluteFill }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native11.View, { ref: rowRef, style: [styles6.row, restStyle, { paddingBottom: rowPaddingBottom + (typeof consumerPaddingBottom === "number" ? consumerPaddingBottom : 0) }], children })
   ] });
@@ -1210,7 +1219,7 @@ var import_auto_paper4 = require("@rific/auto-paper");
 var import_react15 = require("react");
 var import_react_native12 = require("react-native");
 var import_react_native_paper4 = require("react-native-paper");
-var import_react_native_reanimated13 = __toESM(require("react-native-reanimated"));
+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_runtime10 = require("react/jsx-runtime");
 var ActionBg = ({ blur, style }) => blur ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: [import_react_native12.StyleSheet.absoluteFill, styles7.actionBg, style], children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_auto_paper4.BlurView, { blur: true, style: import_react_native12.StyleSheet.absoluteFill }) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: [import_react_native12.StyleSheet.absoluteFill, styles7.actionBg, style], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper4.Surface, { style: import_react_native12.StyleSheet.absoluteFill, elevation: 1, children: null }) });
@@ -1221,7 +1230,7 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
   const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
   const theme = (0, import_react_native_paper4.useTheme)();
   const top = topInset ? insets.top : 0;
-  const measuredShared = (0, import_react_native_reanimated13.useSharedValue)(false);
+  const measuredShared = (0, import_react_native_reanimated12.useSharedValue)(false);
   const handleLayout = ({
     nativeEvent: {
       layout: { height }
@@ -1241,21 +1250,21 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
   const actionMargin = 4;
   const contentMinHeight = actionSize + 2 * actionMargin;
   const unmeasuredHeight = top + contentMinHeight;
-  const translateStyle = (0, import_react_native_reanimated13.useAnimatedStyle)(() => {
+  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 + headerHeightShared.value - pullSearchHeightShared.value;
     if (effective <= 0) return { transform: [{ translateY: 0 }] };
     return { transform: [{ translateY: -effective }] };
   }, [headerFixed, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared]);
-  const blurStyle = (0, import_react_native_reanimated13.useAnimatedStyle)(() => {
+  const blurStyle = (0, import_react_native_reanimated12.useAnimatedStyle)(() => {
     if (!measuredShared.value) return { height: unmeasuredHeight };
     if (!headerHeightShared.value) return { height: 0 };
     if (headerFixed) return { height: headerHeightShared.value };
     const translateY = snapBackHeaderShared.value ? headerOffset.value : -Math.max(0, scrollPosition.value + headerHeightShared.value - pullSearchHeightShared.value);
     return { height: Math.max(headerHeightShared.value + translateY, top) };
   }, [headerFixed, top, unmeasuredHeight, measuredShared, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared]);
-  const progressStyle = (0, import_react_native_reanimated13.useAnimatedStyle)(() => {
+  const progressStyle = (0, import_react_native_reanimated12.useAnimatedStyle)(() => {
     const h = headerHeightShared.value;
     if (headerFixed) return { top: h };
     const slide = snapBackHeaderShared.value ? -headerOffset.value : Math.max(0, scrollPosition.value + h - pullSearchHeightShared.value);
@@ -1269,8 +1278,8 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
   const leadingStyle = { alignItems: "center", height: actionSize, justifyContent: "center", left: actionMargin, position: "absolute", top: actionTop, width: actionSize, zIndex: 3, ...actionShadow };
   const trailingStyle = { alignItems: "center", height: actionSize, justifyContent: "center", position: "absolute", right: actionMargin, top: actionTop, width: actionSize, zIndex: 3, ...actionShadow };
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_reanimated13.default.View, { pointerEvents: "none", style: [styles7.blur, blurStyle], children: headerHeight !== 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_auto_paper4.BlurView, { blur, style: [styles7.blurInner, { height: headerHeight ?? unmeasuredHeight }] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native_reanimated13.default.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [headerHeight === null ? styles7.headerInit : styles7.header, translateStyle], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_reanimated12.default.View, { pointerEvents: "none", style: [styles7.blur, blurStyle], children: headerHeight !== 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_auto_paper4.BlurView, { blur, style: [styles7.blurInner, { height: headerHeight ?? unmeasuredHeight }] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native_reanimated12.default.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [headerHeight === null ? styles7.headerInit : styles7.header, translateStyle], children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { ref: contentRef, style: [{ paddingTop: top }, style], children: children ?? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: [styles7.content, { minHeight: contentMinHeight }], children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: styles7.side }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: styles7.spacer }),
@@ -1281,18 +1290,18 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
       ] }) }),
       !blur && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: [styles7.divider, { backgroundColor: theme.colors.outlineVariant }] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_reanimated13.default.View, { pointerEvents: "none", style: [styles7.progress, progressStyle], children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper4.ProgressBar, { indeterminate: progress === null, visible: progressing, progress: progress ?? void 0 }) }),
-    backAction && (effectiveBackActionFixed ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native_reanimated13.default.View, { style: leadingStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_reanimated12.default.View, { pointerEvents: "none", style: [styles7.progress, progressStyle], children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper4.ProgressBar, { indeterminate: progress === null, visible: progressing, progress: progress ?? void 0 }) }),
+    backAction && (effectiveBackActionFixed ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native_reanimated12.default.View, { style: leadingStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ActionBg, { blur, style: actionStyle }),
       backActionElement
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native_reanimated13.default.View, { style: [leadingStyle, translateStyle], children: [
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native_reanimated12.default.View, { style: [leadingStyle, translateStyle], children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ActionBg, { blur, style: actionStyle }),
       backActionElement
     ] })),
     trailingAction && (trailingActionFixed ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.View, { style: trailingStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ActionBg, { blur, style: actionStyle }),
       trailingAction
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native_reanimated13.default.View, { style: [trailingStyle, translateStyle], children: [
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native_reanimated12.default.View, { style: [trailingStyle, translateStyle], children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ActionBg, { blur, style: actionStyle }),
       trailingAction
     ] }))
@@ -1318,7 +1327,7 @@ var styles7 = import_react_native12.StyleSheet.create({
 var import_auto_paper5 = require("@rific/auto-paper");
 var import_react17 = require("react");
 var import_react_native13 = require("react-native");
-var import_react_native_reanimated14 = require("react-native-reanimated");
+var import_react_native_reanimated13 = require("react-native-reanimated");
 
 // src/internal/ChromeRegistrar.tsx
 var import_react16 = require("react");
@@ -1359,24 +1368,24 @@ var ScrollViewProvider = ({ blur, chrome, children, fixed = false, footerAboveKe
   const [footerHeight, setFooterHeightState] = (0, import_react17.useState)(null);
   const [progress, setProgress] = (0, import_react17.useState)(null);
   const [progressing, setProgressing] = (0, import_react17.useState)(false);
-  const scrollPosition = (0, import_react_native_reanimated14.useSharedValue)(0);
-  const listGeneration = (0, import_react_native_reanimated14.useSharedValue)(0);
+  const scrollPosition = (0, import_react_native_reanimated13.useSharedValue)(0);
+  const listGeneration = (0, import_react_native_reanimated13.useSharedValue)(0);
   const jsListGeneration = (0, import_react17.useRef)(0);
-  const headerHeightShared = (0, import_react_native_reanimated14.useSharedValue)(0);
-  const footerHeightShared = (0, import_react_native_reanimated14.useSharedValue)(0);
-  const headerOffset = (0, import_react_native_reanimated14.useSharedValue)(0);
-  const ownFooterOffset = (0, import_react_native_reanimated14.useSharedValue)(0);
-  const ownStackHeight = (0, import_react_native_reanimated14.useSharedValue)(0);
+  const headerHeightShared = (0, import_react_native_reanimated13.useSharedValue)(0);
+  const footerHeightShared = (0, import_react_native_reanimated13.useSharedValue)(0);
+  const headerOffset = (0, import_react_native_reanimated13.useSharedValue)(0);
+  const ownFooterOffset = (0, import_react_native_reanimated13.useSharedValue)(0);
+  const ownStackHeight = (0, import_react_native_reanimated13.useSharedValue)(0);
   const footerOffset = chromeHost ? chromeHost.offset : ownFooterOffset;
-  const chromeWritable = (0, import_react_native_reanimated14.useSharedValue)(!chromeHosted);
+  const chromeWritable = (0, import_react_native_reanimated13.useSharedValue)(!chromeHosted);
   (0, import_react17.useEffect)(() => {
     if (!chromeHosted) chromeWritable.value = true;
   }, [chromeHosted, chromeWritable]);
   const revealChrome = chromeHost?.reveal;
   const stackHeightShared = chromeHosted ? ownStackHeight : footerHeightShared;
-  const pullSearchHeightShared = (0, import_react_native_reanimated14.useSharedValue)(0);
-  const snapBackHeaderShared = (0, import_react_native_reanimated14.useSharedValue)(false);
-  const snapBackFooterShared = (0, import_react_native_reanimated14.useSharedValue)(false);
+  const pullSearchHeightShared = (0, import_react_native_reanimated13.useSharedValue)(0);
+  const snapBackHeaderShared = (0, import_react_native_reanimated13.useSharedValue)(false);
+  const snapBackFooterShared = (0, import_react_native_reanimated13.useSharedValue)(false);
   (0, import_react17.useEffect)(() => {
     snapBackHeaderShared.value = effectiveSnapBackHeader ?? effectiveSnapBack;
     snapBackFooterShared.value = chromeHosted ? chromeSnapBack : effectiveSnapBackFooter ?? effectiveSnapBack;
@@ -1450,25 +1459,28 @@ var ScrollViewSettingsProvider = scrollViewSettingsProvider;
 var import_react19 = require("react");
 var import_react_native14 = require("react-native");
 var import_react_native_gesture_handler4 = require("react-native-gesture-handler");
-var import_react_native_reanimated16 = __toESM(require("react-native-reanimated"));
+var import_react_native_reanimated15 = __toESM(require("react-native-reanimated"));
 
 // src/internal/useStickyHeaders.ts
+var import_core7 = require("@rific/core");
 var import_react18 = require("react");
-var import_react_native_reanimated15 = require("react-native-reanimated");
+var import_react_native_reanimated14 = require("react-native-reanimated");
 var import_react_native_safe_area_context5 = require("react-native-safe-area-context");
+var import_react_native_worklets4 = require("react-native-worklets");
 function useStickyHeaders(headerFixed, enabled) {
   const { headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared } = (0, import_react18.useContext)(ScrollViewContext);
   const insetsTop = (0, import_react_native_safe_area_context5.useSafeAreaInsets)().top;
-  const sectionYPositions = (0, import_react_native_reanimated15.useSharedValue)([]);
-  const sectionHeights = (0, import_react_native_reanimated15.useSharedValue)([]);
+  const sectionYPositions = (0, import_react_native_reanimated14.useSharedValue)([]);
+  const sectionHeights = (0, import_react_native_reanimated14.useSharedValue)([]);
   const [activeIndex, setActiveIndex] = (0, import_react18.useState)(-1);
-  const contentIndexShared = (0, import_react_native_reanimated15.useSharedValue)(-1);
+  const activeIndexKey = (0, import_core7.useWorkletCallback)(setActiveIndex);
+  const contentIndexShared = (0, import_react_native_reanimated14.useSharedValue)(-1);
   (0, import_react18.useLayoutEffect)(() => {
     contentIndexShared.value = activeIndex;
   }, [activeIndex, contentIndexShared]);
   const positionsCache = (0, import_react18.useRef)([]);
   const heightsCache = (0, import_react18.useRef)([]);
-  (0, import_react_native_reanimated15.useAnimatedReaction)(
+  (0, import_react_native_reanimated14.useAnimatedReaction)(
     () => {
       if (!enabled) return -1;
       const positions = sectionYPositions.value;
@@ -1493,7 +1505,7 @@ function useStickyHeaders(headerFixed, enabled) {
       return active;
     },
     (curr, prev) => {
-      if (curr !== prev) (0, import_react_native_reanimated15.runOnJS)(setActiveIndex)(curr);
+      if (curr !== prev) (0, import_react_native_worklets4.scheduleOnRN)(import_core7.callWorkletCallback, activeIndexKey, curr);
     },
     // Same web-only reanimated gap as useAnimatedStyle elsewhere in this file: this "prepare"
     // function's own SharedValue reads (sectionYPositions, headerHeightShared, scrollPosition,
@@ -1502,7 +1514,7 @@ function useStickyHeaders(headerFixed, enabled) {
     // then never again on web, permanently freezing activeIndex/the active sticky section.
     [enabled, headerFixed, insetsTop, sectionYPositions, headerHeightShared, scrollPosition, snapBackHeaderShared, headerOffset, pullSearchHeightShared]
   );
-  const clipStyle = (0, import_react_native_reanimated15.useAnimatedStyle)(() => {
+  const clipStyle = (0, import_react_native_reanimated14.useAnimatedStyle)(() => {
     const hHeight = headerHeightShared.value;
     const scrollPos = scrollPosition.value;
     let stickyTop;
@@ -1516,7 +1528,7 @@ function useStickyHeaders(headerFixed, enabled) {
     }
     return { top: stickyTop };
   }, [enabled, headerFixed, insetsTop, headerHeightShared, scrollPosition, snapBackHeaderShared, headerOffset, pullSearchHeightShared]);
-  const overlayStyle = (0, import_react_native_reanimated15.useAnimatedStyle)(() => {
+  const overlayStyle = (0, import_react_native_reanimated14.useAnimatedStyle)(() => {
     const hidden = { opacity: 0, top: 0, transform: [{ translateY: 0 }] };
     if (!enabled) return hidden;
     const index = contentIndexShared.value;
@@ -1568,20 +1580,20 @@ function useStickyHeaders(headerFixed, enabled) {
 
 // src/SectionList.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var AnimatedSectionList = import_react_native_reanimated16.default.createAnimatedComponent(import_react_native14.SectionList);
+var AnimatedSectionList = import_react_native_reanimated15.default.createAnimatedComponent(import_react_native14.SectionList);
 var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: externalContentContainerStyle, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onContentSizeChange, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, removeClippedSubviews = false, sections, showsVerticalScrollIndicator, style, ref: externalRef, windowSize = 100, ...props }) => {
   const scrollView = (0, import_react19.useRef)(null);
   const { stickySectionHeadersEnabled = true, renderSectionHeader, ...passThroughProps } = props;
   const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, contentPadding, footerFixed, headerFixed, headerHeight } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, hideUntilMeasured: true, keyboardAware, pullSearchHeight, style });
   const { listGeneration, onListUnmount } = (0, import_react19.useContext)(ScrollViewContext);
-  const capturedGeneration = (0, import_react_native_reanimated16.useSharedValue)(-1);
+  const capturedGeneration = (0, import_react_native_reanimated15.useSharedValue)(-1);
   (0, import_react19.useLayoutEffect)(() => {
     const generation = listGeneration.value;
     if (import_react_native14.Platform.OS === "web") {
       capturedGeneration.value = generation;
       return;
     }
-    (0, import_react_native_reanimated16.runOnUI)((gen) => {
+    (0, import_react_native_reanimated15.runOnUI)((gen) => {
       "worklet";
       capturedGeneration.value = gen;
     })(generation);
@@ -1702,7 +1714,7 @@ var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: exter
     ),
     hiddenHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native14.View, { pointerEvents: "none", style: styles8.measureContainer, children: hiddenHeader }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollViewChip, { chipProps, onChipPress, onPress: handleScrollToTop, style: chipStyle }),
-    usesCustomSticky && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_reanimated16.default.View, { pointerEvents: "none", style: [styles8.stickyClip, clipStyle], children: activeIndex >= 0 && activeIndex < sections.length && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_reanimated16.default.View, { style: [styles8.stickyOverlay, overlayStyle], children: renderSectionHeader({ section: sections[activeIndex] }) }) })
+    usesCustomSticky && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_reanimated15.default.View, { pointerEvents: "none", style: [styles8.stickyClip, clipStyle], children: activeIndex >= 0 && activeIndex < sections.length && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_reanimated15.default.View, { style: [styles8.stickyOverlay, overlayStyle], children: renderSectionHeader({ section: sections[activeIndex] }) }) })
   ] });
   return detectorGesture ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_gesture_handler4.GestureDetector, { gesture: detectorGesture, children: content }) : content;
 };
@@ -1722,14 +1734,14 @@ var useScrollView = () => {
 
 // src/useScrollViewChrome.ts
 var import_react21 = require("react");
-var import_react_native_reanimated17 = require("react-native-reanimated");
+var import_react_native_reanimated16 = require("react-native-reanimated");
 var noop = () => {
 };
 var useScrollViewChromeStyle = () => {
   const chrome = (0, import_react21.useContext)(ScrollViewChromeContext);
-  const fallback = (0, import_react_native_reanimated17.useSharedValue)(0);
+  const fallback = (0, import_react_native_reanimated16.useSharedValue)(0);
   const offset = chrome?.offset ?? fallback;
-  return (0, import_react_native_reanimated17.useAnimatedStyle)(() => ({ transform: [{ translateY: offset.value }] }), [offset]);
+  return (0, import_react_native_reanimated16.useAnimatedStyle)(() => ({ transform: [{ translateY: offset.value }] }), [offset]);
 };
 var useScrollViewChromePin = (active) => {
   const chrome = (0, import_react21.useContext)(ScrollViewChromeContext);

package/dist/index.mjs

@@ -31,8 +31,10 @@ var styles = StyleSheet.create({
 });
 
 // src/internal/useScrollHandler.ts
+import { callWorkletCallback, useWorkletCallback } from "@rific/core";
 import { useContext as useContext2 } from "react";
-import { runOnJS, useAnimatedScrollHandler, useSharedValue as useSharedValue2, withTiming } from "react-native-reanimated";
+import { useAnimatedScrollHandler, useSharedValue as useSharedValue2, withTiming } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
 
 // src/ScrollViewContext.ts
 import { createContext } from "react";
@@ -279,6 +281,8 @@ function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold = 100,
   const { chromeHosted, chromeWritable, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared, stackHeightShared } = useContext2(ScrollViewContext);
   const snapUpAccum = useSharedValue2(0);
   const fromBottomBounce = useSharedValue2(false);
+  const remountSyncedKey = useWorkletCallback((y) => onRemountSynced?.(y));
+  const remountSyncRetryKey = useWorkletCallback((y) => onRemountSyncRetry?.(y));
   return useAnimatedScrollHandler(
     {
       onScroll: ({ contentOffset: { x, y }, contentSize: { height: contentHeight }, layoutMeasurement: { height: layoutHeight } }) => {
@@ -287,9 +291,9 @@ function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold = 100,
           const target = remountSyncTarget.value;
           if (Math.abs(y - target) < REMOUNT_SYNC_TOLERANCE) {
             remountSyncTarget.value = null;
-            if (onRemountSynced) runOnJS(onRemountSynced)(y);
+            if (onRemountSynced) scheduleOnRN(callWorkletCallback, remountSyncedKey, y);
           } else if (onRemountSyncRetry) {
-            runOnJS(onRemountSyncRetry)(y);
+            scheduleOnRN(callWorkletCallback, remountSyncRetryKey, y);
           }
           return;
         }
@@ -373,21 +377,23 @@ import { useAnimatedStyle, useSharedValue as useSharedValue3, withTiming as with
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 // src/useKeyboardInset.ts
+import { callWorkletCallback as callWorkletCallback2, useWorkletCallback as useWorkletCallback2 } from "@rific/core";
 import { useState as useState2 } from "react";
 import { Platform as Platform2 } from "react-native";
 import { useKeyboardHandler } from "react-native-keyboard-controller";
-import { runOnJS as runOnJS2 } from "react-native-reanimated";
+import { scheduleOnRN as scheduleOnRN2 } from "react-native-worklets";
 var useKeyboardInsetNative = () => {
   const [keyboardHeight, setKeyboardHeight] = useState2(0);
+  const keyboardHeightKey = useWorkletCallback2(setKeyboardHeight);
   useKeyboardHandler(
     {
       onMove: (e) => {
         "worklet";
-        runOnJS2(setKeyboardHeight)(e.height);
+        scheduleOnRN2(callWorkletCallback2, keyboardHeightKey, e.height);
       },
       onEnd: (e) => {
         "worklet";
-        runOnJS2(setKeyboardHeight)(e.height);
+        scheduleOnRN2(callWorkletCallback2, keyboardHeightKey, e.height);
       }
     },
     []
@@ -870,10 +876,12 @@ var styles4 = { measureContainer: { left: 0, opacity: 0, position: "absolute", r
 var FlatList = memo2(FlatListInner);
 
 // src/PullSearch.tsx
+import { callWorkletCallback as callWorkletCallback3, useWorkletCallback as useWorkletCallback3 } from "@rific/core";
 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 useTheme3 } from "react-native-paper";
-import Animated3, { Extrapolation, interpolate, runOnJS as runOnJS3, useAnimatedReaction, useAnimatedStyle as useAnimatedStyle3 } from "react-native-reanimated";
+import Animated3, { Extrapolation, interpolate, useAnimatedReaction, useAnimatedStyle as useAnimatedStyle3 } from "react-native-reanimated";
+import { scheduleOnRN as scheduleOnRN3 } from "react-native-worklets";
 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);
@@ -892,13 +900,14 @@ var PullSearch = forwardRef(function PullSearch2({ debounce, onChangeText, onHei
     focus: () => inputRef.current?.focus()
   }));
   const blurInput = useCallback5(() => inputRef.current?.blur(), []);
+  const blurKey = useWorkletCallback3(blurInput);
   useAnimatedReaction(
     () => {
       if (barHeight === 0) return false;
       return scrollPosition.value >= -(headerHeight ?? 0) + barHeight;
     },
     (isHidden, wasHidden) => {
-      if (isHidden && !wasHidden) runOnJS3(blurInput)();
+      if (isHidden && !wasHidden) scheduleOnRN3(callWorkletCallback3, blurKey);
     },
     // scrollPosition has to be listed too, not just read - see useStickyHeaders' useAnimatedReaction
     // for why: on web, without reanimated's Babel plugin active, an unlisted SharedValue mutation
@@ -1394,15 +1403,18 @@ import { Gesture as Gesture4, GestureDetector as GestureDetector4 } from "react-
 import Animated7, { runOnUI as runOnUI3, useSharedValue as useSharedValue10 } from "react-native-reanimated";
 
 // src/internal/useStickyHeaders.ts
+import { callWorkletCallback as callWorkletCallback4, useWorkletCallback as useWorkletCallback4 } from "@rific/core";
 import { useCallback as useCallback9, useContext as useContext13, useLayoutEffect as useLayoutEffect8, useRef as useRef10, useState as useState7 } from "react";
-import { runOnJS as runOnJS4, useAnimatedReaction as useAnimatedReaction2, useAnimatedStyle as useAnimatedStyle6, useSharedValue as useSharedValue9 } from "react-native-reanimated";
+import { useAnimatedReaction as useAnimatedReaction2, useAnimatedStyle as useAnimatedStyle6, useSharedValue as useSharedValue9 } from "react-native-reanimated";
 import { useSafeAreaInsets as useSafeAreaInsets5 } from "react-native-safe-area-context";
+import { scheduleOnRN as scheduleOnRN4 } from "react-native-worklets";
 function useStickyHeaders(headerFixed, enabled) {
   const { headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared } = useContext13(ScrollViewContext);
   const insetsTop = useSafeAreaInsets5().top;
   const sectionYPositions = useSharedValue9([]);
   const sectionHeights = useSharedValue9([]);
   const [activeIndex, setActiveIndex] = useState7(-1);
+  const activeIndexKey = useWorkletCallback4(setActiveIndex);
   const contentIndexShared = useSharedValue9(-1);
   useLayoutEffect8(() => {
     contentIndexShared.value = activeIndex;
@@ -1434,7 +1446,7 @@ function useStickyHeaders(headerFixed, enabled) {
       return active;
     },
     (curr, prev) => {
-      if (curr !== prev) runOnJS4(setActiveIndex)(curr);
+      if (curr !== prev) scheduleOnRN4(callWorkletCallback4, activeIndexKey, curr);
     },
     // Same web-only reanimated gap as useAnimatedStyle elsewhere in this file: this "prepare"
     // function's own SharedValue reads (sectionYPositions, headerHeightShared, scrollPosition,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/scroll-view",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Blur styled scroll system for React Native. Floating headers/footers, keyboard awareness, and scroll-away chrome",
   "keywords": [
     "react-native",
@@ -66,7 +66,7 @@
     "@infinitetoken/tsconfig": "^0.6.0",
     "@reduxjs/toolkit": "^2.12.0",
     "@rific/auto-paper": "^0.13.3",
-    "@rific/core": "^0.3.1",
+    "@rific/core": "^0.5.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
@@ -92,14 +92,15 @@
   },
   "peerDependencies": {
     "@rific/auto-paper": ">=0.10.0",
-    "@rific/core": ">=0.1.1",
+    "@rific/core": ">=0.5.0",
     "react": ">=19.0.0",
     "react-native": ">=0.83.0",
     "react-native-gesture-handler": ">=2.0.0 <4.0.0",
     "react-native-keyboard-controller": ">=1.0.0",
     "react-native-paper": ">=5.0.0",
     "react-native-reanimated": ">=4.0.0",
-    "react-native-safe-area-context": ">=5.0.0"
+    "react-native-safe-area-context": ">=5.0.0",
+    "react-native-worklets": ">=0.5.0"
   },
   "publishConfig": {
     "access": "public"

package/src/PullSearch.tsx

@@ -1,7 +1,9 @@
+import { callWorkletCallback, useWorkletCallback } from '@rific/core'
 import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { type LayoutChangeEvent, StyleSheet, type TextInput } from 'react-native'
 import { Searchbar, useTheme } from 'react-native-paper'
-import Animated, { Extrapolation, interpolate, runOnJS, useAnimatedReaction, useAnimatedStyle } from 'react-native-reanimated'
+import Animated, { Extrapolation, interpolate, useAnimatedReaction, useAnimatedStyle } from 'react-native-reanimated'
+import { scheduleOnRN } from 'react-native-worklets'
 
 import { ScrollViewContext } from './ScrollViewContext'
 
@@ -38,6 +40,7 @@ export const PullSearch = forwardRef<PullSearchHandle, PullSearchProps>(function
   }))
 
   const blurInput = useCallback(() => inputRef.current?.blur(), [])
+  const blurKey = useWorkletCallback(blurInput)
 
   useAnimatedReaction(
     () => {
@@ -45,7 +48,7 @@ export const PullSearch = forwardRef<PullSearchHandle, PullSearchProps>(function
       return scrollPosition.value >= -(headerHeight ?? 0) + barHeight
     },
     (isHidden, wasHidden) => {
-      if (isHidden && !wasHidden) runOnJS(blurInput)()
+      if (isHidden && !wasHidden) scheduleOnRN(callWorkletCallback, blurKey)
     },
     // scrollPosition has to be listed too, not just read - see useStickyHeaders' useAnimatedReaction
     // for why: on web, without reanimated's Babel plugin active, an unlisted SharedValue mutation

package/src/internal/useScrollHandler.ts

@@ -1,6 +1,8 @@
+import { callWorkletCallback, useWorkletCallback } from '@rific/core'
 import { useContext } from 'react'
 import type { SharedValue } from 'react-native-reanimated'
-import { runOnJS, useAnimatedScrollHandler, useSharedValue, withTiming } from 'react-native-reanimated'
+import { useAnimatedScrollHandler, useSharedValue, withTiming } from 'react-native-reanimated'
+import { scheduleOnRN } from 'react-native-worklets'
 
 import { ScrollViewContext } from '../ScrollViewContext'
 import { REMOUNT_SYNC_TOLERANCE } from '../useScrollInit'
@@ -24,6 +26,10 @@ export function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold
   const { chromeHosted, chromeWritable, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared, stackHeightShared } = useContext(ScrollViewContext)
   const snapUpAccum = useSharedValue(0)
   const fromBottomBounce = useSharedValue(false)
+  // Worklets never get the consumer's callbacks themselves: react-native-worklets holds a runOnJS target natively for as
+  // long as the worklet lives, which pinned the list. They call the module-level callWorkletCallback by key.
+  const remountSyncedKey = useWorkletCallback((y: number) => onRemountSynced?.(y))
+  const remountSyncRetryKey = useWorkletCallback((y: number) => onRemountSyncRetry?.(y))
 
   return useAnimatedScrollHandler(
     {
@@ -33,9 +39,9 @@ export function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold
           const target = remountSyncTarget.value
           if (Math.abs(y - target) < REMOUNT_SYNC_TOLERANCE) {
             remountSyncTarget.value = null
-            if (onRemountSynced) runOnJS(onRemountSynced)(y)
+            if (onRemountSynced) scheduleOnRN(callWorkletCallback, remountSyncedKey, y)
           } else if (onRemountSyncRetry) {
-            runOnJS(onRemountSyncRetry)(y)
+            scheduleOnRN(callWorkletCallback, remountSyncRetryKey, y)
           }
           return
         }

package/src/internal/useStickyHeaders.ts

@@ -1,6 +1,8 @@
+import { callWorkletCallback, useWorkletCallback } from '@rific/core'
 import { useCallback, useContext, useLayoutEffect, useRef, useState } from 'react'
-import { runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
+import { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { scheduleOnRN } from 'react-native-worklets'
 
 import { ScrollViewContext } from '../ScrollViewContext'
 
@@ -19,6 +21,7 @@ export function useStickyHeaders(headerFixed: boolean, enabled: boolean): Sticky
   const sectionYPositions = useSharedValue<number[]>([])
   const sectionHeights = useSharedValue<number[]>([])
   const [activeIndex, setActiveIndex] = useState(-1)
+  const activeIndexKey = useWorkletCallback(setActiveIndex)
   // Mirrors activeIndex React state but lives on the UI thread for overlayStyle.
   // Updated via useLayoutEffect so content and style always change together.
   const contentIndexShared = useSharedValue(-1)
@@ -60,7 +63,7 @@ export function useStickyHeaders(headerFixed: boolean, enabled: boolean): Sticky
       return active
     },
     (curr, prev) => {
-      if (curr !== prev) runOnJS(setActiveIndex)(curr)
+      if (curr !== prev) scheduleOnRN(callWorkletCallback, activeIndexKey, curr)
     },
     // Same web-only reanimated gap as useAnimatedStyle elsewhere in this file: this "prepare"
     // function's own SharedValue reads (sectionYPositions, headerHeightShared, scrollPosition,

package/src/useKeyboardInset.ts

@@ -1,19 +1,21 @@
+import { callWorkletCallback, useWorkletCallback } from '@rific/core'
 import { useState } from 'react'
 import { Platform } from 'react-native'
 import { useKeyboardHandler } from 'react-native-keyboard-controller'
-import { runOnJS } from 'react-native-reanimated'
+import { scheduleOnRN } from 'react-native-worklets'
 
 const useKeyboardInsetNative = () => {
   const [keyboardHeight, setKeyboardHeight] = useState(0)
+  const keyboardHeightKey = useWorkletCallback(setKeyboardHeight)
   useKeyboardHandler(
     {
       onMove: (e) => {
         'worklet'
-        runOnJS(setKeyboardHeight)(e.height)
+        scheduleOnRN(callWorkletCallback, keyboardHeightKey, e.height)
       },
       onEnd: (e) => {
         'worklet'
-        runOnJS(setKeyboardHeight)(e.height)
+        scheduleOnRN(callWorkletCallback, keyboardHeightKey, e.height)
       }
     },
     []