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.)

Abierto
#10,501 23 comentarios 11 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

bug package:bottom-tabs package:native-stack platform:android platform:ios repro provided
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.
Screenshot 2022-04-11 at 16 45 49

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-_

IMG_6546 Screenshot 2022-04-12 at 09 16 39

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

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. 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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.