feat: optional backdrop

src/QueueItem.tsx

@@ -7,6 +7,7 @@ import { PortalHost } from 'react-native-teleport';
 import { cleanupAnimatedIndex, getAnimatedIndex } from './animatedRegistry';
 import { BottomSheetContext } from './BottomSheet.context';
 import {
+  useSheetBackdrop,
   useSheetContent,
   useSheetKeepMounted,
   useSheetPortalSession,
@@ -32,6 +33,7 @@ export const QueueItem = memo(function QueueItem({
   const usePortal = useSheetUsePortal(id);
   const keepMounted = useSheetKeepMounted(id);
   const portalSession = useSheetPortalSession(id);
+  const backdrop = useSheetBackdrop(id);
 
   const { width, height } = useSafeAreaFrame();
 
@@ -56,7 +58,7 @@ export const QueueItem = memo(function QueueItem({
 
   return (
     <>
-      {isActive && (
+      {isActive && backdrop !== false && (
         <View
           style={[StyleSheet.absoluteFillObject, { zIndex: backdropZIndex }]}
           pointerEvents="box-none"

src/store/hooks.ts

@@ -20,6 +20,10 @@ export const useSheetUsePortal = (id: string) =>
 
 export const useSheetKeepMounted = (id: string) =>
   useBottomSheetStore((state) => state.sheetsById[id]?.keepMounted, shallow);
+
+export const useSheetBackdrop = (id: string) =>
+  useBottomSheetStore((state) => state.sheetsById[id]?.backdrop, shallow);
+
 export const useSheetPortalSession = (id: string) =>
   useBottomSheetStore((state) => state.sheetsById[id]?.portalSession, shallow);
 export const useSheetPreventDismiss = (id: string) =>

src/store/store.ts

@@ -54,6 +54,7 @@ export const useBottomSheetStore = create(
               status: 'opening',
               scaleBackground:
                 sheet.scaleBackground ?? existingSheet.scaleBackground,
+              backdrop: sheet.backdrop ?? existingSheet.backdrop,
               params: sheet.params ?? existingSheet.params,
               portalSession: existingSheet.keepMounted
                 ? existingSheet.portalSession

src/store/types.ts

@@ -9,6 +9,7 @@ export interface BottomSheetState {
   content?: ReactNode;
   status: BottomSheetStatus;
   scaleBackground?: boolean;
+  backdrop?: boolean;
   usePortal?: boolean;
   params?: Record<string, unknown>;
   keepMounted?: boolean;

src/useBottomSheetControl.ts

@@ -15,6 +15,7 @@ import type { CloseAllOptions } from './useBottomSheetManager';
 interface BaseOpenOptions<TParams> {
   mode?: OpenMode;
   scaleBackground?: boolean;
+  backdrop?: boolean;
   params?: TParams;
 }
 
@@ -64,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

src/useBottomSheetManager.tsx

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