react-navigation / react-navigation/react-navigation
Error thrown for unknown reason (The screen dismissedRouteName was removed natively but didn't get removed from JS state.)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 24.5k
- Forks
- 5.1k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 18
Description
Current behavior
When we use stack navigators, together with navigation actions using nav.navigate() we are seeing error such as the following error in LogBox:
The screen '${dismissedRouteName}' was removed natively but didn't get removed from JS state.
This can happen if the action was prevented in a 'beforeRemove' listener, which is not fully supported in native-stack.
Consider using 'gestureEnabled: false' to prevent back gesture and use a custom back button with 'headerLeft' option to override the native behavior.
The corresponding code that logs this is:
https://github.com/react-navigation/react-navigation/commit/6d518a46b89496f4a3bfd2da24245fe344f97290#diff-1d8f4947ac2b908a880d4f9353b91b3615b51fa4963b1148ad802fceae040472R96-R113
We see NO reason why this code exists, because when we remove this console.error via patch-package everything works as expected. The code captures the nextDismissedKey in the onDismissed callback, so. it always fires for any native back-button. When inspecting the navigation state, there is no trace of the previous routes in JS state.
I'm still trying to get the Snack to reproduce the issue. So far it is working in the Snack, but it fails in my project very reliably. I'll work on the reproduction tomorrow. In the mean while I'm very interested into why this error even exists if it seems to be non-problematic. Is it left-over from something else?
Expected behavior
Regular navigation using nav.navigate just works & does not error to LogBox.
Reproduction
Still working on making the error reproduce, but this already approximately explains what we're doing: https://snack.expo.dev/CgavlJWkN
Update: we reproduced it, but the LogBox is not working, so instead we now capture console.error in the views: https://snack.expo.dev/jGvqnviA-_
When you go Back (triggering native onDismissed) and then do another navigation, the dismissedRouteName is somehow still set.
Maybe the nextDismissedKey is simply never cleared?
Platform
- Android
- iOS
- Web
- Windows
- MacOS
Packages
- @react-navigation/bottom-tabs
- @react-navigation/drawer
- @react-navigation/material-bottom-tabs
- @react-navigation/material-top-tabs
- @react-navigation/stack
- @react-navigation/native-stack
Environment
- I've removed the packages that I don't use
| package | version |
|---|---|
| @react-navigation/native | ^6.0.6 |
| @react-navigation/native-stack | ^6.2.5 |
| react-native-safe-area-context | ^3.3.2 |
| react-native-screens | ^3.10.1 |
| react-native | 0.66.4 |
| node | v16.13.0 |
| npm | 8.1.0 |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the @react-navigation/native-stack onDismissed callback and nextDismissedKey logic in the linked commit. Run the updated Snack reproduction and compare Android and iOS behavior when Back is followed by navigation. Done means regular nav.navigate calls no longer emit the reported console.error or LogBox message.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100