@swmansion/react-native-bottom-sheet 0.13.0 → 0.14.0-next.1

package/README.md

@@ -301,24 +301,27 @@ drag snapping but can still be targeted via `index` updates.
 
 ### Position tracking
 
-Use `onPositionChange` to observe the sheet’s current position (the distance in
-pixels from the bottom of the screen to the top of the sheet).
+Use `onPositionChange` to observe the sheet’s current position. It is a standard
+native event; read the distance in pixels from the bottom of the screen to the
+top of the sheet from `event.nativeEvent.position`.
 
 ```tsx
 <BottomSheet // Or `ModalBottomSheet`.
   index={index}
   onIndexChange={setIndex}
   surface={/* ... */}
-  onPositionChange={(position) => {
-    console.log(position);
+  onPositionChange={(event) => {
+    console.log(event.nativeEvent.position);
   }}
 >
   {/* ... */}
 </BottomSheet>
 ```
 
-If you want to keep the latest position in a Reanimated shared value, update it
-from the&nbsp;callback:
+#### With Reanimated
+
+To keep the latest position in a Reanimated shared value, update it from
+the&nbsp;callback:
 
 ```tsx
 const position = useSharedValue(0);
@@ -329,14 +332,58 @@ const position = useSharedValue(0);
   index={index}
   onIndexChange={setIndex}
   surface={/* ... */}
-  onPositionChange={(nextPosition) => {
-    position.value = nextPosition;
+  onPositionChange={(event) => {
+    position.value = event.nativeEvent.position;
   }}
 >
   {/* ... */}
 </BottomSheet>
 ```
 
