react-native-bottom-sheet-stack 1.9.2 → 1.11.0

package/src/useBottomSheetContext.ts

@@ -1,5 +1,6 @@
 import { useMaybeBottomSheetContext } from './BottomSheet.context';
 import { useSheetParams, useStartClosing } from './bottomSheet.store';
+import { requestClose } from './bottomSheetCoordinator';
 import type {
   BottomSheetPortalId,
   BottomSheetPortalParams,
@@ -9,6 +10,11 @@ export interface UseBottomSheetContextReturn<TParams> {
   id: string;
   params: TParams;
   close: () => void;
+  /**
+   * Close the sheet, bypassing any onBeforeClose interceptor.
+   * Useful for force-closing from within onBeforeClose confirmation flows.
+   */
+  forceClose: () => void;
   /** @deprecated Use `close` instead */
   closeBottomSheet: () => void;
 }
@@ -32,12 +38,16 @@ export function useBottomSheetContext<
     );
   }
 
-  const close = () => startClosing(context.id);
+  const close = () => {
+    requestClose(context.id);
+  };
+  const forceClose = () => startClosing(context.id);
 
   return {
     id: context.id,
     params: params as BottomSheetPortalParams<T>,
     close,
+    forceClose,
     closeBottomSheet: close,
   };
 }

package/src/useBottomSheetControl.ts

@@ -1,23 +1,21 @@
 import React from 'react';
 import type { SheetAdapterRef } from './adapter.types';
 
-import {
-  useOpen,
-  useStartClosing,
-  useUpdateParams,
-  type OpenMode,
-} from './bottomSheet.store';
+import { useOpen, useUpdateParams, type OpenMode } from './bottomSheet.store';
 import { useMaybeBottomSheetManagerContext } from './BottomSheetManager.provider';
+import { closeAllAnimated, requestClose } from './bottomSheetCoordinator';
 import type {
   BottomSheetPortalId,
   BottomSheetPortalParams,
   HasParams,
 } from './portal.types';
 import { getSheetRef, setSheetRef } from './refsMap';
+import type { CloseAllOptions } from './useBottomSheetManager';
 
 interface BaseOpenOptions<TParams> {
   mode?: OpenMode;
   scaleBackground?: boolean;
+  backdrop?: boolean;
   params?: TParams;
 }
 
@@ -37,6 +35,7 @@ type OpenFunction<T extends BottomSheetPortalId> =
 export interface UseBottomSheetControlReturn<T extends BottomSheetPortalId> {
   open: OpenFunction<T>;
   close: () => void;
+  closeAll: (options?: CloseAllOptions) => Promise<void>;
   updateParams: (params: BottomSheetPortalParams<T>) => void;
   resetParams: () => void;
 }
