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

Aperta
#10,501 23 commenti 11 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

bug package:bottom-tabs package:native-stack platform:android platform:ios repro provided
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.
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

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. 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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.