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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bottom-sheet-stack",
-  "version": "1.7.5",
+  "version": "1.8.0",
   "description": "Bottom Sheet Stack Manager",
   "source": "./src/index.tsx",
   "main": "lib/commonjs/index.js",
@@ -73,12 +73,29 @@
     "@gorhom/bottom-sheet": ">=5.0.0",
     "react": "*",
     "react-native": "*",
+    "react-native-actions-sheet": ">=0.9.0",
     "react-native-gesture-handler": ">=2.0.0",
+    "react-native-modal": ">=11.0.0",
     "react-native-reanimated": ">=3.0.0",
     "react-native-safe-area-context": ">=5.0.0",
     "react-native-teleport": ">=0.5.0",
+    "react-native-worklets": ">=0.7.0",
     "zustand": ">=5.0.0"
   },
+  "peerDependenciesMeta": {
+    "@gorhom/bottom-sheet": {
+      "optional": true
+    },
+    "react-native-actions-sheet": {
+      "optional": true
+    },
+    "react-native-gesture-handler": {
+      "optional": true
+    },
+    "react-native-modal": {
+      "optional": true
+    }
+  },
   "workspaces": [
     "example"
   ],
@@ -109,7 +126,21 @@
     "plugins": {
       "@release-it/conventional-changelog": {
         "preset": {
-          "name": "angular"
+          "name": "conventionalcommits",
+          "types": [
+            {
+              "type": "feat",
+              "section": "Features"
+            },
+            {
+              "type": "fix",
+              "section": "Bug Fixes"
+            },
+            {
+              "type": "perf",
+              "section": "Performance"
+            }
+          ]
         }
       }
     }

package/src/BottomSheetManaged.tsx

