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 defi

Solution 1:

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

{isAuth ? (
    <BottomTab.Screenname='Home'component={Home} />
): (
<><BottomTab.Screenname='Connexion'component={Login} /><BottomTab.Screenname='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.Screenname='Home'component={Home} /><BottomTab.Screenname='Connexion'component={Login} /><BottomTab.Screenname='Inscription'component={Register} />

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

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

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

constTab = createBottomTabNavigator();

functionMyTabs() {
  return (
    <Tab.NavigatorinitialRoute={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.

constBottomTab = createMaterialTopTabNavigator();

  <BottomTab.NavigatorinitialRouteName={isAuth ? Home:Login}><BottomTab.Screenname='Home'component={Home} /><BottomTab.Screenname='Connexion'component={Login} /><BottomTab.Screenname='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 stackconst routes = state.routes.filter((r => r.name !== 'Connexion' && r => r.name !== 'Inscription' ));
        
            returnCommonActions.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' },
                    
                  ],
                })
              );
        });