react-native-bottom-sheet-stack 1.7.5 → 1.8.0

package/src/adapters/react-native-modal/ReactNativeModalAdapter.tsx

@@ -0,0 +1,81 @@
+import React, { useImperativeHandle, useState } from 'react';
+
+import type { SheetAdapterRef } from '../../adapter.types';
+import { createSheetEventHandlers } from '../../bottomSheetCoordinator';
+import { useAdapterRef } from '../../useAdapterRef';
+import { useAnimatedIndex } from '../../useAnimatedIndex';
+import { useBottomSheetContext } from '../../useBottomSheetContext';
+
+const RNModal = require('react-native-modal').default;
+
+/**
+ * Adapter for `react-native-modal`.
+ *
+ * All react-native-modal props are accepted via spread and forwarded
+ * to the underlying component. The adapter sets opinionated defaults
+ * (swipe-to-dismiss, native driver) that can be overridden.
+ *
+ * Requires `react-native-modal` as a peer dependency:
+ * ```
+ * npm install react-native-modal
+ * ```
+ *
+ * @see https://github.com/react-native-modal/react-native-modal
+ */
+export interface ReactNativeModalAdapterProps {
+  children: React.ReactNode;
+  [key: string]: unknown;
+}
+
+export const ReactNativeModalAdapter = React.forwardRef<
+  SheetAdapterRef,
+  ReactNativeModalAdapterProps
+>(({ children, ...modalProps }, forwardedRef) => {
+  const { id } = useBottomSheetContext();
+  const ref = useAdapterRef(forwardedRef);
+  const animatedIndex = useAnimatedIndex();
+  const [isVisible, setIsVisible] = useState(false);
+
+  const { handleDismiss, handleOpened, handleClosed } =
+    createSheetEventHandlers(id);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      expand: () => {
+        setIsVisible(true);
+        animatedIndex.set(0);
+      },
+      close: () => {
+        setIsVisible(false);
+        animatedIndex.set(-1);
+      },
+    }),
+    [animatedIndex]
+  );
+
+  return (
+    <RNModal
+      // Adapter defaults (overridable via spread)
+      swipeDirection="down"
+      useNativeDriver
+      hideModalContentWhileAnimating
+      {...modalProps}
+      // Managed by adapter (not overridable)
+      // coverScreen={false}: renders as View instead of native Modal,
+      // so QueueItem z-index controls stacking order for push mode.
+      // hasBackdrop={false}: manager's BottomSheetBackdrop handles the overlay.
+      isVisible={isVisible}
+      coverScreen={false}
+      hasBackdrop={false}
+      onModalShow={handleOpened}
+      onModalHide={handleClosed}
+      onBackButtonPress={handleDismiss}
+      onSwipeComplete={handleDismiss}
+    >
+      {children}
+    </RNModal>
+  );
+});
+
+ReactNativeModalAdapter.displayName = 'ReactNativeModalAdapter';

package/src/adapters/react-native-modal/index.ts

@@ -0,0 +1,4 @@
+export {
+  ReactNativeModalAdapter,
+  type ReactNativeModalAdapterProps,
+} from './ReactNativeModalAdapter';

package/src/animatedRegistry.ts

