Taps inside embedded View "leak through" to underlying screens

[fritzfr]

Current Behavior

For several days now I am trying to figure out this bug happening with an "embedded" view and random navigation happening in the background, where taps seem to "leak" through the screen. This is by far one of the weirdest, but also most interesting issues I have encountered so far.

• What code are you running and what is happening?

I implemented https://github.com/skrafft/react-native-jitsi-meet in my app. It exposes a single view, JitsiMeetView. I implemented that view in a separate screen in my app.

Now the funny stuff: Tapping icons in that exposed view leads to react-navigation navigating to random places in the background, as if the taps "leak through" the screen and the app does navigate to places in the background, behind the currently active screen.

For example, the View has a mute button. When I tap it, I can see the App making API calls to my backend, indicating a switch in screens "behind" the current screen (which is confirmed when leaving the screen implementing JitsiMeetView using .goBack. The routing history is completely different, I am in a totally different part of the app then.

• Include a screenshot or video if it makes sense.

The screen in this video is the screen implementing said view. You can see the app making API calls, which are only happening on completely different parts of the App, and it the end, I can even escape the current screen and land on my chat screen, which again, wasn't even in the history.

Expected Behavior

• What do you expect should be happening?
  The taps should be contained to the current screen.

What I've tried

1. Playing around with pointerEvents on the wrapper of the view..
2. Playing around with <Screen> and enableScreens()
3. Playing around with zIndex

How to reproduce
This issue here has a very similiar (if not the same) issue with reproducible code: #8200

In general:
Have a couple of screens, and have one of them implement the linked library above.

There is also an issue in the repo of said library, many others have that issue too and it seems like the issue is in fact with react-navigation: skrafft/react-native-jitsi-meet#85

There is also an older ticket already here, but it wasn't properly filled out: #7757

I am grateful for points in any direction or where to look, as I am nowhere close to understand why this might be happening.

Your Environment

software	version
iOS or Android	iOS, 13.4.1
@react-navigation/native	5.2.4
@react-navigation/stack	5.2.19
react-native-gesture-handler	1.6.0
react-native-safe-area-context	0.7.3
react-native-screens	2.7.3
react-native	0.61.5
expo	no expo
node	12.16.1
npm or yarn	npm

---

Additional Info:

Some are reporting that the issue is not occurring when rendering the relevant screen in the stack conditionally, e.g.:

<Stack.Navigator headerMode="none" mode="modal">
      {conferenceFocused ? (
         // this is the screen implementing mentioned View
        <Stack.Screen name="ConferenceNav" component={ConferenceNavigator} />
      ) : (
        // rest of the App
        <>
          <Stack.Screen name="Screen1" component={Screen1} />
          <Stack.Screen name="Screen2" component={Screen2} />
          ...
        </>
      )}
</Stack.Navigator>

See skrafft/react-native-jitsi-meet#85 (comment).

[SleeplessByte]

In certain instances I have had the issue where after animating to a new screen, the previous screen's background disappears and the screens are completely see-through. This also has the same "taps" issue you describe.

Very difficult to reproduce, until it does, and then it's all the time.

It seems for me that using elevation makes it easier to show up; using react-native-screens solves it. (Perhaps for you using react-native-screens solves it too?)

I don't want to hijack your issue, but I feel like this might be the exact same issue: the previous screen still being "active" (and mounted and what's not).

---

Seems to be the same as #8200

[fritzfr]

@SleeplessByte I have not yet find a conclusion on when it shows up more or less, but true, it doesn't show up always, but eventually, it does.

using react-native-screens solves it. (Perhaps for you using react-native-screens solves it too?)

I'm not sure what you mean, I have the latest version installed, as it is a peer-dependency of react-navigation. I'm not sure how I would "use" it besides this. My router implements it through react-navigation already of course. I tried wrapping the relevant view in <Screen>, to no success.

[SleeplessByte]

You import enableScreens and call that functions before you mount any navigator:

import { enableScreens } from 'react-native-screens'

enableScreens()

[fritzfr]

@SleeplessByte Thanks, but no success :(

[SleeplessByte]

I'm out of ideas then! Sorry 😞. I hope the maintainers will be able to reproduce and fix this

[fritzfr]

For now, I solved it like the others using reset:

props.navigation.dispatch(
	CommonActions.reset({
		index: 1,
		routes: [
			{
				name: 'ConferenceScreen',
			},
		],
	}),
);

[batuhansahan]

@fritzfr can i ask a question is it custom sdk or did you expose the microphone and other buttons like ConferenceJoined event listener ?

[fritzfr]

@batuhansahan It's a modified SDK. It's not exposing anything other than the default one, just the view is modified. But that isn't part of this issue.

[pedrohenriquerissato]

I have the exact same issue but with WebView (10.3.1). Stack Navigator with two screens Blog and Post.
Blog have a list of posts (not the component itself, it implements its own). When onPress goes to screen Post, that has a Webview on entire screen with only text in it. But, when i press on screen, it goes to another Post, exactly the one that is in same coordinates on Blog Screen. The onPress is being executed on the old screen. The problem happens all the time, and opens the post according to its position on blog screen.

software	version
iOS or Android	Android, 8.0.0
@react-navigation/native	5.5.0
@react-navigation/stack	5.4.1
react-native-gesture-handler	1.6.1
react-native-safe-area-context	3.0.2
react-native-screens	2.8.0
react-native	0.62.2
expo	no expo
node	12.16.1
npm or yarn	yarn

[satya164]

Looking at the issue, sounds like it's a bug with the jitsi meet SDK that's not capturing taps properly/not working with React Native's responder system, and not a bug in React Navigation itself.

Sounds like you could just position another view absolutely below your jitsi component if the taps are going through as a workaround.

I'm closing the issue since this is not actionable for us.

[cristiam86]

I have been also working with react-navigation and the jitsi-meet sdk having the same problem. On Android, the navigation.reset call crashes the app.
Does anyone has found a workaround on this?
Thanks!

[SleeplessByte]

@cristiam86 you probably want to open another issue if you have a bug to report. Otherwise, forums and resources such as Stack Overflow might be your best bet.

[ricardodolnl]

Looking at the issue, sounds like it's a bug with the jitsi meet SDK that's not capturing taps properly/not working with React Native's responder system, and not a bug in React Navigation itself.

Sounds like you could just position another view absolutely below your jitsi component if the taps are going through as a workaround.

I'm closing the issue since this is not actionable for us.

I'm having the same problem. Also with combined with jitsi, but another view wrapping around it does not work.

[SleeplessByte]

@ricardodolnl It's a Jitsi SDK bug, so it should be fixed there.

[hasgardee]

same issue. any fix?