Search code examples
reactjsreact-nativenavigationreact-navigationreact-navigation-stack

React Navigation(version 4.x): Transition to the same screen


I am using createStackNavigator. I have three screens: A, B, and C

Screen B is used twice during my transition. I use this notation:

B(1): The first time we transit to screen B with some parameters

B(2): The second time we transit to screen B with different parameters

Consider this transition:

A --> B(1) --> C --> B(2)

Current behavior:

When I transit from screen A to B(1), B(1) to C, each time the new screen appears with an animation from right to left. But when I transit from C to B(2), the new screen appears from left to right. (issue 1)

When I am on B(2) and use navigation.goBack(), I see A (but I want to see C of course) (issue 2)

Expected Behaviour:

when I transit from C to B(2), the new screen must appear from right to left (Like previous transitions)

When I am on B(2) and use navigation.goBack(), I must see C

System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Memory: 246.99 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.2
      System Images: android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5977832
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz => 0.61.4
    "react-navigation": "^4.3.7",
    "react-navigation-stack": "^1.10.3",

Solution

  • To fix "when I transit from C to B(2), the new screen must appear from right to left (Like previous transitions)" in screen C use this code to navigate :

    // this pushes B into the stack insted of navigating to B
    () => navigation.push('B')
    

    This "When I am on B(2) and use navigation.goBack(), I must see C" will be already fixed because the stack order is correct using push insted of navigate. So your stack preview screen will be C.