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

Interesting use case. I'm assuming Screen B contains components at the bottom and the top of the screen. Perhaps you can split screen B into two Overlays, one at the top and the other at the bottom. This way they wouldn't prevent Screen A from handling touch events (use interceptTouchOutside: false) — guy.gc, Nov 04 '18 at 15:56

score 5 · Answer 1 · answered Apr 30 '19 at 09:02

5

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>

answered Apr 30 '19 at 09:02

Kranthi

1,040
8
15

this should work but we are using react native navigation, so we must use Modal to represent ScreenB. – leo7r May 01 '19 at 16:12

score 1 · Answer 2 · answered May 01 '19 at 12:42

1

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

answered May 01 '19 at 12:42

Artal

8,933
2
27
30

tried that but still ScreenA buttons doesn't get clicked. I think RNN Modal doesn't care about `pointerEvents`... – leo7r May 01 '19 at 16:11
I had a very similar use case and this solution worked. If you can post a more complete example I can maybe look into it – Artal May 01 '19 at 16:20
@leo7r regarding pointerEvents - it is still relevant also in this case. The overlay option I mentioned prevents the overlay window from intercepting touches, but you still have the View that you render inside the overlay which prevents touches from propagating to any other views below – Artal May 02 '19 at 07:11

Rachel Gallen · Answer 3 · 2019-05-03T22:37:02.020

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');

 }

score -4 · Answer 4 · answered Mar 18 '19 at 20:22

-4

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

answered Mar 18 '19 at 20:22

Akarsh Srivastava

49
2

Pass Touch Events through Overlay

4 Answers4