search

software-mansion / react-native-screens

Native navigation primitives for your React Native app.
https://docs.swmansion.com/react-native-screens/
MIT License
3.09k stars 521 forks source link

Enabling screen causing swipe to go back issue on react-navigation #972

Closed tien closed 3 years ago

tien commented 3 years ago

When swiping from the edge to go back, the component at the edge of the screen also gets triggered, causing unexpected behaviour, this only happens with screen enabled. More details and reproduction can be seen in this issue: https://github.com/react-navigation/react-navigation/issues/9577

danfmaia commented 3 years ago

This problem is also happening here. It appears to be related with the update from react-native-screens v^2.9.0 to v^3.3.0. I'm looking out in the wild for a solution for that right now.

Downgrading may not be the most appropriate solution because, recently, I needed to upgrade some libraries to fix iOS and Android builds. And upgrading some libs was needed to fix 'em. I believe react-native-screen was one of those libs. But I'll also try that (downgrading react-native-screen back to v^2.9.0), and comment the result here.

tien commented 3 years ago

@danfmaia version 2 also have this issue. It's happening when you enable native screen support, which must be disabled explicitly on version 3 by doing:

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

enableScreens(false);
danfmaia commented 3 years ago

@danfmaia version 2 also have this issue. It's happening when you enable native screen support, which must be disabled explicitly on version 3 by doing:

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

enableScreens(false);

Downgrading to react-native-screens v2 (as I said in my previous comment) fixed the problem for me. Maybe because I'm using old React Navigation libraries versions. See below the React Navigation versions I'm using:

    "react-navigation": "^4.3.9",
    "react-navigation-header-buttons": "^4.0.2",
    "react-navigation-material-bottom-tabs": "^2.2.12",
    "react-navigation-stack": "^2.7.0",
    "react-navigation-tabs": "^2.8.13",
WoLewicki commented 3 years ago

So you can confirm that the same version of react-native-screens and other packages like react-native-gesture-handler etc. result in wrong behavior in 6.x and correct behavior in 5.x?

WoLewicki commented 3 years ago

I think I got to the root of this. Recently we made the container update async (https://github.com/software-mansion/react-native-screens/pull/777/files), which makes the registering of view from RNGH fail (https://github.com/software-mansion/react-native-gesture-handler/blob/master/ios/RNGestureHandlerManager.m#L134) since the view hierarchy is not ready because the asynchronous method of attaching view to container is fired after the register method. It works in v5 because the back button in header was taken from RNGH, and it is above the screens in hierarchy, so it managed to get to root view and attach the whole view https://github.com/react-navigation/react-navigation/blob/5.x/packages/stack/src/views/TouchableItem.ios.tsx#L3 It was changed in v6, cause it does not use RNGH for this button, so it stopped working there. We will work on resolving this.

danfmaia commented 3 years ago

So you can confirm that the same version of react-native-screens and other packages like react-native-gesture-handler etc. result in wrong behavior in 6.x and correct behavior in 5.x?

@WoLewicki In my case, correct behavior in 4.x. As I said above, I'm using React Navigation 4.x.

WoLewicki commented 3 years ago

Can you check if applying #986 fixes the problem?

danfmaia commented 3 years ago

Can you check if applying #986 fixes the problem?

@WoLewicki I can't check this now because our app is currently OK and we have higher priority demands now. As soon as I'm able to tackle this issue again I'll upgrade react-native-screens and then post about the result here.

cwhenderson20 commented 3 years ago

@WoLewicki I opened the ticket referenced in the OP and I and confirm that updating to screens 3.4 fixes the issue for me. Thank you!

tien commented 3 years ago

I'm trying out the 3.4 package right now and strangely enough, the issue is still happening.

WoLewicki commented 3 years ago

@tien I tested it in react-navigation v6, and the problem seems to be gone there. Can you make a minimal repo with the example where it does not work? Maybe you haven't cleared some cache or use Expo managed workflow?

tien commented 3 years ago

@WoLewicki Looks like it was a caching issue, finally got it to work after completely wiping Pods. Thanks for your work on this library & the really fast bug response time. Have a good day.

danfmaia commented 3 years ago

The issue got back here. I then simply updated react-native-screens to the most recent version (v3.4.0) and the issue was wiped out again, this time for good. Thank you @WoLewicki and all Software Mansion crew for the fast engagement to solve the problem!