@swmansion/react-native-bottom-sheet 0.14.0-next.2 → 0.14.0-next.3

package/README.md

@@ -341,8 +341,9 @@ const position = useSharedValue(0);
 ```
 
 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 `useEvent`:
+thread. Pass `Animated.createAnimatedComponent` to `wrapNativeView`—the library
+applies it to the native sheet view—and give `onPositionChange` a worklet
+handler from `useEvent`:
 
 ```tsx
 import type { NativeSyntheticEvent } from 'react-native';
@@ -351,8 +352,6 @@ import {
   BottomSheet,
   type PositionChangeEventData,
 } from '@swmansion/react-native-bottom-sheet';
-
-const AnimatedBottomSheet = Animated.createAnimatedComponent(BottomSheet);
 ```
 
 ```tsx
@@ -370,16 +369,22 @@ const onPositionChange = useEvent<
 ```
 
 ```tsx
-<AnimatedBottomSheet
+<BottomSheet // Or `ModalBottomSheet`.
   index={index}
   onIndexChange={setIndex}
   surface={/* ... */}
+  wrapNativeView={Animated.createAnimatedComponent}
   onPositionChange={onPositionChange}
 >
   {/* ... */}
-</AnimatedBottomSheet>
+</BottomSheet>
 ```
 
+`wrapNativeView` keeps the animated wrapper on the native sheet view itself, so
+the worklet binds on first render—for both inline and modal sheets—without the
+library depending on Reanimated. Pass a stable function (such as
+`Animated.createAnimatedComponent`), not an inline lambda.
+
 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.

package/lib/module/BottomSheet.js

@@ -1,19 +1,14 @@
 "use strict";
 
+import { useState } from 'react';
 import { StyleSheet, View, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import BottomSheetNativeComponent from './BottomSheetNativeComponent';
+import BottomSheetNativeView from './BottomSheetNativeComponent';
 import BottomSheetSurfaceNativeComponent from './BottomSheetSurfaceNativeComponent';
 import { Portal } from "./BottomSheetProvider.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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`.
