fix: only close drawer if directly tapping backdrop (#3534)

1 files changed, 13 insertions, 7 deletions

diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx
index 51fb4a0a1..9dab23671 100644
--- a/src/view/shell/index.web.tsx
+++ b/src/view/shell/index.web.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
@@ -51,15 +51,21 @@ function ShellInner() {
       <PortalOutlet />
 
       {!isDesktop && isDrawerOpen && (
-        <TouchableOpacity
-          onPress={() => setDrawerOpen(false)}
-          style={styles.drawerMask}
+        <TouchableWithoutFeedback
+          onPress={ev => {
+            // Only close if press happens outside of the drawer
+            if (ev.target === ev.currentTarget) {
+              setDrawerOpen(false)
+            }
+          }}
           accessibilityLabel={_(msg`Close navigation footer`)}
           accessibilityHint={_(msg`Closes bottom navigation bar`)}>
-          <View style={styles.drawerContainer}>
-            <DrawerContent />
+          <View style={styles.drawerMask}>
+            <View style={styles.drawerContainer}>
+              <DrawerContent />
+            </View>
           </View>
-        </TouchableOpacity>
+        </TouchableWithoutFeedback>
       )}
     </>
   )