javascriptreactjsreact-nativereact-navigationtabnavigator

How to navigate in a screen which is not defined because of a variable?


When I am in the login screen I would like once the user logs in that it is also redirected to the 'Home' screen but currently, I have an error telling me that the Home is not defined what is normal ...

{isAuth ? (
    <BottomTab.Screen name='Home' component={Home} />
): (
<>
    <BottomTab.Screen name='Connexion' component={Login} />
    <BottomTab.Screen name='Inscription' component={Register} />
</>

I don't really know how to use contexts yet but I think it might simplify the thing but in the meantime I would just like to be able to navigate from Login to Home.


Solution

  • This is because Home stack is not added due to your condition

    {isAuth ? (
        <BottomTab.Screen name='Home' component={Home} />
    ): (
    <>
        <BottomTab.Screen name='Connexion' component={Login} />
        <BottomTab.Screen name='Inscription' component={Register} />
    </>
    
    

    According to your code , if isAuth true, you only include Home Screen and if it is false you only include Connexion and Incription, you need to include all three Screen in order to navigate between them

    <BottomTab.Screen name='Home' component={Home} />
    <BottomTab.Screen name='Connexion' component={Login} />
     <BottomTab.Screen name='Inscription' component={Register} />
    

    , you need to move your condition to some other place, like on button click, also in stack we have initialRouteProp.

      <Stack.Navigator
                        initialRouteName={isAuth() ? Home : Login}
                      
                    >
    

    For Tab Navigator we have intialRoute prop, you can check intial route based on your isauth() function

    const Tab = createBottomTabNavigator();
    
    function MyTabs() {
      return (
        <Tab.Navigator initialRoute={isAuth() ? Home : Login}>
    
    

    For MaterialTopTabNavigator , in initialRouteName i pass isAuth condition , if true it set Home screen as initial screen , if false Login will be the initial screen.

    
    const BottomTab = createMaterialTopTabNavigator();
    
      <BottomTab.Navigator initialRouteName={isAuth ? Home : Login}>
    
        <BottomTab.Screen name='Home' component={Home} />
       <BottomTab.Screen name='Connexion' component={Login} />
       <BottomTab.Screen name='Inscription' component={Register} />
    

    If don't Login and register screens on after home, you reset the stack and remove routes you don't need

     this.props.navigation.dispatch(state => {
                // Remove the Login and Register from Stack from the stack
                const routes = state.routes.filter((r => r.name !== 'Connexion' && r => r.name !== 'Inscription' ));
            
                return CommonActions.reset({
                  ...state,
                  routes,
                  index: routes.length - 1,
                });
              });
    

    then on later on any event such as Logout click you cam readd Login Route

    this.props.navigation.dispatch(
                    CommonActions.reset({
                      index: 1,
                      routes: [
                        { name: 'Login' },
                        
                      ],
                    })
                  );
            });