@rific/scroll-view 0.9.2 → 1.0.0

package/README.md

@@ -63,6 +63,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 +129,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,
@@ -1131,6 +1134,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_core3 = require("@rific/core");
+var scrollViewConfig = (0, import_core3.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 +1263,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 +1284,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 }),
@@ -1743,6 +1755,7 @@ var useScrollViewSettings = scrollViewUseSettings;
   PullSearch,
   ScrollView,
   ScrollViewChromeProvider,
+  ScrollViewConfigProvider,
   ScrollViewContext,
   ScrollViewFooter,
   ScrollViewHeader,
@@ -1750,7 +1763,9 @@ var useScrollViewSettings = scrollViewUseSettings;
   ScrollViewSettingsContext,
   ScrollViewSettingsProvider,
   SectionList,
+  configureScrollView,
   defaultScrollViewSettings,
+  getScrollViewConfig,
   scrollViewActions,
   scrollViewReducer,
   useKeyboardInset,

package/dist/index.mjs

@@ -1075,6 +1075,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 +1204,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 +1225,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 }),
@@ -1686,6 +1695,7 @@ export {
   PullSearch,
   ScrollView,
   ScrollViewChromeProvider,
+  ScrollViewConfigProvider,
   ScrollViewContext,
   ScrollViewFooter,
   ScrollViewHeader,
@@ -1693,7 +1703,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.0.0",
   "description": "Blur styled scroll system for React Native. Floating headers/footers, keyboard awareness, and scroll-away chrome",
   "keywords": [
     "react-native",

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'