@@ -34,11 +29,11 @@ export const BottomSheet = ({
   onIndexChange,
   onSettle,
   onPositionChange,
+  wrapNativeView,
   modal = false,
   disableScrollableNegotiation = false,
   scrimColor,
-  scrimOpacities,
-  ref
+  scrimOpacities
 }) => {
   const {
     height: windowHeight
@@ -74,14 +69,22 @@ export const BottomSheet = ({
   const handleSettle = event => {
     onSettle?.(event.nativeEvent.index);
   };
+
+  // The native sheet view, optionally wrapped (e.g. with
+  // `Animated.createAnimatedComponent`) so a Reanimated worklet can handle
+  // `onPositionChange` on the UI thread. Wrapping the leaf native view (rather
+  // than this whole component) keeps the animated boundary on the host that
+  // emits events—so it resolves at mount, inline or inside the modal portal
+  // alike. Computed once: a fresh wrapped component each render would remount
+  // the native sheet.
+  const [NativeView] = useState(() => wrapNativeView?.(BottomSheetNativeView) ?? BottomSheetNativeView);
   const sheet = /*#__PURE__*/_jsx(View, {
     style: StyleSheet.absoluteFill,
     pointerEvents: modal ? isCollapsed ? 'none' : 'auto' : 'box-none',
     children: /*#__PURE__*/_jsx(View, {
       pointerEvents: "box-none",
       style: StyleSheet.absoluteFill,
-      children: /*#__PURE__*/_jsxs(BottomSheetNativeComponent, {
-        ref: ref,
+      children: /*#__PURE__*/_jsxs(NativeView, {
         pointerEvents: "box-none",
         style: [{
           position: 'absolute',
@@ -124,18 +127,8 @@ export const BottomSheet = ({
     })
   });
   if (modal) {
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(View, {
-        collapsable: false,
-        pointerEvents: "none",
-        style: {
-          position: 'absolute',
-          width: 0,
-          height: 0
-        }
-      }), /*#__PURE__*/_jsx(Portal, {
-        children: sheet
-      })]
+    return /*#__PURE__*/_jsx(Portal, {
+      children: sheet
     });
   }
   return sheet;

package/lib/module/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","View","useWindowDimensions","useSafeAreaInsets","BottomSheetNativeComponent","BottomSheetSurfaceNativeComponent","Portal","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","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","width"],"sourceRoot":"../../src","sources":["BottomSheet.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useState","StyleSheet","View","useWindowDimensions","useSafeAreaInsets","BottomSheetNativeView","BottomSheetSurfaceNativeComponent","Portal","jsx","_jsx","jsxs","_jsxs","programmatic","BottomSheet","children","surface","style","detents","index","animateIn","onIndexChange","onSettle","onPositionChange","wrapNativeView","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","NativeView","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,12 +5,8 @@ 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 = ({
-  ref,
-  ...props
-}) => /*#__PURE__*/_jsx(BottomSheet, {
+export const ModalBottomSheet = 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","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":[]}
+{"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":[]}

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;AAM3C,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;AAE3C,SAASC,gBAAgB,QAAQ,uBAAoB;AAErD,SAASC,mBAAmB,QAAQ,0BAAuB;AAE3D,SAASC,YAAY,QAAQ,uBAAoB","ignoreList":[]}

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

@@ -1,15 +1,9 @@
-import { type ComponentRef, type ReactNode, type Ref } from 'react';
+import { type ComponentType, type ReactNode } from 'react';
 import type { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
-import BottomSheetNativeComponent from './BottomSheetNativeComponent';
+import { type NativeProps } 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`.
@@ -55,11 +49,23 @@ export interface BottomSheetProps {
     onSettle?: (index: 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.
+     * `event.nativeEvent.position` (points from the bottom). To handle it on the
+     * UI thread, see `wrapNativeView`.
      */
     onPositionChange?: (event: NativeSyntheticEvent<PositionChangeEventData>) => void;
+    /**
+     * Wraps the native sheet view—the one that emits `onPositionChange`—before it
+     * is rendered. Pass `Animated.createAnimatedComponent` to handle
+     * `onPositionChange` on the UI thread with a Reanimated worklet (e.g., from
+     * `useEvent`): Because the animated wrapper sits directly on the native view,
+     * the worklet binds to the sheet at mount, for both inline and modal sheets,
+     * without the library depending on Reanimated.
+     *
+     * Called once; pass a stable function (a module-level reference such as
+     * `Animated.createAnimatedComponent`, not an inline lambda recreated each
+     * render).
+     */
+    wrapNativeView?: (component: ComponentType<NativeProps>) => ComponentType<NativeProps>;
     /** Internal flag used by `ModalBottomSheet`. */
     modal?: boolean;
     /**
@@ -86,7 +92,5 @@ 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, ref, }: BottomSheetProps & {
-    ref?: Ref<BottomSheetInstance>;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const BottomSheet: ({ children, surface, style, detents, index, animateIn, onIndexChange, onSettle, onPositionChange, wrapNativeView, modal, disableScrollableNegotiation, scrimColor, scrimOpacities, }: BottomSheetProps) => 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,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,4CAqHvD,CAAC"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI/E,OAA8B,EAC5B,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAGtC,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;;;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;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CACjB,KAAK,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,KACjD,IAAI,CAAC;IACV;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,CACf,SAAS,EAAE,aAAa,CAAC,WAAW,CAAC,KAClC,aAAa,CAAC,WAAW,CAAC,CAAC;IAChC,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,sLAezB,gBAAgB,4CAgHlB,CAAC"}

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

@@ -1,10 +1,7 @@
-import { type Ref } from 'react';
-import { type BottomSheetInstance, type BottomSheetProps } from './BottomSheet';
+import { 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: ({ ref, ...props }: ModalBottomSheetProps & {
-    ref?: Ref<BottomSheetInstance>;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalBottomSheet: (props: ModalBottomSheetProps) => 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,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"}
+{"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"}

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

@@ -1,5 +1,5 @@
 export { BottomSheet } from './BottomSheet';
-export type { BottomSheetInstance, BottomSheetProps, PositionChangeEventData, } from './BottomSheet';
+export type { 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,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"}
+{"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,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC/E,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.14.0-next.2",
+  "version": "0.14.0-next.3",
   "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,24 +1,17 @@
-import { type ComponentRef, type ReactNode, type Ref } from 'react';
+import { useState, type ComponentType, type ReactNode } 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';
 
-import BottomSheetNativeComponent from './BottomSheetNativeComponent';
+import BottomSheetNativeView, {
+  type NativeProps,
+} from './BottomSheetNativeComponent';
 import BottomSheetSurfaceNativeComponent from './BottomSheetSurfaceNativeComponent';
 import { Portal } from './BottomSheetProvider';
 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`.
@@ -65,13 +58,27 @@ export interface BottomSheetProps {
   onSettle?: (index: 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.
+   * `event.nativeEvent.position` (points from the bottom). To handle it on the
+   * UI thread, see `wrapNativeView`.
    */
   onPositionChange?: (
     event: NativeSyntheticEvent<PositionChangeEventData>
   ) => void;
+  /**
+   * Wraps the native sheet view—the one that emits `onPositionChange`—before it
+   * is rendered. Pass `Animated.createAnimatedComponent` to handle
+   * `onPositionChange` on the UI thread with a Reanimated worklet (e.g., from
+   * `useEvent`): Because the animated wrapper sits directly on the native view,
+   * the worklet binds to the sheet at mount, for both inline and modal sheets,
+   * without the library depending on Reanimated.
+   *
+   * Called once; pass a stable function (a module-level reference such as
+   * `Animated.createAnimatedComponent`, not an inline lambda recreated each
+   * render).
+   */
+  wrapNativeView?: (
+    component: ComponentType<NativeProps>
+  ) => ComponentType<NativeProps>;
   /** Internal flag used by `ModalBottomSheet`. */
   modal?: boolean;
   /**
@@ -109,12 +116,12 @@ export const BottomSheet = ({
   onIndexChange,
   onSettle,
   onPositionChange,
+  wrapNativeView,
   modal = false,
   disableScrollableNegotiation = false,
   scrimColor,
   scrimOpacities,
-  ref,
-}: BottomSheetProps & { ref?: Ref<BottomSheetInstance> }) => {
+}: BottomSheetProps) => {
   const { height: windowHeight } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const maxHeight = windowHeight - insets.top;
@@ -155,14 +162,28 @@ export const BottomSheet = ({
     onSettle?.(event.nativeEvent.index);
   };
 
+  // The native sheet view, optionally wrapped (e.g. with
+  // `Animated.createAnimatedComponent`) so a Reanimated worklet can handle
+  // `onPositionChange` on the UI thread. Wrapping the leaf native view (rather
+  // than this whole component) keeps the animated boundary on the host that
+  // emits events—so it resolves at mount, inline or inside the modal portal
+  // alike. Computed once: a fresh wrapped component each render would remount
+  // the native sheet.
+  const [NativeView] = useState(
+    () =>
+      (wrapNativeView?.(BottomSheetNativeView) ??
+        BottomSheetNativeView) as ComponentType<
+        NativeProps & { children?: ReactNode }
+      >
+  );
+
   const sheet = (
     <View
       style={StyleSheet.absoluteFill}
       pointerEvents={modal ? (isCollapsed ? 'none' : 'auto') : 'box-none'}
     >
       <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
-        <BottomSheetNativeComponent
-          ref={ref}
+        <NativeView
           pointerEvents="box-none"
           style={[
             {
@@ -202,32 +223,13 @@ export const BottomSheet = ({
             {children}
             <View collapsable={false} pointerEvents="none" />
           </View>
-        </BottomSheetNativeComponent>
+        </NativeView>
       </View>
     </View>
   );
 
   if (modal) {
-    return (
-      <>
-        {/*
-          A zero-size host view kept in place so anything that resolves a host
-          instance from this component finds one synchronously. The sheet itself
-          is teleported into the provider's portal and mounts a commit later, so
-          at mount this component otherwise renders nothing here. Reanimated's
-          `createAnimatedComponent` calls `findHostInstance` on mount and would
-          throw "Cannot find host instance for this component"; the anchor lets
-          `createAnimatedComponent(ModalBottomSheet)` mount, after which the
-          forwarded `ref` resolves to the real sheet view.
-        */}
-        <View
-          collapsable={false}
-          pointerEvents="none"
-          style={{ position: 'absolute', width: 0, height: 0 }}
-        />
-        <Portal>{sheet}</Portal>
-      </>
-    );
+    return <Portal>{sheet}</Portal>;
   }
 
   return sheet;

package/src/ModalBottomSheet.tsx

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

package/src/index.tsx

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