fix: don't make the overlay touchable if drawer isn't open

Author: satya164

packages/drawer/src/views/legacy/Drawer.tsx

@@ -575,6 +575,7 @@ export default class DrawerView extends React.Component<DrawerProps> {
                 // Disable overlay if sidebar is permanent
                 drawerType === 'permanent' ? null : (
                   <Overlay
+                    pointerEvents={isOpen ? 'auto' : 'none'}
                     progress={progress}
                     onPress={() => this.toggleDrawer(false)}
                     style={overlayStyle as any}

packages/drawer/src/views/modern/Overlay.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { Platform, Pressable, StyleSheet } from 'react-native';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import Animated, {
+  useAnimatedProps,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
 
 const PROGRESS_EPSILON = 0.05;
 
@@ -17,17 +20,23 @@ const Overlay = React.forwardRef(function Overlay(
     return {
       opacity: progress.value,
       // We don't want the user to be able to press through the overlay when drawer is open
-      // One approach is to adjust the pointerEvents based on the progress
-      // But we can also send the overlay behind the screen
+      // We can send the overlay behind the screen to avoid it
       zIndex: progress.value > PROGRESS_EPSILON ? 0 : -1,
     };
   });
 
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      pointerEvents: progress.value > PROGRESS_EPSILON ? 'auto' : 'none',
+    } as const;
+  });
+
   return (
     <Animated.View
       {...props}
       ref={ref}
       style={[styles.overlay, overlayStyle, animatedStyle, style]}
+      animatedProps={animatedProps}
     >
       <Pressable onPress={onPress} style={styles.pressable} />
     </Animated.View>