From 3241190b19946c1cd0a744fb09a19d79ba683d74 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Thu, 8 Apr 2021 05:46:18 +0200
Subject: [PATCH] fix: fix drawer overlay on web

---
 packages/drawer/src/views/legacy/Drawer.tsx  | 37 ++++----------------
 packages/drawer/src/views/legacy/Overlay.tsx | 12 +++++--
 2 files changed, 16 insertions(+), 33 deletions(-)

diff --git a/packages/drawer/src/views/legacy/Drawer.tsx b/packages/drawer/src/views/legacy/Drawer.tsx
index df3787b1..fa1a9b49 100644
--- a/packages/drawer/src/views/legacy/Drawer.tsx
+++ b/packages/drawer/src/views/legacy/Drawer.tsx
@@ -8,14 +8,9 @@ import {
   StatusBar,
   View,
   InteractionManager,
-  Pressable,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
-import {
-  PanGestureHandler,
-  TapGestureHandler,
-  GestureState,
-} from '../GestureHandler';
+import { PanGestureHandler, GestureState } from '../GestureHandler';
 import Overlay from './Overlay';
 import DrawerProgressContext from '../../utils/DrawerProgressContext';
 import type { DrawerProps } from '../../types';
@@ -449,18 +444,6 @@ export default class DrawerView extends React.Component<DrawerProps> {
     },
   ]);
 
-  private handleTapStateChange = event([
-    {
-      nativeEvent: {
-        oldState: (s: Animated.Value<number>) =>
-          cond(
-            eq(s, GestureState.ACTIVE),
-            set(this.manuallyTriggerSpring, TRUE)
-          ),
-      },
-    },
-  ]);
-
   private handleContainerLayout = (e: LayoutChangeEvent) =>
     this.containerWidth.setValue(e.nativeEvent.layout.width);
 
@@ -593,18 +576,12 @@ export default class DrawerView extends React.Component<DrawerProps> {
               </View>
               {
                 // Disable overlay if sidebar is permanent
-                drawerType === 'permanent' ? null : Platform.OS === 'web' ||
-                  Platform.OS === 'windows' ||
-                  Platform.OS === 'macos' ? (
-                  <Pressable onPress={() => this.toggleDrawer(false)}>
-                    <Overlay progress={progress} style={overlayStyle as any} />
-                  </Pressable>
-                ) : (
-                  <TapGestureHandler
-                    onHandlerStateChange={this.handleTapStateChange}
-                  >
-                    <Overlay progress={progress} style={overlayStyle as any} />
-                  </TapGestureHandler>
+                drawerType === 'permanent' ? null : (
+                  <Overlay
+                    progress={progress}
+                    onPress={() => this.toggleDrawer(false)}
+                    style={overlayStyle as any}
+                  />
                 )
               }
             </Animated.View>
diff --git a/packages/drawer/src/views/legacy/Overlay.tsx b/packages/drawer/src/views/legacy/Overlay.tsx
index 88f54d31..04038f41 100644
--- a/packages/drawer/src/views/legacy/Overlay.tsx
+++ b/packages/drawer/src/views/legacy/Overlay.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Platform, StyleSheet } from 'react-native';
+import { Pressable, Platform, StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 const {
@@ -16,10 +16,11 @@ const PROGRESS_EPSILON = 0.05;
 
 type Props = React.ComponentProps<typeof Animated.View> & {
   progress: Animated.Node<number>;
+  onPress: () => void;
 };
 
 const Overlay = React.forwardRef(function Overlay(
-  { progress, style, ...props }: Props,
+  { progress, onPress, style, ...props }: Props,
   ref: React.Ref<Animated.View>
 ) {
   const animatedStyle = {
@@ -45,7 +46,9 @@ const Overlay = React.forwardRef(function Overlay(
       {...props}
       ref={ref}
       style={[styles.overlay, overlayStyle, animatedStyle, style]}
-    />
+    >
+      <Pressable onPress={onPress} style={styles.pressable} />
+    </Animated.View>
   );
 });
 
@@ -63,6 +66,9 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
   },
+  pressable: {
+    flex: 1,
+  },
 });
 
 export default Overlay;