@rific/scroll-view 1.0.0 → 1.1.0

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

@@ -90,6 +90,7 @@ 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");
 
@@ -338,6 +339,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 +349,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_reanimated3.runOnJS)(import_core.callWorkletCallback)(remountSyncedKey, y);
           } else if (onRemountSyncRetry) {
-            (0, import_react_native_reanimated3.runOnJS)(onRemountSyncRetry)(y);
+            (0, import_react_native_reanimated3.runOnJS)(import_core.callWorkletCallback)(remountSyncRetryKey, y);
           }
           return;
         }
@@ -432,21 +435,23 @@ var import_react_native_reanimated5 = 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 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_reanimated4.runOnJS)(import_core2.callWorkletCallback)(keyboardHeightKey, e.height);
       },
       onEnd: (e) => {
         "worklet";
-        (0, import_react_native_reanimated4.runOnJS)(setKeyboardHeight)(e.height);
+        (0, import_react_native_reanimated4.runOnJS)(import_core2.callWorkletCallback)(keyboardHeightKey, e.height);
       }
     },
     []
@@ -929,6 +934,7 @@ 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");
@@ -951,13 +957,14 @@ var PullSearch = (0, import_react10.forwardRef)(function PullSearch2({ debounce,
     focus: () => inputRef.current?.focus()
   }));
   const blurInput = (0, import_react10.useCallback)(() => inputRef.current?.blur(), []);
+  const blurKey = (0, import_core3.useWorkletCallback)(blurInput);
   (0, import_react_native_reanimated9.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_reanimated9.runOnJS)(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
@@ -1003,23 +1010,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: []
 });
@@ -1135,8 +1142,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;
@@ -1453,6 +1460,7 @@ var import_react_native_gesture_handler4 = require("react-native-gesture-handler
 var import_react_native_reanimated16 = __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_safe_area_context5 = require("react-native-safe-area-context");
@@ -1462,6 +1470,7 @@ function useStickyHeaders(headerFixed, enabled) {
   const sectionYPositions = (0, import_react_native_reanimated15.useSharedValue)([]);
   const sectionHeights = (0, import_react_native_reanimated15.useSharedValue)([]);
   const [activeIndex, setActiveIndex] = (0, import_react18.useState)(-1);
+  const activeIndexKey = (0, import_core7.useWorkletCallback)(setActiveIndex);
   const contentIndexShared = (0, import_react_native_reanimated15.useSharedValue)(-1);
   (0, import_react18.useLayoutEffect)(() => {
     contentIndexShared.value = activeIndex;
@@ -1493,7 +1502,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_reanimated15.runOnJS)(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,

package/dist/index.mjs

@@ -31,6 +31,7 @@ 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";
 
@@ -279,6 +280,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 +290,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) runOnJS(callWorkletCallback)(remountSyncedKey, y);
           } else if (onRemountSyncRetry) {
-            runOnJS(onRemountSyncRetry)(y);
+            runOnJS(callWorkletCallback)(remountSyncRetryKey, y);
           }
           return;
         }
@@ -373,21 +376,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";
 var useKeyboardInsetNative = () => {
   const [keyboardHeight, setKeyboardHeight] = useState2(0);
+  const keyboardHeightKey = useWorkletCallback2(setKeyboardHeight);
   useKeyboardHandler(
     {
       onMove: (e) => {
         "worklet";
-        runOnJS2(setKeyboardHeight)(e.height);
+        runOnJS2(callWorkletCallback2)(keyboardHeightKey, e.height);
       },
       onEnd: (e) => {
         "worklet";
-        runOnJS2(setKeyboardHeight)(e.height);
+        runOnJS2(callWorkletCallback2)(keyboardHeightKey, e.height);
       }
     },
     []
@@ -870,6 +875,7 @@ 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";
@@ -892,13 +898,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) runOnJS3(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,6 +1401,7 @@ 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 { useSafeAreaInsets as useSafeAreaInsets5 } from "react-native-safe-area-context";
@@ -1403,6 +1411,7 @@ function useStickyHeaders(headerFixed, enabled) {
   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 +1443,7 @@ function useStickyHeaders(headerFixed, enabled) {
       return active;
     },
     (curr, prev) => {
-      if (curr !== prev) runOnJS4(setActiveIndex)(curr);
+      if (curr !== prev) runOnJS4(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.0",
   "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,7 +92,7 @@
   },
   "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",

package/src/PullSearch.tsx

@@ -1,3 +1,4 @@
+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'
@@ -38,6 +39,7 @@ export const PullSearch = forwardRef<PullSearchHandle, PullSearchProps>(function
   }))
 
   const blurInput = useCallback(() => inputRef.current?.blur(), [])
+  const blurKey = useWorkletCallback(blurInput)
 
   useAnimatedReaction(
     () => {
@@ -45,7 +47,7 @@ export const PullSearch = forwardRef<PullSearchHandle, PullSearchProps>(function
       return scrollPosition.value >= -(headerHeight ?? 0) + barHeight
     },
     (isHidden, wasHidden) => {
-      if (isHidden && !wasHidden) runOnJS(blurInput)()
+      if (isHidden && !wasHidden) runOnJS(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,3 +1,4 @@
+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'
@@ -24,6 +25,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 +38,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) runOnJS(callWorkletCallback)(remountSyncedKey, y)
           } else if (onRemountSyncRetry) {
-            runOnJS(onRemountSyncRetry)(y)
+            runOnJS(callWorkletCallback)(remountSyncRetryKey, y)
           }
           return
         }

package/src/internal/useStickyHeaders.ts

@@ -1,3 +1,4 @@
+import { callWorkletCallback, useWorkletCallback } from '@rific/core'
 import { useCallback, useContext, useLayoutEffect, useRef, useState } from 'react'
 import { runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -19,6 +20,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 +62,7 @@ export function useStickyHeaders(headerFixed: boolean, enabled: boolean): Sticky
       return active
     },
     (curr, prev) => {
-      if (curr !== prev) runOnJS(setActiveIndex)(curr)
+      if (curr !== prev) runOnJS(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,3 +1,4 @@
+import { callWorkletCallback, useWorkletCallback } from '@rific/core'
 import { useState } from 'react'
 import { Platform } from 'react-native'
 import { useKeyboardHandler } from 'react-native-keyboard-controller'
@@ -5,15 +6,16 @@ import { runOnJS } from 'react-native-reanimated'
 
 const useKeyboardInsetNative = () => {
   const [keyboardHeight, setKeyboardHeight] = useState(0)
+  const keyboardHeightKey = useWorkletCallback(setKeyboardHeight)
   useKeyboardHandler(
     {
       onMove: (e) => {
         'worklet'
-        runOnJS(setKeyboardHeight)(e.height)
+        runOnJS(callWorkletCallback)(keyboardHeightKey, e.height)
       },
       onEnd: (e) => {
         'worklet'
-        runOnJS(setKeyboardHeight)(e.height)
+        runOnJS(callWorkletCallback)(keyboardHeightKey, e.height)
       }
     },
     []