react-navigation / react-navigation/react-navigation

Stack Animations Not Working as expected when re-rendering app

Offen
#10,632 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

bug platform:ios repro provided
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.

https://user-images.githubusercontent.com/99685335/173263411-bd817f43-f867-4ee3-83ee-c079a36877e4.mp4

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

https://user-images.githubusercontent.com/99685335/173263469-234a717a-c372-46c1-aacf-0af03b694780.mp4

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

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Ö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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.