@@ -47,7 +46,6 @@ export function useBottomSheetControl<T extends BottomSheetPortalId>(
   const bottomSheetManagerContext = useMaybeBottomSheetManagerContext();
 
   const storeOpen = useOpen();
-  const startClosing = useStartClosing();
   const storeUpdateParams = useUpdateParams();
 
   const open = (options?: OpenOptions<T>) => {
@@ -67,6 +65,7 @@ export function useBottomSheetControl<T extends BottomSheetPortalId>(
         content: null,
         usePortal: true,
         scaleBackground: options?.scaleBackground,
+        backdrop: options?.backdrop,
         params: options?.params as Record<string, unknown>,
       },
       options?.mode
@@ -74,7 +73,12 @@ export function useBottomSheetControl<T extends BottomSheetPortalId>(
   };
 
   const close = () => {
-    startClosing(id);
+    requestClose(id);
+  };
+
+  const closeAll = (options?: CloseAllOptions) => {
+    const groupId = bottomSheetManagerContext?.groupId || 'default';
+    return closeAllAnimated(groupId, options);
   };
 
   const updateParams = (params: BottomSheetPortalParams<T>) => {
@@ -88,6 +92,7 @@ export function useBottomSheetControl<T extends BottomSheetPortalId>(
   return {
     open: open as OpenFunction<T>,
     close,
+    closeAll,
     updateParams,
     resetParams,
   };

package/src/useBottomSheetManager.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 
-import {
-  useOpen,
-  useStartClosing,
-  useClearGroup,
-  type OpenMode,
-} from './bottomSheet.store';
+import { useOpen, useClearGroup, type OpenMode } from './bottomSheet.store';
 import { useMaybeBottomSheetManagerContext } from './BottomSheetManager.provider';
 import type { SheetAdapterRef } from './adapter.types';
+import { closeAllAnimated, requestClose } from './bottomSheetCoordinator';
 import { setSheetRef } from './refsMap';
 
+export interface CloseAllOptions {
+  /** Delay in ms between each cascading close animation. Default: 100 */
+  stagger?: number;
+}
+
 export const useBottomSheetManager = () => {
   const bottomSheetManagerContext = useMaybeBottomSheetManagerContext();
 
   const storeOpen = useOpen();
-  const startClosing = useStartClosing();
   const storeClearGroup = useClearGroup();
 
   const openBottomSheet = (
@@ -24,6 +24,7 @@ export const useBottomSheetManager = () => {
       groupId?: string;
       mode?: OpenMode;
       scaleBackground?: boolean;
+      backdrop?: boolean;
     } = {}
   ) => {
     const groupId =
@@ -44,6 +45,7 @@ export const useBottomSheetManager = () => {
         groupId,
         content: contentWithRef,
         scaleBackground: options.scaleBackground,
+        backdrop: options.backdrop,
       },
       options.mode
     );
@@ -52,7 +54,12 @@ export const useBottomSheetManager = () => {
   };
 
   const close = (id: string) => {
-    startClosing(id);
+    requestClose(id);
+  };
+
+  const closeAll = (options?: CloseAllOptions) => {
+    const groupId = bottomSheetManagerContext?.groupId || 'default';
+    return closeAllAnimated(groupId, options);
   };
 
   const clear = () => {
@@ -63,6 +70,7 @@ export const useBottomSheetManager = () => {
   return {
     open: openBottomSheet,
     close,
+    closeAll,
     clear,
     /** @deprecated Use `open` instead */
     openBottomSheet,

package/src/useOnBeforeClose.ts

@@ -0,0 +1,92 @@
+import { useEffect } from 'react';
+
+import { useMaybeBottomSheetContext } from './BottomSheet.context';
+import { useSetPreventDismiss } from './bottomSheet.store';
+import type { OnBeforeCloseCallback } from './onBeforeCloseRegistry';
+import { removeOnBeforeClose, setOnBeforeClose } from './onBeforeCloseRegistry';
+import { useEvent } from './useEvent';
+
+/**
+ * Registers an interceptor that is called before the sheet closes.
+ *
+ * When active, this hook:
+ * 1. Sets `preventDismiss` on the sheet so adapters block user-initiated
+ *    gestures (swipe down, pan-to-close) at the native level.
+ * 2. Intercepts all programmatic close paths (backdrop tap, back button,
+ *    `close()`, `closeAll()`) and calls the callback first.
+ *
+ * The interceptor receives `onConfirm` and `onCancel` callbacks. Call these
+ * when the user makes a decision. This works seamlessly with `Alert.alert`:
+ *
+ * ```tsx
+ * useOnBeforeClose(({ onConfirm, onCancel }) => {
+ *   if (dirty) {
+ *     Alert.alert('Discard changes?', '', [
+ *       { text: 'Cancel', onPress: onCancel },
+ *       { text: 'Discard', onPress: onConfirm },
+ *     ]);
+ *   } else {
+ *     onConfirm(); // Allow close immediately
+ *   }
+ * });
+ * ```
+ *
+ * For backward compatibility, you can still return `boolean` or `Promise<boolean>`:
+ * - Return `false` (or resolve to `false`) to prevent closing
+ * - Return `true` (or resolve to `true`) to allow closing
+ *
+ * Use `forceClose()` from `useBottomSheetContext` to bypass the interceptor entirely.
+ *
+ * Must be used inside a sheet component (within BottomSheetContext).
+ *
+ * @example Callback pattern (recommended)
+ * ```tsx
+ * function MySheet() {
+ *   const [dirty, setDirty] = useState(false);
+ *
+ *   useOnBeforeClose(({ onConfirm, onCancel }) => {
+ *     if (dirty) {
+ *       Alert.alert('Discard changes?', '', [
+ *         { text: 'Cancel', style: 'cancel', onPress: onCancel },
+ *         { text: 'Discard', onPress: onConfirm },
+ *       ]);
+ *     } else {
+ *       onConfirm();
+ *     }
+ *   });
+ * }
+ * ```
+ *
+ * @example Boolean return (backward compatible)
+ * ```tsx
+ * function MySheet() {
+ *   const [dirty, setDirty] = useState(false);
+ *
+ *   useOnBeforeClose(() => {
+ *     return !dirty; // false blocks, true allows
+ *   });
+ * }
+ * ```
+ */
+export function useOnBeforeClose(callback: OnBeforeCloseCallback): void {
+  const context = useMaybeBottomSheetContext();
+  const setPreventDismiss = useSetPreventDismiss();
+
+  if (!context?.id) {
+    throw new Error(
+      'useOnBeforeClose must be used within a BottomSheet component'
+    );
+  }
+
+  const id = context.id;
+  const stableCallback = useEvent(callback);
+
+  useEffect(() => {
+    setOnBeforeClose(id, stableCallback);
+    setPreventDismiss(id, true);
+    return () => {
+      removeOnBeforeClose(id);
+      setPreventDismiss(id, false);
+    };
+  }, [id, stableCallback, setPreventDismiss]);
+}