@@ -1,106 +1,14 @@
-import BottomSheetOriginal, {
-  useBottomSheetSpringConfigs,
-  type BottomSheetProps,
-} from '@gorhom/bottom-sheet';
-import { type BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
-import React from 'react';
-
-import { useAnimatedReaction } from 'react-native-reanimated';
-import { getAnimatedIndex } from './animatedRegistry';
-import { createSheetEventHandlers } from './bottomSheetCoordinator';
-import { useBottomSheetDefaultIndex } from './BottomSheetDefaultIndex.context';
-import { useBottomSheetRefContext } from './BottomSheetRef.context';
-import { useBottomSheetContext } from './useBottomSheetContext';
-
-export interface BottomSheetRef extends BottomSheetMethods {}
-
-interface BottomSheetManagedProps extends BottomSheetProps {}
-
-const nullBackdrop = () => null;
-
-export const BottomSheetManaged = React.forwardRef<
-  BottomSheetRef,
-  BottomSheetManagedProps
->(
-  (
-    {
-      children,
-      onAnimate,
-      onChange,
-      onClose,
-      enablePanDownToClose = true,
-      backdropComponent = nullBackdrop,
-      animatedIndex: externalAnimatedIndex,
-      ...props
-    },
-    forwardedRef
-  ) => {
-    const { id } = useBottomSheetContext();
-    const contextRef = useBottomSheetRefContext();
-    const ref = contextRef ?? forwardedRef;
-
-    const defaultIndex = useBottomSheetDefaultIndex();
-    const contextAnimatedIndex = getAnimatedIndex(id);
-
-    if (!contextAnimatedIndex) {
-      throw new Error('animatedIndex must be defined in BottomSheetManaged');
-    }
-
-    useAnimatedReaction(
-      () => contextAnimatedIndex.value,
-      (value) => {
-        externalAnimatedIndex?.set(value);
-      }
-    );
-
-    const { handleAnimate, handleChange, handleClose } =
-      createSheetEventHandlers(id);
-
-    const wrappedOnAnimate: BottomSheetProps['onAnimate'] = (
-      fromIndex,
-      toIndex,
-      fromPosition,
-      toPosition
-    ) => {
-      handleAnimate(fromIndex, toIndex);
-      onAnimate?.(fromIndex, toIndex, fromPosition, toPosition);
-    };
-
-    const wrappedOnChange: BottomSheetProps['onChange'] = (
-      index,
-      position,
-      type
-    ) => {
-      handleChange(index);
-      onChange?.(index, position, type);
-    };
-
-    const wrappedOnClose = () => {
-      onClose?.();
-      handleClose();
-    };
-
-    const config = useBottomSheetSpringConfigs({
-      stiffness: 400,
-      damping: 80,
-      mass: 0.7,
-    });
-
-    return (
-      <BottomSheetOriginal
-        animationConfigs={config}
-        ref={ref}
-        {...props}
-        index={defaultIndex}
-        animatedIndex={contextAnimatedIndex}
-        onChange={wrappedOnChange}
-        onClose={wrappedOnClose}
-        onAnimate={wrappedOnAnimate}
-        backdropComponent={backdropComponent}
-        enablePanDownToClose={enablePanDownToClose}
-      >
-        {children}
-      </BottomSheetOriginal>
-    );
-  }
-);
+/**
+ * Backward-compatible re-export of GorhomSheetAdapter.
+ *
+ * Existing users can continue importing `BottomSheetManaged` and `BottomSheetRef`
+ * without any changes. For new code, prefer importing `GorhomSheetAdapter` directly
+ * from 'react-native-bottom-sheet-stack/adapters/gorhom' or use the `ModalAdapter`
+ * for modal-based sheets.
+ */
+export {
+  GorhomSheetAdapter as BottomSheetManaged,
+  type GorhomSheetAdapterProps as BottomSheetManagedProps,
+} from './adapters/gorhom-sheet';
+
+export type { SheetAdapterRef as BottomSheetRef } from './adapter.types';

package/src/BottomSheetPersistent.tsx

@@ -1,5 +1,5 @@
-import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import React, { useEffect, useRef } from 'react';
+import type { SheetAdapterRef } from './adapter.types';
 
 import { Portal } from 'react-native-teleport';
 import { BottomSheetContext } from './BottomSheet.context';
@@ -30,7 +30,7 @@ export function BottomSheetPersistent({
   const unmount = useUnmount();
   const sheetExists = useSheetExists(id);
   const portalSession = useSheetPortalSession(id);
-  const sheetRef = useRef<BottomSheetMethods>(null);
+  const sheetRef = useRef<SheetAdapterRef>(null);
   const groupId = bottomSheetManagerContext?.groupId || 'default';
 
   const mountSheet = useEvent(() => {

package/src/BottomSheetRef.context.ts

@@ -1,7 +1,5 @@
-import { createContext, useContext, type RefObject } from 'react';
-import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
-
-type SheetRef = RefObject<BottomSheetMethods | null>;
+import { createContext, useContext } from 'react';
+import type { SheetRef } from './adapter.types';
 
 /**
  * Context for passing sheet ref from BottomSheetPersistent/BottomSheetPortal

package/src/QueueItem.tsx

@@ -43,8 +43,10 @@ export const QueueItem = memo(function QueueItem({
     };
   }, [id, keepMounted]);
 
-  const backdropZIndex = stackIndex * 2;
-  const contentZIndex = stackIndex * 2 + 1;
+  const baseZIndex = 100_000_000;
+
+  const backdropZIndex = baseZIndex + stackIndex * 2;
+  const contentZIndex = baseZIndex + stackIndex * 2 + 1;
 
   if (!animatedIndex) {
     return null;

package/src/adapter.types.ts

@@ -0,0 +1,35 @@
+import type { RefObject } from 'react';
+
+/**
+ * Minimal ref interface for controlling a sheet/modal/overlay.
+ * Every adapter must implement these two methods.
+ *
+ * The coordinator calls:
+ * - `expand()` when status transitions to 'opening'
+ * - `close()` when status transitions to 'closing' or 'hidden'
+ */
+export interface SheetAdapterRef {
+  expand(): void;
+  close(): void;
+}
+
+/**
+ * Event handlers that adapters MUST call to sync UI state back to the store.
+ * Returned by `createSheetEventHandlers(sheetId)`.
+ *
+ * Lifecycle:
+ * 1. Coordinator calls `ref.expand()` → adapter shows UI
+ * 2. Adapter calls `handleOpened()` when show animation completes
+ * 3. User dismisses (swipe/backdrop/back) → adapter calls `handleDismiss()`
+ * 4. Adapter calls `handleClosed()` when hide animation completes
+ */
+export interface SheetAdapterEvents {
+  /** User-initiated dismiss (swipe down, backdrop tap, hardware back button) */
+  handleDismiss(): void;
+  /** Show animation completed — sheet is fully visible and interactive */
+  handleOpened(): void;
+  /** Hide animation completed — sheet is fully hidden */
+  handleClosed(): void;
+}
+
+export type SheetRef = RefObject<SheetAdapterRef | null>;

package/src/adapters/actions-sheet/ActionsSheetAdapter.tsx

@@ -0,0 +1,83 @@
+import React, { useImperativeHandle, useRef } 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 ActionSheet = require('react-native-actions-sheet').default;
+
+/**
+ * Adapter for `react-native-actions-sheet` — a zero-dependency action sheet
+ * with snap points and gesture controls.
+ *
+ * All ActionSheet props are accepted via spread and forwarded to the
+ * underlying component. Uses `isModal={false}` internally — the stack
+ * manager handles the overlay lifecycle.
+ *
+ * Requires `react-native-actions-sheet` as a peer dependency:
+ * ```
+ * npm install react-native-actions-sheet
+ * ```
+ *
+ * @see https://github.com/ammarahm-ed/react-native-actions-sheet
+ */
+export interface ActionsSheetAdapterProps {
+  children: React.ReactNode;
+  [key: string]: unknown;
+}
+
+export const ActionsSheetAdapter = React.forwardRef<
+  SheetAdapterRef,
+  ActionsSheetAdapterProps
+>(({ children, ...sheetProps }, forwardedRef) => {
+  const { id } = useBottomSheetContext();
+  const ref = useAdapterRef(forwardedRef);
+  const animatedIndex = useAnimatedIndex();
+
+  const actionSheetRef = useRef<any>(null);
+
+  const { handleDismiss, handleOpened, handleClosed } =
+    createSheetEventHandlers(id);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      expand: () => actionSheetRef.current?.show(),
+      close: () => actionSheetRef.current?.hide(),
+    }),
+    []
+  );
+
+  const onOpen = () => {
+    animatedIndex.set(0);
+    handleOpened();
+  };
+
+  const onClose = () => {
+    animatedIndex.set(-1);
+    handleClosed();
+  };
+
+  return (
+    <ActionSheet
+      // Adapter defaults (overridable via spread)
+      gestureEnabled
+      closeOnTouchBackdrop
+      closeOnPressBack
+      keyboardHandlerEnabled
+      {...sheetProps}
+      // Managed by adapter (not overridable)
+      ref={actionSheetRef}
+      isModal={false}
+      onOpen={onOpen}
+      onClose={onClose}
+      onBeforeClose={handleDismiss}
+    >
+      {children}
+    </ActionSheet>
+  );
+});
+
+ActionsSheetAdapter.displayName = 'ActionsSheetAdapter';

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

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

package/src/adapters/custom-modal/CustomModalAdapter.tsx

@@ -0,0 +1,131 @@
+import React, { useEffect, useImperativeHandle, useState } from 'react';
+import {
+  BackHandler,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+
+import type { SheetAdapterRef } from '../../adapter.types';
+import { createSheetEventHandlers } from '../../bottomSheetCoordinator';
+import { useAdapterRef } from '../../useAdapterRef';
+import { useAnimatedIndex } from '../../useAnimatedIndex';
+import { useBottomSheetContext } from '../../useBottomSheetContext';
+
+const ANIMATION_DURATION = 300;
+
+const ZOOM_INITIAL_SCALE = 0.85;
+
+export interface ModalAdapterProps {
+  children: React.ReactNode;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+export const CustomModalAdapter = React.forwardRef<
+  SheetAdapterRef,
+  ModalAdapterProps
+>(({ children, contentContainerStyle }, forwardedRef) => {
+  const { id } = useBottomSheetContext();
+  const ref = useAdapterRef(forwardedRef);
+  const animatedIndex = useAnimatedIndex();
+  const [rendered, setRendered] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  const progress = useSharedValue(0);
+
+  const { handleDismiss, handleOpened, handleClosed } =
+    createSheetEventHandlers(id);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      expand: () => {
+        setRendered(true);
+        setOpen(true);
+        animatedIndex.set(0);
+      },
+      close: () => {
+        setOpen(false);
+        animatedIndex.set(-1);
+      },
+    }),
+    [animatedIndex]
+  );
+
+  const onAnimationEnd = (value: boolean) => {
+    'worklet';
+    if (value) {
+      scheduleOnRN(handleOpened);
+    } else {
+      scheduleOnRN(setRendered, false);
+      scheduleOnRN(handleClosed);
+    }
+  };
+
+  useAnimatedReaction(
+    () => open,
+    (value, prevValue) => {
+      if (prevValue === null || value === prevValue) return;
+      progress.value = withTiming(
+        value ? 1 : 0,
+        { duration: ANIMATION_DURATION },
+        (finished) => {
+          if (!finished) return;
+          onAnimationEnd(value);
+        }
+      );
+    }
+  );
+
+  useEffect(() => {
+    if (!rendered) return;
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        handleDismiss();
+        return true;
+      }
+    );
+    return () => subscription.remove();
+  }, [rendered, handleDismiss]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: progress.value,
+      transform: [
+        {
+          scale: ZOOM_INITIAL_SCALE + progress.value * (1 - ZOOM_INITIAL_SCALE),
+        },
+      ],
+    };
+  });
+
+  if (!rendered) {
+    return null;
+  }
+
+  return (
+    <Animated.View
+      style={[styles.container, contentContainerStyle, animatedStyle]}
+    >
+      {children}
+    </Animated.View>
+  );
+});
+
+CustomModalAdapter.displayName = 'CustomModalAdapter';
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/adapters/custom-modal/index.ts

@@ -0,0 +1,7 @@
+export {
+  CustomModalAdapter,
+  type ModalAdapterProps,
+} from './CustomModalAdapter';
+
+/** @deprecated Use `CustomModalAdapter` instead. */
+export { CustomModalAdapter as ModalAdapter } from './CustomModalAdapter';

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

@@ -0,0 +1,118 @@
+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 { 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);
+
+    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';