How to close menu when pressed outside?

[shobhitsinghal624]

Need a way to close the menu when user presses outside the area outside the drawer in the background screen. Is it possible in the current implementation?

[pedreviljoen]

@shobhitsinghal624 Waiting for a PR to be updated, once merged will check this out 👍

[edi]

Any news on this one?

[pedreviljoen]

@edi PR merged, are you still facing need to close the drawer when press occurs outside of drawer area?

[edi]

@pedreviljoen hei, unless you want to make it a feature, don’t bother with it just for me.

I just copied the your source code and changed it quite a bit as per my needs, since I didn’t need some stuff, but needed other bits like swipe to close, tap outside, background overlay color (not just the opacity of the children), status bar coloring, translucent option (draw underneith on Android) and so on.

Next week when I have some time I can do a PR with a tap to close.

[FlanaganSe]

I had this same desire. My somewhat simple but likely fragile solution has been:

In my Navigator.tsx:

return (
<>
      <View style={{ flex: 0, zIndex: 1002 }}>
          <DrawerMenu isOpen={isOpen} toggleMenu={toggleMenu} />
      </View>
      <View
        onResponderGrant={isOpen ? toggleDrawer : undefined}
        onStartShouldSetResponder={isOpen ? toggleDrawer : undefined}
        style={
          isOpen && {
            position: 'absolute',
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            backgroundColor: 'rgba(0,0,0,0.5)',    // Wanted more contrast compared to MenuDrawers' opacity 
            zIndex: 1001,
          }
        }
      />

      <View style={{ flex: 1 }}>
           [...] // Content here. I have my navigator screens, but also want a header with a hamburger menu
      </View>
</>
);

Then in DrawerMenu.tsx:

  const drawerContent = () => {
    return (
      <SafeAreaView edges={edges} style={{ flex: 1, backgroundColor: 'white' }}>
          [....] // Menu here
      </SafeAreaView>
    );
 
  return (
      <MenuDrawer
        open={isOpen}
        drawerContent={drawerContent()}
        position={'right'}
        drawerPercentage={50}
        animationTime={200}
        overlay={true}
        opacity={1}
      />
  );