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

try prop pointerEvents='box-none' or refer this issue

Answer 2

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 3

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).

Answer 4

Perhaps you could use a button/touchable opacity to open the camera screen using a function (to bring it into focus..) This way both screens could receive user inputs.

The function to open the other screen as a new instance would probably be the best bet at both screens reacting to user input independently.

The code below is sample code that could be put in such a button/touchable opacity on the UI screen.

e.g <Button onPress = { this.fnOpenCamera } title = 'Camera View'/>

fnOpenCamera = () =>
 {
    this.props.navigation.navigate('ScreenA');

 }