@rific/scroll-view 0.9.2 → 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
@@ -63,6 +65,27 @@ App-wide defaults for scroll settings. Wrap your root layout to set global defau
 
 ---
 
+### `ScrollViewConfigProvider`
+
+App-wide component config, set once at startup. Today it holds one thing: the component `ScrollViewHeader` renders for a `backAction` callback. Pass `AppbarBackAction` from [`@rific/feedback-press`](https://www.npmjs.com/package/@rific/feedback-press) and every header's back button gets the same haptics and sound as the rest of your buttons, without touching each screen. This package doesn't depend on feedback-press; you hand it the component.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `BackAction` | `ComponentType<ScrollViewBackActionProps>` | Paper's `Appbar.BackAction` | Rendered for a `backAction` callback. Receives `onPress`, `size`, `style` and `accessibilityLabel` (from `backActionAccessibilityLabel`), the same props the default gets |
+| `children` | `ReactNode` | - | - |
+
+```tsx
+import { AppbarBackAction } from '@rific/feedback-press'
+import { ScrollViewConfigProvider } from '@rific/scroll-view'
+
+// Inside FeedbackPressProvider, since AppbarBackAction reads it
+<ScrollViewConfigProvider BackAction={AppbarBackAction}>{children}</ScrollViewConfigProvider>
+```
+
+Or call `configureScrollView({ BackAction: AppbarBackAction })` once at module load; `getScrollViewConfig()` reads it back. Like the other `@rific` module configs (`DrawerProvider`, `ResizableInputProvider`), this is plain startup config, not React state: the provider sets it during its own render, before anything under it renders, and changing it later doesn't re-render headers already on screen. A `backAction` element on one header still replaces the configured component there.
+
+---
+
 ### `ScrollViewProvider`
 
 Screen-level provider that owns header/footer state and scroll position. Must wrap `ScrollViewHeader`, `ScrollViewFooter`, and the scroll component.
@@ -108,7 +131,7 @@ Floating header with blur backdrop, title, back action, trailing action, and bui
 | `caption` | `string` | - | Subtitle below title |
 | `centerContent` | `ReactNode` | - | Replaces title/caption with custom content |
 | `children` | `ReactNode` | - | Left-side content (icon buttons, etc.) |
-| `backAction` | `() => void` | - | Renders a back button and calls this on press |
+| `backAction` | `(() => void) \| ReactNode` | - | A callback renders a back button (the [configured `BackAction`](#scrollviewconfigprovider), Paper's `Appbar.BackAction` by default) and calls it on press. An element is rendered in that spot instead |
 | `backActionFixed` | `boolean` | settings | Keep back button visible as header scrolls away |
 | `trailingAction` | `ReactNode` | - | Right-side floating action |
 | `trailingActionFixed` | `boolean` | `true` | Keep trailing action visible as header scrolls away |

package/dist/index.d.mts

@@ -166,6 +166,23 @@ type ScrollViewChromeProviderProps = {
 };
 declare const ScrollViewChromeProvider: ({ children, footprint, overhang, snapBack, useIsActive }: ScrollViewChromeProviderProps) => react.JSX.Element;
 
+type ScrollViewBackActionProps = {
+    accessibilityLabel?: string;
+    onPress: () => void;
+    size: number;
+    style: ViewStyle;
+};
+type ScrollViewConfig = {
+    /** Component ScrollViewHeader renders when `backAction` is a plain callback. Pass `AppbarBackAction` from `@rific/feedback-press` to give every header's back button its haptics and sound; omit to keep react-native-paper's `Appbar.BackAction`. A `backAction` element on one header still replaces it there. */
+    BackAction?: ComponentType<ScrollViewBackActionProps>;
+};
+declare const configureScrollView: (next: Partial<ScrollViewConfig>) => void;
+declare const getScrollViewConfig: () => ScrollViewConfig;
+declare const ScrollViewConfigProvider: (props: _rific_core.ModuleConfigProviderProps<ScrollViewConfig>) => React.JSX.Element;
+type ScrollViewConfigProviderProps = ScrollViewConfig & {
+    children: ReactNode;
+};
+
 type ScrollViewContextType = {
     blur: boolean;
     chromeHosted: boolean;
@@ -285,4 +302,4 @@ declare const useScrollViewChromeReveal: () => () => void;
 
 declare const useScrollViewSettings: () => _rific_core.SettingsContextValue<ScrollViewSettings>;
 
-export { type ChipProps, CustomList, type CustomListProps, FlatList, type FlatListProps, PullSearch, type PullSearchHandle, type PullSearchProps, ScrollView, ScrollViewChromeProvider, type ScrollViewChromeProviderProps, ScrollViewContext, type ScrollViewContextType, ScrollViewFooter, type ScrollViewFooterProps, ScrollViewHeader, type ScrollViewHeaderProps, type ScrollViewProps, ScrollViewProvider, type ScrollViewProviderProps, type ScrollViewSettings, ScrollViewSettingsContext, type ScrollViewSettingsContextType, ScrollViewSettingsProvider, type ScrollViewSettingsProviderProps, SectionList, type SectionListProps, defaultScrollViewSettings, scrollViewActions, scrollViewReducer, useKeyboardInset, useScrollView, useScrollViewChromePin, useScrollViewChromeReveal, useScrollViewChromeStyle, useScrollViewSettings };
+export { type ChipProps, CustomList, type CustomListProps, FlatList, type FlatListProps, PullSearch, type PullSearchHandle, type PullSearchProps, ScrollView, type ScrollViewBackActionProps, ScrollViewChromeProvider, type ScrollViewChromeProviderProps, type ScrollViewConfig, ScrollViewConfigProvider, type ScrollViewConfigProviderProps, ScrollViewContext, type ScrollViewContextType, ScrollViewFooter, type ScrollViewFooterProps, ScrollViewHeader, type ScrollViewHeaderProps, type ScrollViewProps, ScrollViewProvider, type ScrollViewProviderProps, type ScrollViewSettings, ScrollViewSettingsContext, type ScrollViewSettingsContextType, ScrollViewSettingsProvider, type ScrollViewSettingsProviderProps, SectionList, type SectionListProps, configureScrollView, defaultScrollViewSettings, getScrollViewConfig, scrollViewActions, scrollViewReducer, useKeyboardInset, useScrollView, useScrollViewChromePin, useScrollViewChromeReveal, useScrollViewChromeStyle, useScrollViewSettings };

package/dist/index.d.ts

@@ -166,6 +166,23 @@ type ScrollViewChromeProviderProps = {
 };
 declare const ScrollViewChromeProvider: ({ children, footprint, overhang, snapBack, useIsActive }: ScrollViewChromeProviderProps) => react.JSX.Element;
 
+type ScrollViewBackActionProps = {
+    accessibilityLabel?: string;
+    onPress: () => void;
+    size: number;
+    style: ViewStyle;
+};
+type ScrollViewConfig = {
+    /** Component ScrollViewHeader renders when `backAction` is a plain callback. Pass `AppbarBackAction` from `@rific/feedback-press` to give every header's back button its haptics and sound; omit to keep react-native-paper's `Appbar.BackAction`. A `backAction` element on one header still replaces it there. */
+    BackAction?: ComponentType<ScrollViewBackActionProps>;
+};
+declare const configureScrollView: (next: Partial<ScrollViewConfig>) => void;
+declare const getScrollViewConfig: () => ScrollViewConfig;
+declare const ScrollViewConfigProvider: (props: _rific_core.ModuleConfigProviderProps<ScrollViewConfig>) => React.JSX.Element;
+type ScrollViewConfigProviderProps = ScrollViewConfig & {
+    children: ReactNode;
+};
+
 type ScrollViewContextType = {
     blur: boolean;
     chromeHosted: boolean;
@@ -285,4 +302,4 @@ declare const useScrollViewChromeReveal: () => () => void;
 
 declare const useScrollViewSettings: () => _rific_core.SettingsContextValue<ScrollViewSettings>;
 
-export { type ChipProps, CustomList, type CustomListProps, FlatList, type FlatListProps, PullSearch, type PullSearchHandle, type PullSearchProps, ScrollView, ScrollViewChromeProvider, type ScrollViewChromeProviderProps, ScrollViewContext, type ScrollViewContextType, ScrollViewFooter, type ScrollViewFooterProps, ScrollViewHeader, type ScrollViewHeaderProps, type ScrollViewProps, ScrollViewProvider, type ScrollViewProviderProps, type ScrollViewSettings, ScrollViewSettingsContext, type ScrollViewSettingsContextType, ScrollViewSettingsProvider, type ScrollViewSettingsProviderProps, SectionList, type SectionListProps, defaultScrollViewSettings, scrollViewActions, scrollViewReducer, useKeyboardInset, useScrollView, useScrollViewChromePin, useScrollViewChromeReveal, useScrollViewChromeStyle, useScrollViewSettings };
+export { type ChipProps, CustomList, type CustomListProps, FlatList, type FlatListProps, PullSearch, type PullSearchHandle, type PullSearchProps, ScrollView, type ScrollViewBackActionProps, ScrollViewChromeProvider, type ScrollViewChromeProviderProps, type ScrollViewConfig, ScrollViewConfigProvider, type ScrollViewConfigProviderProps, ScrollViewContext, type ScrollViewContextType, ScrollViewFooter, type ScrollViewFooterProps, ScrollViewHeader, type ScrollViewHeaderProps, type ScrollViewProps, ScrollViewProvider, type ScrollViewProviderProps, type ScrollViewSettings, ScrollViewSettingsContext, type ScrollViewSettingsContextType, ScrollViewSettingsProvider, type ScrollViewSettingsProviderProps, SectionList, type SectionListProps, configureScrollView, defaultScrollViewSettings, getScrollViewConfig, scrollViewActions, scrollViewReducer, useKeyboardInset, useScrollView, useScrollViewChromePin, useScrollViewChromeReveal, useScrollViewChromeStyle, useScrollViewSettings };

package/dist/index.js

@@ -35,6 +35,7 @@ __export(index_exports, {
   PullSearch: () => PullSearch,
   ScrollView: () => ScrollView,
   ScrollViewChromeProvider: () => ScrollViewChromeProvider,
+  ScrollViewConfigProvider: () => ScrollViewConfigProvider,
   ScrollViewContext: () => ScrollViewContext,
   ScrollViewFooter: () => ScrollViewFooter,
   ScrollViewHeader: () => ScrollViewHeader,
@@ -42,7 +43,9 @@ __export(index_exports, {
   ScrollViewSettingsContext: () => ScrollViewSettingsContext,
   ScrollViewSettingsProvider: () => ScrollViewSettingsProvider,
   SectionList: () => SectionList,
+  configureScrollView: () => configureScrollView,
   defaultScrollViewSettings: () => defaultScrollViewSettings,
+  getScrollViewConfig: () => getScrollViewConfig,
   scrollViewActions: () => scrollViewActions,
   scrollViewReducer: () => scrollViewReducer,
   useKeyboardInset: () => useKeyboardInset,
@@ -87,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");
 
@@ -335,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 } }) => {
@@ -343,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;
         }
@@ -429,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);
       }
     },
     []
@@ -926,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");
@@ -948,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
@@ -1000,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: []
 });
@@ -1131,6 +1141,13 @@ var ScrollViewChromeProvider = ({ children, footprint, overhang = 0, snapBack =
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ScrollViewChromeContext.Provider, { value: chrome, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ScrollViewChromeHostContext.Provider, { value: host, children }) });
 };
 
