Pass Touch Events through Overlay

Question

Setup

I have 2 screens, let us call them A and B.

Screen A is showing the camera image recorded by the back camera of the phone (third party library which i do not have further access to). Screen B has a semi transparent background and some UI elements (e.g. Buttons)

Task

I can not add UI elements to Screen A directly (third party) that's why i'm using react-native-navigation V2 to overlay Screen B via Navigation.showOverlay on top of Screen A.

Problem

Both screens need to react to touch events but it seems like the overlay of Screen B blocks these events on Screen A.

Question

Is it somehow possible to pass all touch events down from Screen B (UI with Overlay) to Screen A (Camera Screen which also needs to react to touch events) so that both screens are capable of reacting to user input?

---

In case someone is interested in the third party component i'm talking about: https://github.com/brave-digital/react-native-wikitude/issues/10

Answer 1

Instead of using react-native-navigation showOverlay, use can use

<View style={{flex: 1}}>
  <ScreenA />
  <View style={{position: "absolute", height: screenHeight, width: screenWidth}} pointerEvents={'box-none'}>
    <ScreenB />
  </View>
</View>

Answer 2

When showing the Navigation overlay, you can use its options to control touch interception. Try to configure it like so, and notice the interceptTouchOutside overlay option:

Navigation.showOverlay({
  component: {
    id: 'myComponent',
    name: 'myComponent',
    passProps,
    options: {
      layout: {
        backgroundColor: 'transparent',
        componentBackgroundColor: 'transparent'
      },
      overlay: {
        interceptTouchOutside: false
      }
    }
  }
});

If you're rendering a full screen, you might also need to set its topmost view pointerEvents prop (on myComponent in the example above).