React Native Gesture Handler: intercept the begin of a gesture, but do not intercept the gesture

Question

I have a button component which, when pressed, shows a modal overlay that hovers above the button to display some information. To dismiss the modal, the user can press the button again, but it should also be possible to just do something else outside of the modal.

This behavior is similar to many menus in a web scenario. You press a button to open the menu, and then you have basically three options:

1. Click the button again to dismiss the menu.
2. Click INSIDE the menu to do something.
3. Doing anything OUTSIDE the menu will dismiss the menu.

Note that in option 3), you do not need two clicks, one to dismiss the modal, and a second one to do what you want. One click on a button (or anything else) outside the modal will dismiss the modal AND perform that button's action.

I want to create this scenario with React Native's in-built Modal component and React Native Gesture Handler to cover the gesture outside of the modal. This is what I tried:

  const tapGesture = Gesture.Manual()
    .onTouchesDown((event, stateManager) => {
      runOnJS(toggleDetails)();
      stateManager.end(); // this should end the gesture
    });

As you see, when the gesture handler recognizes the start of a gesture ("touch down") outside the modal, it immediately dismisses the modal, but does not follow the gesture along. We are not interested in whether this gesture will be a tap or a pinch.

However this does not work. It dismisses the modal, but the underlying components do not receive the gesture. The user needs to click two times on the button outside the modal.

How can I use React Native Gesture Handler to do what I want?