+// src/ScrollViewConfig.tsx
+var import_core6 = require("@rific/core");
+var scrollViewConfig = (0, import_core6.createModuleConfig)();
+var configureScrollView = scrollViewConfig.configure;
+var getScrollViewConfig = scrollViewConfig.getConfig;
+var ScrollViewConfigProvider = scrollViewConfig.Provider;
+
 // src/ScrollViewFooter.tsx
 var import_auto_paper3 = require("@rific/auto-paper");
 var import_react14 = require("react");
@@ -1253,6 +1270,8 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
   }, [headerFixed, headerHeightShared, top, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared]);
   const actionTop = top + actionMargin;
   const buttonStyle = { borderRadius: actionSize, height: actionSize, margin: 0, width: actionSize };
+  const BackAction = getScrollViewConfig().BackAction ?? import_react_native_paper4.Appbar.BackAction;
+  const backActionElement = typeof backAction === "function" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction;
   const actionShadow = { borderRadius: actionSize / 2, elevation: 2, shadowColor: "#000", shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.15, shadowRadius: 2 };
   const leadingStyle = { alignItems: "center", height: actionSize, justifyContent: "center", left: actionMargin, position: "absolute", top: actionTop, width: actionSize, zIndex: 3, ...actionShadow };
   const trailingStyle = { alignItems: "center", height: actionSize, justifyContent: "center", position: "absolute", right: actionMargin, top: actionTop, width: actionSize, zIndex: 3, ...actionShadow };
