search

react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.47k stars 5.01k forks source link

navigate.back not working properly when gesturesEnabled on android #9051

Open Elmatoss opened 3 years ago

Elmatoss commented 3 years ago

Current Behavior React-native app with react-navigation as navigator. Currently, when gesturesEnabled: true on android and you try to navigate back via button, it either doesn't work, or there is no transition animation and sometimes I get the warning Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Expected Behavior The navigate.back aswell as the gestures should always work flawlessly without breaking the animation or throwing a warning

How to reproduce (i) first clone my small repro at https://github.com/Elmatoss/reactNavigationGesturesEnabledAndroidBug git clone git@github.com:Elmatoss/reactNavigationGesturesEnabledAndroidBug.git (ii) get dependencies yarn (iii) start metro server and install app on device yarn start and yarn android (iv)click Next Screen and Again.. if you want to (v)click Back in the header vs swipe right to go back

Your Environment

software version
Android 11
@react-navigation/native 5.8.8
@react-navigation/stack 5.12.5
react-native-gesture-handler 1.8.0
react-native-safe-area-context 3.1.8
react-native-screens 2.14.0
react-native 0.63.3
node 14.13.0
yarn 1.22.5
kyoz commented 3 years ago

Confirm this, i'v also facing this issue :smile_cat:

pop cause this warning to

As i see this isn't just a warning, it cancel the animation immediately when navigate back :cry:

kyoz commented 3 years ago

More information: This issue just occur when i debugging with "Debug server host & port for device".

It work just fine if i'm debug with cable

kyoz commented 3 years ago

Reconfirm: Occur while debug with cable too. :(( All packages is latest.

Razorholt commented 3 years ago

Same here. I just upgraded to Expo SDK 41 and now I'm having that pop() issue, as well as randomly no header backgroundColor...

"@react-navigation/drawer": "^5.12.5", "@react-navigation/native": "^5.9.4", "@react-navigation/stack": "^5.14.4"

Thanks for looking into it! :)

Navipro70 commented 3 years ago

Same here, animations not working properly on back navigation with gestureEnabled: true :( UPD: Also reproduced on 6th version

smfeest commented 2 years ago

We also started seeing this issue in our Android app as soon as we upgraded from React Native 0.64.3 to 0.67.4. In particular the problem seems to occur whenever the user clicks on a button that calls goBack() and the screen has gestureEnabled: true.

We've also been able to reproduce the problem with both v5 (main branch) and v6 (nav6 branch) of React Navigation with this minimum reproduction repo: https://github.com/smfeest/react-navigation-issue9051

smfeest commented 2 years ago

Good news (I think!). It looks like this warning can be avoided by wrapping the navigation call in requestAnimationFrame (which incidentally appears to be what the built-in HeaderBackButton does

Example workaround in my minimum reproduction repo: https://github.com/smfeest/react-navigation-issue9051/commit/a775cd4b91a419afa802c001c42a019250def07c