From 9d2920024fcf32a42233ccb49ff43939f81f9a35 Mon Sep 17 00:00:00 2001
From: Arkadiusz Kubaczkowski <arek.kubaczkowski@gmail.com>
Date: Tue, 24 Feb 2026 16:00:30 +0100
Subject: [PATCH] feat: optional backdrop

---
 src/QueueItem.tsx             | 4 +++-
 src/store/hooks.ts            | 4 ++++
 src/store/store.ts            | 1 +
 src/store/types.ts            | 1 +
 src/useBottomSheetControl.ts  | 2 ++
 src/useBottomSheetManager.tsx | 2 ++
 6 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/QueueItem.tsx b/src/QueueItem.tsx
index 39564b7..a8c698a 100644
--- a/src/QueueItem.tsx
+++ b/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"
diff --git a/src/store/hooks.ts b/src/store/hooks.ts
index bc08a62..67cd968 100644
--- a/src/store/hooks.ts
+++ b/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) =>
diff --git a/src/store/store.ts b/src/store/store.ts
index 13a5152..b555653 100644
--- a/src/store/store.ts
+++ b/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
diff --git a/src/store/types.ts b/src/store/types.ts
index 1048d5e..933ca54 100644
--- a/src/store/types.ts
+++ b/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;
diff --git a/src/useBottomSheetControl.ts b/src/useBottomSheetControl.ts
index 997fe94..6e1f3ba 100644
--- a/src/useBottomSheetControl.ts
+++ b/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
diff --git a/src/useBottomSheetManager.tsx b/src/useBottomSheetManager.tsx
index 1b790df..008dea7 100644
--- a/src/useBottomSheetManager.tsx
+++ b/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
     );