Can't navigate in SwitchNavigator in React-native

Question

I have Switch-Navigator in my project which contains three items:

const App = createSwitchNavigator({
  Splash: LoadingScreen,
  Auth: AuthStack,
  AppStack: Drawer


});
export default createAppContainer(App);

Loading Screen is simply a screen which returns blank view and contains login check to navigate either to Auth or Appstack, now after check I can successfully navigate to either stack but I can't navigate from certain stacks to other for instance I navigated to Auth screen from loading screen n now after login I want to move to AppStack from Auth Stack but it gives me error.

const AuthScreens = ({ navigation }) => (
    <Stack.Navigator>
        <Stack.Screen
            name="LoginScreen"
            component={LoginScreen}
            options={{
                headerShown: false,
                headerTransparent: true,
                gestureEnabled: false,
            }}
        />

        <Stack.Screen
            name="ResetPwd"
            component={ResetPwd}
            gestureEnable={true}
            options={{
                headerShown: false,
                headerTransparent: true,
                gestureEnabled: true,
            }}
        />
    </Stack.Navigator>
);
export default AuthScreens

And My AppStack has Drawer which further inflates AppStack

const DrawerNavigator = () => (
    <Drawer.Navigator
        ...
        <Drawer.Screen name="Home" component={AppStack} />
    </Drawer.Navigator>
);
export default DrawerNavigator

Appstack:

const StackScreens = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="FeedbackAndWorkingScreen"
      component={FeedbackAndWorkingScreen}
      gestureEnable={true}
      options={{
        headerShown: false,
        headerTransparent: true,
        gestureEnabled: true,
      }}
    />
  ...
 </Stack.Navigator>
);
export default StackScreens

When I do

props.navigation.navigate('AppStack')
props.navigation.navigate('Auth')

Both work good but when I try to navigate from each one of stack to other

props.navigation.navigate('AppStack')

it gives me this error:Error Image Any idea what I can be doing wrong?

Because your AuthStack code is in react navigation 5 and switch Navigator code is in react navigation 4. And react navigation 5 does not have switch Navigator. — Shahanshah Alam

Shahanshah Alam Shahanshah Alam · Accepted Answer · 2020-06-03T13:06:39

I think you are getting error because you have mixed two version of react navigation 4 and 5. The is causing error is

const App = createSwitchNavigator({
Splash: LoadingScreen,
Auth: AuthStack,
AppStack: Drawer
});
export default createAppContainer(App);

You need to change like this:-

function App(){
return(
<Stack.Navigator>
{this.state.isLogin ? 
 <Stack.Screen name='AppStack' component={DrawerNavigator} //after   login
: 
 <Stack.Screen name='Auth' component={AuthScreen}  //before login
}
 </Stack.Navigator>
)
}

change state of isLogin to true when you login successfully and change to false when you logout.

You have to do with ternary because react navigation 5 doesn't have switchNavigator.

Hope it helps!!!

If any issue let me know!!!

Can't navigate in SwitchNavigator in React-native

1 Answers