+Because `onPositionChange` is a native event, you can also handle it on the UI
+thread by wrapping the component with Reanimated’s `createAnimatedComponent` and
+passing a worklet handler from&nbsp;`useEvent`:
+
+```tsx
+import type { NativeSyntheticEvent } from 'react-native';
+import Animated, { useEvent, useSharedValue } from 'react-native-reanimated';
+import {
+  BottomSheet,
+  type PositionChangeEventData,
+} from '@swmansion/react-native-bottom-sheet';
+
+const AnimatedBottomSheet = Animated.createAnimatedComponent(BottomSheet);
+```
+
+```tsx
+const position = useSharedValue(0);
+
+const onPositionChange = useEvent<
+  NativeSyntheticEvent<PositionChangeEventData>
+>(
+  (event) => {
+    'worklet';
+    position.value = event.position;
+  },
+  ['onPositionChange']
+);
+```
+
+```tsx
+<AnimatedBottomSheet
+  index={index}
+  onIndexChange={setIndex}
+  surface={/* ... */}
+  onPositionChange={onPositionChange}
+>
+  {/* ... */}
+</AnimatedBottomSheet>
+```
+
+Inside the worklet, Reanimated unwraps the native event, so you read
+`event.position` directly rather than `event.nativeEvent.position`. The handler
+runs on the UI thread on every frame the sheet&nbsp;moves.
+
 ## By [Software Mansion](https://swmansion.com)
 
 Founded in 2012, [Software Mansion](https://swmansion.com) is a software agency

package/lib/module/BottomSheet.js

@@ -8,6 +8,17 @@ import { Portal } from "./BottomSheetProvider.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export { programmatic } from "./bottomSheetUtils.js";
 
+/**
+ * Imperative handle for a `BottomSheet`. It resolves to the underlying native
+ * sheet view—the one that emits `onPositionChange`—so it plugs straight into
+ * Reanimated’s `createAnimatedComponent`.
+ */
+
+/**
+ * Payload of the {@link BottomSheetProps.onPositionChange} event, accessed as
+ * `event.nativeEvent`.
+ */
+
 /**
  * Props for the inline bottom-sheet component.
  */
@@ -26,7 +37,8 @@ export const BottomSheet = ({
   modal = false,
   disableScrollableNegotiation = false,
   scrimColor,
-  scrimOpacities
+  scrimOpacities,
+  ref
 }) => {
   const {
     height: windowHeight
@@ -62,10 +74,6 @@ export const BottomSheet = ({
   const handleSettle = event => {
     onSettle?.(event.nativeEvent.index);
   };
-  const handlePositionChange = event => {
-    const height = event.nativeEvent.position;
-    onPositionChange?.(height);
-  };
   const sheet = /*#__PURE__*/_jsx(View, {
     style: StyleSheet.absoluteFill,
     pointerEvents: modal ? isCollapsed ? 'none' : 'auto' : 'box-none',
@@ -73,6 +81,7 @@ export const BottomSheet = ({
       pointerEvents: "box-none",
       style: StyleSheet.absoluteFill,
       children: /*#__PURE__*/_jsxs(BottomSheetNativeComponent, {
+        ref: ref,
         pointerEvents: "box-none",
         style: [{
           position: 'absolute',
@@ -94,7 +103,7 @@ export const BottomSheet = ({
         scrimOpacities: resolvedScrimOpacity,
         onIndexChange: handleIndexChange,
         onSettle: handleSettle,
-        onPositionChange: handlePositionChange,
+        onPositionChange: onPositionChange,
         children: [surface != null && /*#__PURE__*/_jsx(BottomSheetSurfaceNativeComponent, {
           collapsable: false,
           pointerEvents: "box-none",

package/lib/module/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","View","useWindowDimensions","useSafeAreaInsets","BottomSheetNativeComponent","BottomSheetSurfaceNativeComponent","Portal","jsx","_jsx","jsxs","_jsxs","programmatic","BottomSheet","children","surface","style","detents","index","animateIn","onIndexChange","onSettle","onPositionChange","modal","disableScrollableNegotiation","scrimColor","scrimOpacities","height","windowHeight","insets","maxHeight","top","nativeDetents","map","detent","isDetentProgrammatic","value","resolveDetentValue","kind","Math","max","min","clampedIndex","length","selectedDetentValue","isCollapsed","resolvedScrimOpacity","handleIndexChange","event","nativeEvent","handleSettle","handlePositionChange","position","sheet","absoluteFill","pointerEvents","left","right","bottom","maxDetentHeight","collapsable","flex"],"sourceRoot":"../../src","sources":["BottomSheet.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["StyleSheet","View","useWindowDimensions","useSafeAreaInsets","BottomSheetNativeComponent","BottomSheetSurfaceNativeComponent","Portal","jsx","_jsx","jsxs","_jsxs","programmatic","BottomSheet","children","surface","style","detents","index","animateIn","onIndexChange","onSettle","onPositionChange","modal","disableScrollableNegotiation","scrimColor","scrimOpacities","ref","height","windowHeight","insets","maxHeight","top","nativeDetents","map","detent","isDetentProgrammatic","value","resolveDetentValue","kind","Math","max","min","clampedIndex","length","selectedDetentValue","isCollapsed","resolvedScrimOpacity","handleIndexChange","event","nativeEvent","handleSettle","sheet","absoluteFill","pointerEvents","position","left","right","bottom","maxDetentHeight","collapsable","flex"],"sourceRoot":"../../src","sources":["BottomSheet.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/ModalBottomSheet.js

@@ -5,8 +5,12 @@ import { BottomSheet } from "./BottomSheet.js";
 /** Props for the modal bottom-sheet variant rendered through the provider portal. */
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Bottom sheet presented above the current UI with a scrim. */
-export const ModalBottomSheet = props => /*#__PURE__*/_jsx(BottomSheet, {
+export const ModalBottomSheet = ({
+  ref,
+  ...props
+}) => /*#__PURE__*/_jsx(BottomSheet, {
   ...props,
+  ref: ref,
   modal: true
 });
 //# sourceMappingURL=ModalBottomSheet.js.map

package/lib/module/ModalBottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["BottomSheet","jsx","_jsx","ModalBottomSheet","props","modal"],"sourceRoot":"../../src","sources":["ModalBottomSheet.tsx"],"mappings":";;AAAA,SAASA,WAAW,QAA+B,kBAAe;;AAElE;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMA;AACA,OAAO,MAAMC,gBAAgB,GAAIC,KAA4B,iBAC3DF,IAAA,CAACF,WAAW;EAAA,GAAKI,KAAK;EAAEC,KAAK;AAAA,CAAE,CAChC","ignoreList":[]}
+{"version":3,"names":["BottomSheet","jsx","_jsx","ModalBottomSheet","ref","props","modal"],"sourceRoot":"../../src","sources":["ModalBottomSheet.tsx"],"mappings":";;AAEA,SACEA,WAAW,QAGN,kBAAe;;AAEtB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMA;AACA,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAC/BC,GAAG;EACH,GAAGC;AACuD,CAAC,kBAC3DH,IAAA,CAACF,WAAW;EAAA,GAAKK,KAAK;EAAED,GAAG,EAAEA,GAAI;EAACE,KAAK;AAAA,CAAE,CAC1C","ignoreList":[]}

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["BottomSheet","ModalBottomSheet","BottomSheetProvider","programmatic"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,WAAW,QAAQ,kBAAe;AAE3C,SAASC,gBAAgB,QAAQ,uBAAoB;AAErD,SAASC,mBAAmB,QAAQ,0BAAuB;AAE3D,SAASC,YAAY,QAAQ,uBAAoB","ignoreList":[]}
+{"version":3,"names":["BottomSheet","ModalBottomSheet","BottomSheetProvider","programmatic"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,WAAW,QAAQ,kBAAe;AAM3C,SAASC,gBAAgB,QAAQ,uBAAoB;AAErD,SAASC,mBAAmB,QAAQ,0BAAuB;AAE3D,SAASC,YAAY,QAAQ,uBAAoB","ignoreList":[]}

package/lib/typescript/src/BottomSheet.d.ts

@@ -1,8 +1,23 @@
-import { type ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import { type ComponentRef, type ReactNode, type Ref } from 'react';
+import type { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
+import BottomSheetNativeComponent from './BottomSheetNativeComponent';
 import { type Detent } from './bottomSheetUtils';
 export type { Detent, DetentValue } from './bottomSheetUtils';
 export { programmatic } from './bottomSheetUtils';
+/**
+ * Imperative handle for a `BottomSheet`. It resolves to the underlying native
+ * sheet view—the one that emits `onPositionChange`—so it plugs straight into
+ * Reanimated’s `createAnimatedComponent`.
+ */
+export type BottomSheetInstance = ComponentRef<typeof BottomSheetNativeComponent>;
+/**
+ * Payload of the {@link BottomSheetProps.onPositionChange} event, accessed as
+ * `event.nativeEvent`.
+ */
+export type PositionChangeEventData = Readonly<{
+    /** Sheet position, in points from the bottom. */
+    position: number;
+}>;
 /**
  * Props for the inline bottom-sheet component.
  */
@@ -38,8 +53,13 @@ export interface BottomSheetProps {
     onIndexChange?: (index: number) => void;
     /** Called when a snap animation settles, including programmatic changes. */
     onSettle?: (index: number) => void;
-    /** Called as the sheet position changes, in points from the bottom. */
-    onPositionChange?: (position: number) => void;
+    /**
+     * Called as the sheet position changes. A standard native direct event; read
+     * `event.nativeEvent.position` (points from the bottom). Because it is a real
+     * native event, it also works on the UI thread when the component is wrapped
+     * with Reanimated’s `createAnimatedComponent` and given a worklet handler.
+     */
+    onPositionChange?: (event: NativeSyntheticEvent<PositionChangeEventData>) => void;
     /** Internal flag used by `ModalBottomSheet`. */
     modal?: boolean;
     /**
@@ -66,5 +86,7 @@ export interface BottomSheetProps {
     scrimOpacities?: number[];
 }
 /** Native bottom sheet that renders inline within the current screen layout. */
-export declare const BottomSheet: ({ children, surface, style, detents, index, animateIn, onIndexChange, onSettle, onPositionChange, modal, disableScrollableNegotiation, scrimColor, scrimOpacities, }: BottomSheetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BottomSheet: ({ children, surface, style, detents, index, animateIn, onIndexChange, onSettle, onPositionChange, modal, disableScrollableNegotiation, scrimColor, scrimOpacities, ref, }: BottomSheetProps & {
+    ref?: Ref<BottomSheetInstance>;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BottomSheet.d.ts.map

package/lib/typescript/src/BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzD,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;;;;OAYG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,gFAAgF;AAChF,eAAO,MAAM,WAAW,GAAI,sKAczB,gBAAgB,4CAwGlB,CAAC"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI/E,OAAO,0BAA0B,MAAM,8BAA8B,CAAC;AAGtE,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAC5C,OAAO,0BAA0B,CAClC,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,iDAAiD;IACjD,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,CACjB,KAAK,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,KACjD,IAAI,CAAC;IACV,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;;;;OAYG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,gFAAgF;AAChF,eAAO,MAAM,WAAW,GAAI,2KAezB,gBAAgB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAA;CAAE,4CAkGvD,CAAC"}

package/lib/typescript/src/ModalBottomSheet.d.ts

@@ -1,7 +1,10 @@
-import { type BottomSheetProps } from './BottomSheet';
+import { type Ref } from 'react';
+import { type BottomSheetInstance, type BottomSheetProps } from './BottomSheet';
 /** Props for the modal bottom-sheet variant rendered through the provider portal. */
 export interface ModalBottomSheetProps extends Omit<BottomSheetProps, 'modal'> {
 }
 /** Bottom sheet presented above the current UI with a scrim. */
-export declare const ModalBottomSheet: (props: ModalBottomSheetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalBottomSheet: ({ ref, ...props }: ModalBottomSheetProps & {
+    ref?: Ref<BottomSheetInstance>;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ModalBottomSheet.d.ts.map

package/lib/typescript/src/ModalBottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBottomSheet.d.ts","sourceRoot":"","sources":["../../../src/ModalBottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,qFAAqF;AACrF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,gBAAgB,EAChB,OAAO,CACR;CAAG;AAEJ,gEAAgE;AAChE,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAE5D,CAAC"}
+{"version":3,"file":"ModalBottomSheet.d.ts","sourceRoot":"","sources":["../../../src/ModalBottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACtB,MAAM,eAAe,CAAC;AAEvB,qFAAqF;AACrF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,gBAAgB,EAChB,OAAO,CACR;CAAG;AAEJ,gEAAgE;AAChE,eAAO,MAAM,gBAAgB,GAAI,mBAG9B,qBAAqB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAA;CAAE,4CAE5D,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -1,5 +1,5 @@
 export { BottomSheet } from './BottomSheet';
-export type { BottomSheetProps } from './BottomSheet';
+export type { BottomSheetInstance, BottomSheetProps, PositionChangeEventData, } from './BottomSheet';
 export { ModalBottomSheet } from './ModalBottomSheet';
 export type { ModalBottomSheetProps } from './ModalBottomSheet';
 export { BottomSheetProvider } from './BottomSheetProvider';

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,mBAAmB,EACnB,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swmansion/react-native-bottom-sheet",
-  "version": "0.13.0",
+  "version": "0.14.0-next.1",
   "description": "Provides bottom-sheet components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/BottomSheet.tsx

@@ -1,5 +1,5 @@
-import { type ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import { type ComponentRef, type ReactNode, type Ref } from 'react';
+import type { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet, View, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -10,6 +10,24 @@ import { type Detent } from './bottomSheetUtils';
 export type { Detent, DetentValue } from './bottomSheetUtils';
 export { programmatic } from './bottomSheetUtils';
 
+/**
+ * Imperative handle for a `BottomSheet`. It resolves to the underlying native
+ * sheet view—the one that emits `onPositionChange`—so it plugs straight into
+ * Reanimated’s `createAnimatedComponent`.
+ */
+export type BottomSheetInstance = ComponentRef<
+  typeof BottomSheetNativeComponent
+>;
+
+/**
+ * Payload of the {@link BottomSheetProps.onPositionChange} event, accessed as
+ * `event.nativeEvent`.
+ */
+export type PositionChangeEventData = Readonly<{
+  /** Sheet position, in points from the bottom. */
+  position: number;
+}>;
+
 /**
  * Props for the inline bottom-sheet component.
  */
@@ -45,8 +63,15 @@ export interface BottomSheetProps {
   onIndexChange?: (index: number) => void;
   /** Called when a snap animation settles, including programmatic changes. */
   onSettle?: (index: number) => void;
-  /** Called as the sheet position changes, in points from the bottom. */
-  onPositionChange?: (position: number) => void;
+  /**
+   * Called as the sheet position changes. A standard native direct event; read
+   * `event.nativeEvent.position` (points from the bottom). Because it is a real
+   * native event, it also works on the UI thread when the component is wrapped
+   * with Reanimated’s `createAnimatedComponent` and given a worklet handler.
+   */
+  onPositionChange?: (
+    event: NativeSyntheticEvent<PositionChangeEventData>
+  ) => void;
   /** Internal flag used by `ModalBottomSheet`. */
   modal?: boolean;
   /**
@@ -88,7 +113,8 @@ export const BottomSheet = ({
   disableScrollableNegotiation = false,
   scrimColor,
   scrimOpacities,
-}: BottomSheetProps) => {
+  ref,
+}: BottomSheetProps & { ref?: Ref<BottomSheetInstance> }) => {
   const { height: windowHeight } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const maxHeight = windowHeight - insets.top;
@@ -129,13 +155,6 @@ export const BottomSheet = ({
     onSettle?.(event.nativeEvent.index);
   };
 
-  const handlePositionChange = (event: {
-    nativeEvent: { position: number };
-  }) => {
-    const height = event.nativeEvent.position;
-    onPositionChange?.(height);
-  };
-
   const sheet = (
     <View
       style={StyleSheet.absoluteFill}
@@ -143,6 +162,7 @@ export const BottomSheet = ({
     >
       <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
         <BottomSheetNativeComponent
+          ref={ref}
           pointerEvents="box-none"
           style={[
             {
@@ -167,7 +187,7 @@ export const BottomSheet = ({
           scrimOpacities={resolvedScrimOpacity}
           onIndexChange={handleIndexChange}
           onSettle={handleSettle}
-          onPositionChange={handlePositionChange}
+          onPositionChange={onPositionChange}
         >
           {surface != null && (
             <BottomSheetSurfaceNativeComponent

package/src/ModalBottomSheet.tsx

@@ -1,4 +1,10 @@
-import { BottomSheet, type BottomSheetProps } from './BottomSheet';
+import { type Ref } from 'react';
+
+import {
+  BottomSheet,
+  type BottomSheetInstance,
+  type BottomSheetProps,
+} from './BottomSheet';
 
 /** Props for the modal bottom-sheet variant rendered through the provider portal. */
 export interface ModalBottomSheetProps extends Omit<
@@ -7,6 +13,9 @@ export interface ModalBottomSheetProps extends Omit<
 > {}
 
 /** Bottom sheet presented above the current UI with a scrim. */
-export const ModalBottomSheet = (props: ModalBottomSheetProps) => (
-  <BottomSheet {...props} modal />
+export const ModalBottomSheet = ({
+  ref,
+  ...props
+}: ModalBottomSheetProps & { ref?: Ref<BottomSheetInstance> }) => (
+  <BottomSheet {...props} ref={ref} modal />
 );

package/src/index.tsx

@@ -1,5 +1,9 @@
 export { BottomSheet } from './BottomSheet';
-export type { BottomSheetProps } from './BottomSheet';
+export type {
+  BottomSheetInstance,
+  BottomSheetProps,
+  PositionChangeEventData,
+} from './BottomSheet';
 export { ModalBottomSheet } from './ModalBottomSheet';
 export type { ModalBottomSheetProps } from './ModalBottomSheet';
 export { BottomSheetProvider } from './BottomSheetProvider';