react-navigation / react-navigation/react-navigation
Stack Animations Not Working as expected when re-rendering app
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 24.5k
- Forks
- 5.1k
- Ø Merge
- 1 T. 5 Std.
- Gemergte PRs (30 T.)
- 18
Beschreibung
Current behavior
Hi! I'm fairly new to this and am trying to fix the appearance of the animations when going from one screen to another. Currently, if the user re-loads the app before completing onboarding (the full stack shown below), the animations for going forward or backward from a screen are reversed. I think the issue is that when the user re-renders the app, the stack is partially reset and does not keep track of the pages the user already visited. I could be incorrect but I am trying to solve this behavior and would appreciate any help. The video below shows the incorrect behavior for the three pages when I try to go back from "Hometown". Going back from "Hometown" to "Gender" has an animation that looks like we are going forward.

Expected behavior
I want the animation to correspond correctly with the position in the stack even when the user reloads the app in the middle of onboarding. I.e. if the user reloads when on the "Hometown" screen and chooses to go back to "Gender" and then back to "Name", the animation should appear to be going backward, not forwards. The correct animation is below
Reproduction
Should work like this: https://snack.expo.dev/@rafatcb/react-navigation-next-and-back-animations
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.8 |
| @react-navigation/bottom-tabs | 6.2.0 |
| @react-navigation/native-stack | 6.5.0 |
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne mit der verlinkten Expo Snack-Reproduktion und untersuche das Verhalten von @react-navigation/native-stack beim Neuladen während des Onboardings. Reproduziere den Übergang von Hometown zurück über Gender zu Name und überprüfe anschließend, dass die Stack-Position erhalten bleibt und die Rückwärtsnavigation unter iOS konsistent die Rückwärtsanimation verwendet.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react-native, typescript
- Bereich
- mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100