@@ -1272,10 +1291,10 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
     /* @__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)(ActionBg, { blur, style: actionStyle }),
-      typeof backAction === "function" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper4.Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
+      backActionElement
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native_reanimated13.default.View, { style: [leadingStyle, translateStyle], children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ActionBg, { blur, style: actionStyle }),
-      typeof backAction === "function" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper4.Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
+      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 }),
@@ -1441,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");
@@ -1450,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;
@@ -1481,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,
@@ -1743,6 +1764,7 @@ var useScrollViewSettings = scrollViewUseSettings;
   PullSearch,
   ScrollView,
   ScrollViewChromeProvider,
+  ScrollViewConfigProvider,
   ScrollViewContext,
   ScrollViewFooter,
   ScrollViewHeader,
@@ -1750,7 +1772,9 @@ var useScrollViewSettings = scrollViewUseSettings;
   ScrollViewSettingsContext,
   ScrollViewSettingsProvider,
   SectionList,
+  configureScrollView,
   defaultScrollViewSettings,
+  getScrollViewConfig,
   scrollViewActions,
   scrollViewReducer,
   useKeyboardInset,

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
@@ -1075,6 +1082,13 @@ var ScrollViewChromeProvider = ({ children, footprint, overhang = 0, snapBack =
   return /* @__PURE__ */ jsx8(ScrollViewChromeContext.Provider, { value: chrome, children: /* @__PURE__ */ jsx8(ScrollViewChromeHostContext.Provider, { value: host, children }) });
 };
 
