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.)
Nessuno ha ancora preso questa issue.
- Lingua principale
- TypeScript
- Stelle
- 24.5k
- Fork
- 5.1k
- Merge medio
- 1g 5h
- PR unite (30g)
- 18
Descrizione
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 |
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia dal callback onDismissed di @react-navigation/native-stack e dalla logica di nextDismissedKey nel commit collegato. Esegui la riproduzione aggiornata in Snack e confronta il comportamento su Android e iOS quando a Back segue una navigazione. Il lavoro è completato quando le normali chiamate a nav.navigate non emettono più il console.error né il messaggio di LogBox segnalati.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react-native, typescript
- Ambito
- mobile
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Da chiarire
- Idoneità per principianti
- 35/100