From 752445e3153603b5e7fb6747f5a7808855371065 Mon Sep 17 00:00:00 2001
From: Wendy <w.dekock@programic.com>
Date: Wed, 11 Feb 2026 12:48:07 +0100
Subject: [PATCH] feat(hideBackdrop) implement feature to hide the backdrop
 with showBackdrop prop

---
 src/ModalView.tsx     | 35 +++++++++++++++++++----------------
 src/ModalView.web.tsx | 35 +++++++++++++++++++----------------
 src/types.ts          |  6 ++++++
 3 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/src/ModalView.tsx b/src/ModalView.tsx
index f7ebe92..bdac54b 100644
--- a/src/ModalView.tsx
+++ b/src/ModalView.tsx
@@ -24,6 +24,7 @@ export const ModalView: FC<ModalViewProps> = ({
   onRequestDismiss,
   contentContainerStyle,
   statusBar,
+  showBackdrop = true,
   BackdropPressableComponent = Pressable,
   backdropColor = defaultBackdropColor,
   disableDefaultStatusBarIOS = false,
@@ -44,22 +45,24 @@ export const ModalView: FC<ModalViewProps> = ({
             <StatusBar {...statusBar} />
           ) : null}
           <GestureHandlerRootView style={styles.flex}>
-            <View style={[styles.backdropContainer]}>
-              <BackdropPressableComponent
-                accessibilityLabel={backdropAccessibilityLabel}
-                accessibilityHint={backdropAccessibilityHint}
-                style={styles.flex}
-                onPress={() => onRequestDismiss?.(DismissalSource.Backdrop)}
-              >
-                {renderBackdrop ? (
-                  renderBackdrop()
-                ) : (
-                  <View
-                    style={[styles.flex, { backgroundColor: backdropColor }]}
-                  />
-                )}
-              </BackdropPressableComponent>
-            </View>
+            {showBackdrop && (
+              <View style={[styles.backdropContainer]}>
+                <BackdropPressableComponent
+                  accessibilityLabel={backdropAccessibilityLabel}
+                  accessibilityHint={backdropAccessibilityHint}
+                  style={styles.flex}
+                  onPress={() => onRequestDismiss?.(DismissalSource.Backdrop)}
+                >
+                  {renderBackdrop ? (
+                    renderBackdrop()
+                  ) : (
+                    <View
+                      style={[styles.flex, { backgroundColor: backdropColor }]}
+                    />
+                  )}
+                </BackdropPressableComponent>
+              </View>
+            )}
             <ScrollContextResetter>
               <View
                 pointerEvents='box-none'
diff --git a/src/ModalView.web.tsx b/src/ModalView.web.tsx
index 1f8cea1..f3849bf 100644
--- a/src/ModalView.web.tsx
+++ b/src/ModalView.web.tsx
@@ -30,6 +30,7 @@ export const ModalView: FC<ModalViewWebProps> = ({
   renderBackdrop,
   onRequestDismiss,
   contentContainerStyle,
+  showBackdrop = true,
   BackdropPressableComponent = Pressable,
   backdropColor = defaultBackdropColor,
   animationType = 'none',
@@ -57,22 +58,24 @@ export const ModalView: FC<ModalViewWebProps> = ({
   }, [animationType, modalIsOpen]);
 
   return createPortal(
-    <View style={[styles.backdropContainer]}>
-      <BackdropPressableComponent
-        accessibilityLabel={backdropAccessibilityLabel}
-        accessibilityHint={backdropAccessibilityHint}
-        style={[
-          styles.backdropPressable,
-          !isBackdropVisible && styles.backdropHidden,
-        ]}
-        onPress={() => onRequestDismiss?.(DismissalSource.Backdrop)}
-      >
-        {renderBackdrop ? (
-          renderBackdrop()
-        ) : (
-          <View style={[styles.flex, { backgroundColor: backdropColor }]} />
-        )}
-      </BackdropPressableComponent>
+    <View style={[showBackdrop && styles.backdropContainer]}>
+      {showBackdrop && (
+        <BackdropPressableComponent
+          accessibilityLabel={backdropAccessibilityLabel}
+          accessibilityHint={backdropAccessibilityHint}
+          style={[
+            styles.backdropPressable,
+            !isBackdropVisible && styles.backdropHidden,
+          ]}
+          onPress={() => onRequestDismiss?.(DismissalSource.Backdrop)}
+        >
+          {renderBackdrop ? (
+            renderBackdrop()
+          ) : (
+            <View style={[styles.flex, { backgroundColor: backdropColor }]} />
+          )}
+        </BackdropPressableComponent>
+      )}
 
       <View
         role='dialog'
diff --git a/src/types.ts b/src/types.ts
index 3d3fb7f..6adfab3 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -65,6 +65,12 @@ export type ModalViewProps = {
    */
   animationType?: 'none' | 'fade' | 'slide';
 
+  /**
+   * Whether to show the backdrop behind the modal.
+   * Defaults to true.
+   */
+  showBackdrop?: boolean;
+
   /**
    * @deprecated Use `statusBar.translucent` instead.
    */