Tap on JitsiMeetView leads to tap on other part of the app

[jean-ben-guigui]

React-native 0.60.6 react-native-jitsi-meet 2.0.2

I am using react-native-jitsi-meet inside a multiple screens app. When I press buttons in the JitsiMeetView, it sometimes press buttons that are not even in the same page as jitsiMeetView. The behavior is rather random, it changes at each build. Nevertheless, once the app is build and the bug is there, a given button on the JitsiMeetView triggers always the same button of the app.

Anyone have or had a similar behavior? Any help would be highly appreciated.

PS: My app uses react-navigation 2.3.0 (I don't know if that is relevant though...)

Edit: If I open the screen containing react-native-jitsi-meet in a new navigation stack ie I unmount every other component, I don't have the problem anymore. Nevertheless, it is just a workaround and not a problem resolution.

[skrafft]

We don't have this kind of behaviour in our apps. We use react navigation as well but version 4.0 It seems like an opacity or an overlay problem. You might want to try to update your react-navigation version.

[letruongkimtai]

Hi Skrafft, i have same issue too. My react-navigation is newest version, but sometime tap on JitsiView will navigate back to last screen or navigate to other screen when end call. Have you ever met this issue before, do you think separate screen that contain JitsiView to new stack would solve this issue ?

Btw, about opacity and overlay problem you have mentioned. Would you mind to explain me about those ?

Thank you so much

[terrynip506]

i am having a similar problem in my application. React-native 0.61.2 react-native-jitsi-meet 2.0.2

[jmagdada]

Hello @jean-ben-guigui @letruongkimtai @terrynip506 did you managed to find a solution for this issue? I am encountering this problem too.

[thiagobrez]

Hey @skrafft, I'm facing this issue also.

• Tried updating all react-navigation dependencies and the issue persisted;
• Tried setting zIndex to 999 and the issue persisted;
• Tried creating a clean new project without react-native-jitsi-meet and the issue did not appear.

Maybe I'm missing something, but could you take a deeper look?

Thanks in advance.

[thiagobrez]

Actually I just tried creating another clean project with react-native-jitsi-meet and the issue did not appear. Must be a bug within my react-navigation setup.

[jean-ben-guigui]

@thiagobrez this is really interesting, have you implemented a few pages in your clean project with some navigation between them? I also tried playing with zIndex without success.

[thiagobrez]

@jean-ben-guigui yeah, I've implemented the following:

• Root stack (mode="modal")
  • Home stack
    • Home screen
  • Conference Screen

And tried clicking Home Screen from within the opened Conference Screen (popped up modal), but couldn't (worked correctly).

In my production app the navigation setup is bigger, but contains something similar to this.

[thiagobrez]

I also tried wrapping my JitsiMeetView in another Stack Navigator, with no success.

[jean-ben-guigui]

That's weird, it solved the thing in my app. Because the behaviour I observed was that clicks in the jitsi interface mirrored in clicks on other components of my app. In my case, when I open a new Stack Navigator, what I observe is an unmounting of every component contained in the previous stack.

[thiagobrez]

Thanks for reporting, I'll give it another try.

[thiagobrez]

Solved it by dispatching reset navigation action, therefore unmounting previous stacks' components. Basically, the same solution on a different approach. Thanks!

[lironsher]

I have the same issue, but also the video is not playing, it shows white screen, any idea?

[jean-ben-guigui]

@lironsher double check that the views that embed the JitsiMeetView component all have the style "flex:1" and that the JitsiMeetView have the style style={{ flex: 1, height: '100%', width: '100%' }} (cf readMe)

[sebasrobert]

I have the same issue

  "react-native": "0.61.4",
  "react-navigation": "4.0.10"

When I touch the screen over the video, it looks like the click is handled by the previous screen in the app. It's really weird, I touch the screen and after sometime I am brought back to the app and not always in the same screen.

I tried to use TouchableWithoutFeedback to wrap the JitsiMeetView without success.

If I move the VideoScreen in it's own stack I don't have any issue. The drawback is that it's break my app navigation flow. I am unable to go back to the previous stack. I can handle it with a navigate but I loose all the navigations that were done with this previous stack. So doing multiple back does not give the wanted behavior.

Here's the simple screen I use for the video:

<View style={{ backgroundColor: 'black', flex: 1 }}>
    <JitsiMeetView
          onConferenceTerminated={this.onConferenceTerminated}
          onConferenceJoined={this.onConferenceJoined}
          onConferenceWillJoin={this.onConferenceWillJoin}
          style={{ flex: 1, height: '100%', width: '100%' }}
      />
</View>

In the end, I just don't use the JitsiMeetView for now but it's unfortunate because i think it's looking really clean.

[alexstoyanov]

Having the absolute same issue. When clicking on the JitsiMeetView it calls a random react-navigation action. Reseting of navigation does not work in our case. You are loosing the whole navigation history when you reset the history. Tried mode: "modal" but the same. Any idea?

[developer-appdam]

@alexstoyanov I have the same issue and I end up resetting the stack. At the end I have a custom method that drives me back to the screen that I had before. Not the nicest but it works.

[fritzfr]

Hey @developer-appdam, do you mind sharing what you did to solve the issue? I mean the methods to reset and go back. I have the same issue.

[thiagobrez]

@fritzfr If it helps, I did it by conditionally rendering the conference navigator:

<Stack.Navigator headerMode="none" mode="modal">
      {conferenceFocused ? (
        <Stack.Screen name="ConferenceNav" component={ConferenceNavigator} />
      ) : (
        <>
          <Stack.Screen name="Screen1" component={Screen1} />
          <Stack.Screen name="Screen2" component={Screen2} />
          ...
        </>
      )}
</Stack.Navigator>

const ConferenceNavigator = () => {
  return (
    <Stack.Navigator headerMode="none">
      <Stack.Screen name="Conference" component={ConferenceScreen} />
    </Stack.Navigator>
  );
};

const ConferenceScreen = () => {

...

  return (
    <JitsiMeetView onConferenceTerminated={onConferenceTerminated} style={styles.conferenceView} />
  );
};

[fritzfr]

@thiagobrez Thanks for sharing. How is conferenceFocused defined? It seems like the important part is conditionally rendering that Stack/Screen. Because without that ternary, the issue still persists.

[thiagobrez]

@fritzfr For sure. Just a simple redux state that I set to true when I want to navigate to the conference navigator, triggering the conditional render.

[thiagobrez]

Not the ideal solution, of course.

[fritzfr]

I just noticed that the issue this ticket is about seems to only occur when using .navigate to go to the relevant Jitsi screen. When using .push, I can't reproduce this. My routing/stack setup is almost the same as @thiagobrez showed, except I don't render the relevant Jitsi screen conditionally, but I have the Stack.Screen right next to all the other ones without a ternary, and I also don't wrap it in another Stack.Navigator.

[thiagobrez]

@fritzfr Nice! This could be useful. Never really tried that. Thanks for sharing.

[fritzfr]

@thiagobrez Actually, never mind. Apparently it is not solved completely.

[fritzfr]

For now, I solved it using described methods above, namely by resetting the history:

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

And then for leaving the ConferenceScreen, you have to repopulate the history with whatever you expect to be before that:

CommonActions.reset({
    index: 1,
    routes: [
        {
            name: 'AppStack',
            params: {
                screen: 'HomeStack',
            },
        },
    ],
}),

[fritzfr]

@AdemOch I didn't end up conditionally rendering it like @thiagobrez. My solution is resetting the nav state, as you can see right above.

[AdemOch]

@AdemOch I didn't end up conditionally rendering it like @thiagobrez. My solution is resetting the nav state, as you can see right above.

yeah I ended up doing something similar. Thank you @fritzfr

[Gretchin]

In my case i have root stackNavigator. Instead of placing ConferenceScreen inside stack, my workaround is replace stackNavigator with switchNavigator with 2 routes:

1. my stackNavigator
2. ConferenceScreen

And my navigating to ConferenceScreen look like: navigate("ConferenceScreen",{previousScreenName, previousScreenNavParams});

and to leave ConferenceScreen i use: navigate(previousScreenName, previousScreenNavParams);

[baotoan1905]

Hmm, I got same issue with react-native-router-flux, I tried not to use router flux to navigate to video call screen, instead I use modal but issue is still persisted. Sometime it opens other screens, sometime it show my image picker from react-native-image-picker (wth :D), really not sure what happened and how to fix it yet. react-native 0.61.5 react-native-jitsi-meet 2.1.1 jitsi-meet sdk 2.4.0

[eskiesirius]

hello.. im still having this issue..

[ricardodolnl]

I have the same problem. When pressing buttons within the JitsiMeetView it also presses buttons that are shown above that view or even buttons from a different route (that was shown before the current route is shown). I also tried updating everything and wrapping within an other view, but no luck yet.

react-native: 0.62.2 react-native-jitsi-meet: 2.1.1 (forked this repository to update jitsi-meet-sdk to version 2.9.3 to try and fix it) jitsi-meet-sdk: 2.9.3 @react-navigation/native: 5.7.2

Also the option button (the three dots in right bottom corner while in a call) doesn't work anymore, it cashes the app. But this might have something to do with updating jitsi-meet-sdk and react-native-svg

[ricardodolnl]

I have the same problem. When pressing buttons within the JitsiMeetView it also presses buttons that are shown above that view or even buttons from a different route (that was shown before the current route is shown). I also tried updating everything and wrapping within an other view, but no luck yet.

react-native: 0.62.2 react-native-jitsi-meet: 2.1.1 (forked this repository to update jitsi-meet-sdk to version 2.9.3 to try and fix it) jitsi-meet-sdk: 2.9.3 @react-navigation/native: 5.7.2

Also the option button (the three dots in right bottom corner while in a call) doesn't work anymore, it cashes the app. But this might have something to do with updating jitsi-meet-sdk and react-native-svg

A bit offtopic, but I fixed the option button problem by downgrading react-native-svg to version 9.7.1.

But I still have the problem that tapping a button or even the password field popup within the JitsiMeetView activates other buttons that are not visible or that are above that view.

[eskiesirius]

i dont have react-native-svg but still im experiencing this kind of issue

[hasgardee]

any fix guys? other than removing screens from stack?

[kanelloc]

Same problem here with: react-navigation/native: "5.7.4" react-native-jitsi-meet: "2.1.1" Any workaround?

[sanoopks]

Same problem here with: react-navigation/native: "5.7.4" react-native-jitsi-meet: "2.1.1" Any workaround?

@Gretchin given the correct answer for this problem. You can check it

[jbg]

Since this issue has seen no activity for several months, and the comment from @Gretchin provides a solution, I'm closing it as part of triaging all open issues. If I made a mistake, please re-open with a comment summarising the current state of the issue.

[Yogesh-stackgeeks]

You have to to place JitsiMeetView inside Modal. it will solve my problem , i think this also helps you , please use and check it. use modal from react-native-modal

   <Modal visible={true}>
        <JitsiMeetView
          onConferenceTerminated={this.onConferenceTerminated}
          onConferenceJoined={this.onConferenceJoined}
          onConferenceWillJoin={this.onConferenceWillJoin}
          style={{flex: 1, height: '100%', width: '100%'}}
        />
      </Modal>

[alariej]

Also having this issue on iOS, haven't tested on Android yet. I'm not using navigation, and modal is not an option. My workaround is to dismiss the leaked onpress events coming from the JitsiMeetSDK directly in my own components. Not very nice but it does the job for now.

This problem is apparently also present on a JitsiMeet Flutter add-on. Here is a PR addressing it: https://github.com/gunschu/jitsi_meet/pull/285. I tried something equivalent with a Swift version of react-native-jitsi-meet (https://github.com/bortolilucas/react-native-jitsimeet), but no luck. I could catch and log the touch events in the native module's UIView, but they still propagated through JitsiMeetSDK back to the app.

[professionally]

The solution of @fritzfr works like a charm. You can even have the same Stack as before, by passing the current routes as parameter. With this solution, your stack flow will not be corrupted.

navigating to the Jitsi view containing the Jitsi-View:

 const {routes} = navigation.getState()
  navigation.dispatch(
       CommonActions.reset({
              index: 1,
              routes: [
                  { name: 'VideoConference', params:{routes } },
               ],
        })
   );

navigating back:

export default VideoConference = ({ navigation, route }) => {
    const { routes} = route.params;

...
   navigation.dispatch(
            CommonActions.reset({
                index: 1,
                routes: routes,
            }));
};

Thanks to all!

[MahmudHasanMenon]

I am also facing the same issue. For my app perspective, i have three button above jitsi view of the same conference screen. Whenever i press jitsi view it redirects me anywhere. How can i implement Above navigation reseting solution for my app perspective?

[MahmudHasanMenon]

For now, I solved it using described methods above, namely by resetting the history:

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

And then for leaving the ConferenceScreen, you have to repopulate the history with whatever you expect to be before that:

CommonActions.reset({
  index: 1,
  routes: [
      {
          name: 'AppStack',
          params: {
              screen: 'HomeStack',
          },
      },
  ],
}),

can you please suggest how can i fix my app navigation flow? I have 3 button above jitsi view and those buttons take me to the app while jitsi meetin g goes on and i can also back to the jitsi view.