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.)
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- TypeScript
- Estrellas
- 24.5k
- Forks
- 5.1k
- Merge medio
- 1 d 5 h
- PR fusionados (30 d)
- 18
Descripción
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 |
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comienza con el callback onDismissed de @react-navigation/native-stack y la lógica de nextDismissedKey en el commit enlazado. Ejecuta la reproducción actualizada en Snack y compara el comportamiento en Android e iOS cuando Back va seguido de una navegación. Se considera completado cuando las llamadas normales a nav.navigate ya no emiten el console.error ni el mensaje de LogBox reportados.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react-native, typescript
- Área
- mobile
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Necesita aclaración
- Aptitud para principiantes
- 35/100