react-native-bottom-sheet-stack 1.7.6 → 1.9.0

package/src/adapters/gorhom-sheet/GorhomSheetAdapter.tsx

@@ -0,0 +1,121 @@
+import BottomSheetOriginal, {
+  useBottomSheetSpringConfigs,
+  type BottomSheetProps,
+} from '@gorhom/bottom-sheet';
+import React, { useImperativeHandle, useRef } from 'react';
+import { useAnimatedReaction } from 'react-native-reanimated';
+
+import type { SheetAdapterRef } from '../../adapter.types';
+import { createSheetEventHandlers } from '../../bottomSheetCoordinator';
+import { useBottomSheetDefaultIndex } from '../../BottomSheetDefaultIndex.context';
+import { useAdapterRef } from '../../useAdapterRef';
+import { useAnimatedIndex } from '../../useAnimatedIndex';
+import { useBackHandler } from '../../useBackHandler';
+import { useBottomSheetContext } from '../../useBottomSheetContext';
+import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+
+export interface GorhomSheetAdapterProps extends BottomSheetProps {}
+
+const nullBackdrop = () => null;
+
+export const GorhomSheetAdapter = React.forwardRef<
+  SheetAdapterRef,
+  GorhomSheetAdapterProps
+>(
+  (
+    {
+      children,
+      onAnimate,
+      onChange,
+      onClose,
+      enablePanDownToClose = true,
+      backdropComponent = nullBackdrop,
+      animatedIndex: externalAnimatedIndex,
+      ...props
+    },
+    forwardedRef
+  ) => {
+    const { id } = useBottomSheetContext();
+    const ref = useAdapterRef(forwardedRef);
+    const contextAnimatedIndex = useAnimatedIndex();
+    const defaultIndex = useBottomSheetDefaultIndex();
+
+    const gorhomRef = useRef<BottomSheetMethods | null>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        expand: () => gorhomRef.current?.expand(),
+        close: () => gorhomRef.current?.close(),
+      }),
+      []
+    );
+
+    useAnimatedReaction(
+      () => contextAnimatedIndex.value,
+      (value) => {
+        externalAnimatedIndex?.set(value);
+      }
+    );
+
+    const { handleDismiss, handleOpened, handleClosed } =
+      createSheetEventHandlers(id);
+
+    useBackHandler(id, handleDismiss);
+
+    const wrappedOnAnimate: BottomSheetProps['onAnimate'] = (
+      fromIndex,
+      toIndex,
+      fromPosition,
+      toPosition
+    ) => {
+      // toIndex === -1 means gorhom is animating toward closed state
+      if (toIndex === -1) {
+        handleDismiss();
+      }
+      onAnimate?.(fromIndex, toIndex, fromPosition, toPosition);
+    };
+
+    const wrappedOnChange: BottomSheetProps['onChange'] = (
+      index,
+      position,
+      type
+    ) => {
+      // index >= 0 means sheet reached a valid snap point (opened)
+      if (index >= 0) {
+        handleOpened();
+      }
+      onChange?.(index, position, type);
+    };
+
+    const wrappedOnClose = () => {
+      onClose?.();
+      handleClosed();
+    };
+
+    const config = useBottomSheetSpringConfigs({
+      stiffness: 400,
+      damping: 80,
+      mass: 0.7,
+    });
+
+    return (
+      <BottomSheetOriginal
+        animationConfigs={config}
+        ref={gorhomRef}
+        {...props}
+        index={defaultIndex}
+        animatedIndex={contextAnimatedIndex}
+        onChange={wrappedOnChange}
+        onClose={wrappedOnClose}
+        onAnimate={wrappedOnAnimate}
+        backdropComponent={backdropComponent}
+        enablePanDownToClose={enablePanDownToClose}
+      >
+        {children}
+      </BottomSheetOriginal>
+    );
+  }
+);
+
+GorhomSheetAdapter.displayName = 'GorhomSheetAdapter';

package/src/adapters/gorhom-sheet/index.ts

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

package/src/adapters/index.ts

@@ -0,0 +1,17 @@
+export {
+  GorhomSheetAdapter,
+  type GorhomSheetAdapterProps,
+} from './gorhom-sheet';
+export {
+  CustomModalAdapter,
+  ModalAdapter,
+  type ModalAdapterProps,
+} from './custom-modal';
+export {
+  ReactNativeModalAdapter,
+  type ReactNativeModalAdapterProps,
+} from './react-native-modal';
+export {
+  ActionsSheetAdapter,
+  type ActionsSheetAdapterProps,
+} from './actions-sheet';

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,40 @@ 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 { useBackHandler } from './useBackHandler';
+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/useBackHandler.ts

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { BackHandler } from 'react-native';
+
+import { useBottomSheetStore } from './bottomSheet.store';
+
+/**
+ * Manages Android hardware back button for a sheet.
+ *
+ * The listener is only active when the sheet is fully open
+ * AND is the topmost sheet in the stack.
+ */
+export function useBackHandler(id: string, onBackPress: () => void): void {
+  const isTopAndOpen = useBottomSheetStore((state) => {
+    const { stackOrder, sheetsById } = state;
+    const sheet = sheetsById[id];
+    return sheet?.status === 'open' && stackOrder[stackOrder.length - 1] === id;
+  });
+
+  useEffect(() => {
+    if (!isTopAndOpen) {
+      return;
+    }
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        onBackPress();
+        return true;
+      }
+    );
+    return () => subscription.remove();
+  }, [isTopAndOpen, onBackPress]);
+}

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);