feat: add overlayEnable option in drawer layout

react-navigation · Oct 21, 2023 · 1ae0752 · 1ae0752
1 parent 688c43a
commit 1ae0752
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/packages/react-native-drawer-layout/src/types.tsx b/packages/react-native-drawer-layout/src/types.tsx
@@ -78,6 +78,13 @@ export type DrawerProps = {
    */
   drawerStyle?: StyleProp<ViewStyle>;
 
+  /**
+   * Whether the overlay is enabled.
+   * If false, interaction is possible with the drawer content while drawer is open.
+   * Defaults to `true`.
+   */
+  overlayEnabled?: boolean;
+
   /**
    * Style object for the drawer overlay.
    */

diff --git a/packages/react-native-drawer-layout/src/views/Drawer.tsx b/packages/react-native-drawer-layout/src/views/Drawer.tsx
@@ -67,6 +67,7 @@ export function Drawer({
   keyboardDismissMode = 'on-drag',
   hideStatusBarOnOpen = false,
   statusBarAnimation = 'slide',
+  overlayEnabled = true,
   style,
   ...rest
 }: Props) {
@@ -107,6 +108,7 @@ export function Drawer({
         keyboardDismissMode={keyboardDismissMode}
         hideStatusBarOnOpen={hideStatusBarOnOpen}
         statusBarAnimation={statusBarAnimation}
+        overlayEnabled={overlayEnabled}
       />
     </GestureHandlerRootView>
   );

diff --git a/packages/react-native-drawer-layout/src/views/legacy/Drawer.tsx b/packages/react-native-drawer-layout/src/views/legacy/Drawer.tsx
@@ -523,6 +523,7 @@ export class Drawer extends React.Component<Props> {
       children,
       gestureHandlerProps,
       overlayAccessibilityLabel,
+      overlayEnabled,
     } = this.props;
 
     const isOpen = drawerType === 'permanent' ? true : open;
@@ -596,8 +597,8 @@ export class Drawer extends React.Component<Props> {
                 {children}
               </View>
               {
-                // Disable overlay if sidebar is permanent
-                drawerType === 'permanent' ? null : (
+                // Disable overlay if sidebar is permanent or not overlayEnabled
+                drawerType === 'permanent' || !overlayEnabled ? null : (
                   <Overlay
                     progress={progress}
                     onPress={() => this.toggleDrawer(false)}

diff --git a/packages/react-native-drawer-layout/src/views/modern/Drawer.tsx b/packages/react-native-drawer-layout/src/views/modern/Drawer.tsx
@@ -59,6 +59,7 @@ export function Drawer({
   onTransitionStart,
   onTransitionEnd,
   open,
+  overlayEnabled,
   overlayStyle,
   overlayAccessibilityLabel,
   statusBarAnimation,
@@ -395,7 +396,7 @@ export function Drawer({
             >
               {children}
             </View>
-            {drawerType !== 'permanent' ? (
+            {drawerType !== 'permanent' && overlayEnabled ? (
               <Overlay
                 progress={progress}
                 onPress={() => toggleDrawer(false)}