+// src/ScrollViewConfig.tsx
+import { createModuleConfig } from "@rific/core";
+var scrollViewConfig = createModuleConfig();
+var configureScrollView = scrollViewConfig.configure;
+var getScrollViewConfig = scrollViewConfig.getConfig;
+var ScrollViewConfigProvider = scrollViewConfig.Provider;
+
 // src/ScrollViewFooter.tsx
 import { BlurView as BlurView2 } from "@rific/auto-paper";
 import { useContext as useContext10, useEffect as useEffect5, useLayoutEffect as useLayoutEffect5, useRef as useRef7 } from "react";
@@ -1197,6 +1211,8 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
   }, [headerFixed, headerHeightShared, top, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared]);
   const actionTop = top + actionMargin;
   const buttonStyle = { borderRadius: actionSize, height: actionSize, margin: 0, width: actionSize };
+  const BackAction = getScrollViewConfig().BackAction ?? Appbar.BackAction;
+  const backActionElement = typeof backAction === "function" ? /* @__PURE__ */ jsx10(BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction;
   const actionShadow = { borderRadius: actionSize / 2, elevation: 2, shadowColor: "#000", shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.15, shadowRadius: 2 };
   const leadingStyle = { alignItems: "center", height: actionSize, justifyContent: "center", left: actionMargin, position: "absolute", top: actionTop, width: actionSize, zIndex: 3, ...actionShadow };
   const trailingStyle = { alignItems: "center", height: actionSize, justifyContent: "center", position: "absolute", right: actionMargin, top: actionTop, width: actionSize, zIndex: 3, ...actionShadow };
@@ -1216,10 +1232,10 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
     /* @__PURE__ */ jsx10(Animated6.View, { pointerEvents: "none", style: [styles7.progress, progressStyle], children: /* @__PURE__ */ jsx10(ProgressBar, { indeterminate: progress === null, visible: progressing, progress: progress ?? void 0 }) }),
     backAction && (effectiveBackActionFixed ? /* @__PURE__ */ jsxs6(Animated6.View, { style: leadingStyle, children: [
       /* @__PURE__ */ jsx10(ActionBg, { blur, style: actionStyle }),
-      typeof backAction === "function" ? /* @__PURE__ */ jsx10(Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
+      backActionElement
     ] }) : /* @__PURE__ */ jsxs6(Animated6.View, { style: [leadingStyle, translateStyle], children: [
       /* @__PURE__ */ jsx10(ActionBg, { blur, style: actionStyle }),
-      typeof backAction === "function" ? /* @__PURE__ */ jsx10(Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
+      backActionElement
     ] })),
     trailingAction && (trailingActionFixed ? /* @__PURE__ */ jsxs6(View6, { style: trailingStyle, children: [
       /* @__PURE__ */ jsx10(ActionBg, { blur, style: actionStyle }),
@@ -1385,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";
@@ -1394,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;
@@ -1425,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,
@@ -1686,6 +1704,7 @@ export {
   PullSearch,
   ScrollView,
   ScrollViewChromeProvider,
+  ScrollViewConfigProvider,
   ScrollViewContext,
   ScrollViewFooter,
   ScrollViewHeader,
@@ -1693,7 +1712,9 @@ export {
   ScrollViewSettingsContext,
   ScrollViewSettingsProvider,
   SectionList,
+  configureScrollView,
   defaultScrollViewSettings,
+  getScrollViewConfig,
   scrollViewActions,
   scrollViewReducer,
   useKeyboardInset,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/scroll-view",
-  "version": "0.9.2",
+  "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/ScrollViewConfig.tsx

@@ -0,0 +1,34 @@
+import { createModuleConfig } from '@rific/core'
+import type { ComponentType, ReactNode } from 'react'
+import type { ViewStyle } from 'react-native'
+
+// What ScrollViewHeader passes the back action it renders for a plain `backAction` callback.
+// react-native-paper's Appbar.BackAction (the default) takes these, and so does
+// @rific/feedback-press's AppbarBackAction, which wraps it, so either drops in as is.
+export type ScrollViewBackActionProps = {
+  accessibilityLabel?: string
+  onPress: () => void
+  size: number
+  style: ViewStyle
+}
+
+export type ScrollViewConfig = {
+  /** Component ScrollViewHeader renders when `backAction` is a plain callback. Pass `AppbarBackAction` from `@rific/feedback-press` to give every header's back button its haptics and sound; omit to keep react-native-paper's `Appbar.BackAction`. A `backAction` element on one header still replaces it there. */
+  BackAction?: ComponentType<ScrollViewBackActionProps>
+}
+
+// @rific/core's createModuleConfig() supplies the module-level config singleton (configure/
+// getConfig/Provider) every @rific package wires up the same way - see its own doc comment for
+// why this is plain module state rather than React Context. It injects a component instead of
+// depending on @rific/feedback-press, same as @rific/resizable-input's TextInputComponent.
+//
+// Not to be confused with ScrollViewProvider (per screen, scroll state) or
+// ScrollViewSettingsProvider (app-wide, persisted user settings): this one is app-wide startup
+// config, mounted once.
+const scrollViewConfig = createModuleConfig<ScrollViewConfig>()
+
+export const configureScrollView = scrollViewConfig.configure
+export const getScrollViewConfig = scrollViewConfig.getConfig
+export const ScrollViewConfigProvider = scrollViewConfig.Provider
+
+export type ScrollViewConfigProviderProps = ScrollViewConfig & { children: ReactNode }

package/src/ScrollViewHeader.tsx

@@ -5,13 +5,15 @@ import { Appbar, ProgressBar, Surface, useTheme } from 'react-native-paper'
 import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
+import { getScrollViewConfig } from './ScrollViewConfig'
 import { ScrollViewContext } from './ScrollViewContext'
 import { ScrollViewSettingsContext } from './ScrollViewSettingsContext'
 
 export type ScrollViewHeaderProps = {
   actionSize?: number
   actionStyle?: ViewStyle
-  // A plain callback renders the default Appbar.BackAction (themed onSurface, sized/positioned by
+  // A plain callback renders the default back action (Paper's Appbar.BackAction unless the app set
+  // another with configureScrollView({ BackAction }), themed onSurface, sized/positioned by
   // actionSize/iconSize below) - the common case, unchanged from before. Passing a ReactNode
   // instead skips that default entirely and renders the given element in its place, same escape
   // hatch trailingAction already gave the other corner: a caller that wants its own color, icon,
@@ -131,6 +133,10 @@ export const ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, bac
   }, [headerFixed, headerHeightShared, top, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared])
   const actionTop = top + actionMargin
   const buttonStyle = { borderRadius: actionSize, height: actionSize, margin: 0, width: actionSize }
+  // A plain callback renders the configured BackAction (configureScrollView / ScrollViewConfigProvider),
+  // Paper's Appbar.BackAction by default. Read at render, like every createModuleConfig consumer.
+  const BackAction = getScrollViewConfig().BackAction ?? Appbar.BackAction
+  const backActionElement = typeof backAction === 'function' ? <BackAction accessibilityLabel={backActionAccessibilityLabel} onPress={backAction} size={iconSize ?? actionSize / 2} style={buttonStyle} /> : backAction
   const actionShadow = { borderRadius: actionSize / 2, elevation: 2, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.15, shadowRadius: 2 }
   const leadingStyle = { alignItems: 'center' as const, height: actionSize, justifyContent: 'center' as const, left: actionMargin, position: 'absolute' as const, top: actionTop, width: actionSize, zIndex: 3, ...actionShadow }
   const trailingStyle = { alignItems: 'center' as const, height: actionSize, justifyContent: 'center' as const, position: 'absolute' as const, right: actionMargin, top: actionTop, width: actionSize, zIndex: 3, ...actionShadow }
@@ -175,12 +181,12 @@ export const ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, bac
         (effectiveBackActionFixed ? (
           <Animated.View style={leadingStyle}>
             <ActionBg blur={blur} style={actionStyle} />
-            {typeof backAction === 'function' ? <Appbar.BackAction accessibilityLabel={backActionAccessibilityLabel} onPress={backAction} size={iconSize ?? actionSize / 2} style={buttonStyle} /> : backAction}
+            {backActionElement}
           </Animated.View>
         ) : (
           <Animated.View style={[leadingStyle, translateStyle]}>
             <ActionBg blur={blur} style={actionStyle} />
-            {typeof backAction === 'function' ? <Appbar.BackAction accessibilityLabel={backActionAccessibilityLabel} onPress={backAction} size={iconSize ?? actionSize / 2} style={buttonStyle} /> : backAction}
+            {backActionElement}
           </Animated.View>
         ))}
       {trailingAction &&

package/src/index.ts

@@ -10,6 +10,8 @@ export type { ScrollViewProps } from './ScrollView'
 export { ScrollView } from './ScrollView'
 export type { ScrollViewChromeProviderProps } from './ScrollViewChromeProvider'
 export { ScrollViewChromeProvider } from './ScrollViewChromeProvider'
+export type { ScrollViewBackActionProps, ScrollViewConfig, ScrollViewConfigProviderProps } from './ScrollViewConfig'
+export { configureScrollView, getScrollViewConfig, ScrollViewConfigProvider } from './ScrollViewConfig'
 export type { ScrollViewContextType } from './ScrollViewContext'
 export { ScrollViewContext } from './ScrollViewContext'
 export type { ScrollViewFooterProps } from './ScrollViewFooter'

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)
       }
     },
     []