react-navigation / react-navigation/react-navigation
Stack Animations Not Working as expected when re-rendering app
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 24.5k
- Forks
- 5.1k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 18
Description
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 |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Expo Snack reproduction and inspect the @react-navigation/native-stack behavior during onboarding reloads. Reproduce the transition from Hometown back through Gender to Name, then verify that stack position is preserved and backward navigation consistently uses the backward animation on iOS.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100