@@ -21,8 +21,17 @@ export function ensureAnimatedIndex(sheetId: string): SharedValue<number> {
 export function getAnimatedIndex(
   sheetId: string
 ): SharedValue<number> | undefined {
+  return animatedIndexRegistry.get(sheetId);
+}
+
+/**
+ * Set the animated index value for a sheet.
+ */
+export function setAnimatedIndexValue(sheetId: string, value: number): void {
   const animatedIndex = animatedIndexRegistry.get(sheetId);
-  return animatedIndex;
+  if (animatedIndex) {
+    animatedIndex.value = value;
+  }
 }
 
 export function cleanupAnimatedIndex(sheetId: string): void {

package/src/bottomSheetCoordinator.ts

@@ -1,6 +1,11 @@
+import type { SheetAdapterEvents } from './adapter.types';
 import { useBottomSheetStore } from './bottomSheet.store';
 import { getSheetRef } from './refsMap';
 
+/**
+ * Subscribes to store changes and calls adapter ref methods.
+ * Direction: Store → Adapter (via SheetAdapterRef)
+ */
 export function initBottomSheetCoordinator(groupId: string) {
   return useBottomSheetStore.subscribe(
     (s) =>
@@ -19,13 +24,17 @@ export function initBottomSheetCoordinator(groupId: string) {
 
         switch (status) {
           case 'opening':
-            getSheetRef(id)?.current?.expand();
+            requestAnimationFrame(() => {
+              const currentStatus =
+                useBottomSheetStore.getState().sheetsById[id]?.status;
+              if (currentStatus === 'opening') {
+                getSheetRef(id)?.current?.expand();
+              }
+            });
             break;
           case 'hidden':
-            if (ref) ref.close();
-            break;
           case 'closing':
-            if (ref) ref.close();
+            ref?.close();
             break;
         }
       });
@@ -34,46 +43,45 @@ export function initBottomSheetCoordinator(groupId: string) {
 }
 
 /**
- * Creates event handlers for a bottom sheet that sync gorhom events back to the store.
- * Direction: Gorhom Events → Store
+ * Creates event handlers that adapters call to sync UI state back to the store.
+ * Direction: Adapter Events → Store
+ *
+ * Adapters must call:
+ * - `handleDismiss()` when the user initiates dismissal (swipe, backdrop tap, back button)
+ * - `handleOpened()` when the show animation completes
+ * - `handleClosed()` when the hide animation completes
  */
-export function createSheetEventHandlers(sheetId: string) {
-  const { startClosing, finishClosing, markOpen } =
-    useBottomSheetStore.getState();
-
-  const handleAnimate = (_fromIndex: number, toIndex: number) => {
+export function createSheetEventHandlers(sheetId: string): SheetAdapterEvents {
+  const handleDismiss = () => {
     const state = useBottomSheetStore.getState();
     const currentStatus = state.sheetsById[sheetId]?.status;
 
-    if (
-      toIndex === -1 &&
-      (currentStatus === 'open' || currentStatus === 'opening')
-    ) {
-      startClosing(sheetId);
+    if (currentStatus === 'open' || currentStatus === 'opening') {
+      state.startClosing(sheetId);
     }
   };
 
-  const handleChange = (index: number) => {
+  const handleOpened = () => {
     const state = useBottomSheetStore.getState();
     const currentStatus = state.sheetsById[sheetId]?.status;
 
-    if (index >= 0 && currentStatus === 'opening') {
-      markOpen(sheetId);
+    if (currentStatus === 'opening') {
+      state.markOpen(sheetId);
     }
   };
 
-  const handleClose = () => {
+  const handleClosed = () => {
     const state = useBottomSheetStore.getState();
     const currentStatus = state.sheetsById[sheetId]?.status;
 
     if (currentStatus !== 'hidden') {
-      finishClosing(sheetId);
+      state.finishClosing(sheetId);
     }
   };
 
   return {
-    handleAnimate,
-    handleChange,
-    handleClose,
+    handleDismiss,
+    handleOpened,
+    handleClosed,
   };
 }

package/src/index.tsx

@@ -6,6 +6,39 @@ export { BottomSheetManaged, type BottomSheetRef } from './BottomSheetManaged';
 export { BottomSheetPortal } from './BottomSheetPortal';
 export { BottomSheetPersistent } from './BottomSheetPersistent';
 
+// Adapters
+export {
+  GorhomSheetAdapter,
+  type GorhomSheetAdapterProps,
+} from './adapters/gorhom-sheet';
+export {
+  CustomModalAdapter,
+  type ModalAdapterProps,
+} from './adapters/custom-modal';
+/** @deprecated Use `CustomModalAdapter` instead. */
+export { ModalAdapter } from './adapters/custom-modal';
+export {
+  ReactNativeModalAdapter,
+  type ReactNativeModalAdapterProps,
+} from './adapters/react-native-modal';
+export {
+  ActionsSheetAdapter,
+  type ActionsSheetAdapterProps,
+} from './adapters/actions-sheet';
+
+// Adapter types
+export type {
+  SheetAdapterRef,
+  SheetAdapterEvents,
+  SheetRef,
+} from './adapter.types';
+
+// Adapter utilities (for custom adapter authors)
+export { createSheetEventHandlers } from './bottomSheetCoordinator';
+export { useAdapterRef } from './useAdapterRef';
+export { useAnimatedIndex } from './useAnimatedIndex';
+export { getAnimatedIndex, setAnimatedIndexValue } from './animatedRegistry';
+
 // Hooks
 export { useBottomSheetManager } from './useBottomSheetManager';
 export {

package/src/refsMap.ts

@@ -1,7 +1,4 @@
-import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
-import type { RefObject } from 'react';
-
-type SheetRef = RefObject<BottomSheetMethods | null>;
+import type { SheetRef } from './adapter.types';
 
 const sheetRefsMap = new Map<string, SheetRef>();
 

package/src/useAdapterRef.ts

@@ -0,0 +1,28 @@
+import type { ForwardedRef } from 'react';
+
+import type { SheetAdapterRef, SheetRef } from './adapter.types';
+import { useBottomSheetRefContext } from './BottomSheetRef.context';
+
+/**
+ * Returns the correct ref for a custom adapter.
+ *
+ * Handles the internal ref routing between portal/persistent mode
+ * (where the ref comes from context) and inline mode (where the ref
+ * is forwarded by `useBottomSheetManager`).
+ *
+ * Usage:
+ * ```tsx
+ * const MyAdapter = React.forwardRef<SheetAdapterRef, Props>(
+ *   ({ children }, forwardedRef) => {
+ *     const ref = useAdapterRef(forwardedRef);
+ *     useImperativeHandle(ref, () => ({ expand: ..., close: ... }));
+ *   }
+ * );
+ * ```
+ */
+export function useAdapterRef(
+  forwardedRef: ForwardedRef<SheetAdapterRef>
+): SheetRef | ForwardedRef<SheetAdapterRef> {
+  const contextRef = useBottomSheetRefContext();
+  return contextRef ?? forwardedRef;
+}

package/src/useAnimatedIndex.ts

@@ -0,0 +1,31 @@
+import type { SharedValue } from 'react-native-reanimated';
+
+import { ensureAnimatedIndex } from './animatedRegistry';
+import { useBottomSheetContext } from './useBottomSheetContext';
+
+/**
+ * Returns the `animatedIndex` shared value for the current sheet.
+ *
+ * The value drives backdrop opacity and scale animations:
+ * - `-1` = hidden (backdrop transparent)
+ * - `0`  = fully visible (backdrop opaque)
+ *
+ * **Binary strategy** — set to `0` on expand and `-1` on close:
+ * ```ts
+ * const animatedIndex = useAnimatedIndex();
+ * // in expand: animatedIndex.set(0);
+ * // in close:  animatedIndex.set(-1);
+ * ```
+ *
+ * **Continuous strategy** — pass directly to a library that updates it during gestures:
+ * ```ts
+ * const animatedIndex = useAnimatedIndex();
+ * <SomeSheet animatedIndex={animatedIndex} />
+ * ```
+ *
+ * Must be called inside a sheet component (within `BottomSheetContext`).
+ */
+export function useAnimatedIndex(): SharedValue<number> {
+  const { id } = useBottomSheetContext();
+  return ensureAnimatedIndex(id);
+}

package/src/useBottomSheetControl.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import type { SheetAdapterRef } from './adapter.types';
 
 import {
   useOpen,
@@ -56,7 +56,7 @@ export function useBottomSheetControl<T extends BottomSheetPortalId>(
     // Only create ref if it doesn't exist (keepMounted sheets already have one)
     const existingRef = getSheetRef(id);
     if (!existingRef) {
-      const ref = React.createRef<BottomSheetMethods>();
+      const ref = React.createRef<SheetAdapterRef>();
       setSheetRef(id, ref);
     }
 

package/src/useBottomSheetManager.tsx

@@ -7,8 +7,8 @@ import {
   type OpenMode,
 } from './bottomSheet.store';
 import { useMaybeBottomSheetManagerContext } from './BottomSheetManager.provider';
+import type { SheetAdapterRef } from './adapter.types';
 import { setSheetRef } from './refsMap';
-import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 
 export const useBottomSheetManager = () => {
   const bottomSheetManagerContext = useMaybeBottomSheetManagerContext();
@@ -30,7 +30,7 @@ export const useBottomSheetManager = () => {
       options.groupId || bottomSheetManagerContext?.groupId || 'default';
 
     const id = options.id || Math.random().toString(36);
-    const ref = React.createRef<BottomSheetMethods>();
+    const ref = React.createRef<SheetAdapterRef>();
 
     setSheetRef(id, ref);