StackActions reset causing issues after upgrading to react-navigation 4.x

Question

I have the following navigation setup in react-navigation 3.x

    const AuthStack = createStackNavigator(
      {
        Starter: {
          screen: Starter,
        },
        SignIn: {
          screen: Signin,
        },
        SignUp: {
          screen: Signup,
        },
        ForgotPassword: {
          screen: ForgotPassword,
        },
        SignUpSuccess: {
          screen: RegisterSuccess,
        },
        ForgotPasswordSuccess: {
          screen: ForgotPasswordSuccess,
        },
      },
      {
        initialRouteName: 'Starter',
        headerMode: 'none',
      },
    );

    const HomeStack = createStackNavigator(
      {
        HomeScreen,
      },
      {
        headerMode: 'none',
      },
    );

     const TabStack = createBottomTabNavigator(
      {
        Home: HomeStack,
        ....
      },
      {
        initialRouteName: 'Home',
        headerMode: 'none',
      }
    }

    const MainNavigator = createStackNavigator(
  {
    TabStack,
    ...commonStack,
  },
  {
    headerMode: 'none',
    mode: 'modal',
  },
);

const AppNavigator = createSwitchNavigator(
  {
    Auth: AuthStack,
    App: MainNavigator,
  },
  {
    initialRouteName: 'Auth',
  },
);

const AppContainer = createAppContainer(AppNavigator);

During successful login i was doing the following to reset

const resetAction = StackActions.reset({
      index: 0,
      key: null, // using a nested router you'll also need to set key to null otherwise it'll keep looking into currently active navigator.
      actions: [NavigationActions.navigate({routeName: 'TabStack'})],
    });
    this.props.navigation.dispatch(resetAction);

But now i upgraded to react-navigation 4.x but when i run the above reset code it's giving me exception. What can be the issue ?

Error: There is no route defined for key TabStack. Must be one of: 'Starter','SignIn','SignUp','ForgotPassword','SignUpSuccess','ForgotPasswordSuccess'

This error is located at:
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at SceneView.js:9)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:80)
    in Navigator (at createAppContainer.js:430)
    in NavigationContainer (at main.js:38)
    in RCTView (at main.js:37)
    in RCTView (at Root.js:14)
    in Root (at connectStyle.js:392)
    in Styled(Root) (at main.js:36)
    in Main (created by ConnectFunction)
    in ConnectFunction (at App.js:91)
    in ErrorBoundary (at App.js:90)
    in Provider (at App.js:89)
    in App (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

score -1 · Answer 1 · answered Oct 09 '19 at 06:02

Instead of passing key:null try to send key:undefined

const resetAction = StackActions.reset({
  index: 0,
  key: undefined,
  actions: [NavigationActions.navigate({ routeName: "TabStack" })]
});
this.props.navigation.dispatch(resetAction);

If you pass key:undefined to the reset action then it goes back to the old behavior.

For further information you can read here https://github.com/react-navigation/react-navigation/issues/5706#issuecomment-511976436

For me it was working for v3 but now its not working for v4 – Saurabh Kumar Oct 09 '19 at 07:25 — Saurabh Kumar, Oct 09 '19 at 07:25

StackActions reset causing issues after upgrading to react-navigation 4.x

1 Answers1