I can’t navigate routes of different Stacks with React navigation

Question

I have 3 files of routes.

1. It contains the routes that the user can access without having to be logged in, in my case only the signin screen.

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import SignInView from '../pages/SignIn';
import Loading from '../pages/Loading';

const AuthStack = createStackNavigator();
const AuthRoutes = () => (
    <AuthStack.Navigator>
        <AuthStack.Screen
            name='SignIn'
            component={SignInView}
        />
        <AuthStack.Screen
            name='Loading'
            component={Loading}
        />
    </AuthStack.Navigator>
);

export default AuthRoutes;

2. Routes the logged-in user can access. (ALL OTHER)

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import Dashboard from '../pages/Dashboard';

const AppStack = createStackNavigator();

const AppRoutes = () => (
    <AppStack.Navigator>
        <AppStack.Screen
            name='Dashboard'
            component={Dashboard}
        />
    </AppStack.Navigator>
);

export default AppRoutes;

3. What checks if the user is logged in and redirects to the correct route file.

import React from 'react';

import AppRoutes from './app.routes';
import AuthRoutes from './auth.routes';
import { Logado } from '../services/apiUser';

const Routes = () => {
    //aqui vai o if com o retorno se esta ou nao logado se nao authroutes se sim approutes
    if(Logado){
        return <AppRoutes />;
    }else{
        return <AuthRoutes />;
    }
};

export default Routes;

I’m trying to call Dashboard and I can’t

const Dashboard = ({ navigation }) => {

  return (
    <Container>

      <ButtonDashboard onPress={() => navigation.navigate('AuthStack', {screen: 'Dashboard' })}>
        <ButtonTitle>Chamar Dashboar</ButtonTitle>
      </ButtonDashboard>

    </Container>
  );
};

export default Dashboard;

I get that mistake:

console.error: The action 'NAVIGATE' with payload {"Neme":"Approutes", "params": {screen":"Dashboard"}} was not handled by any Navigator

I went up to git to make it easier to help myself. https://github.com/cirulei/vitrine

Answer 1

I understand your problem. You can’t, or at least shouldn’t, navigate from one route stack to another.

To change stack, you will need to do so, turn your variable Logado in an React state, as it changes when the user logs in to their app, when the state changes the if that you did to check if you’re logged in will run again, and return another route stack.

I hope it doesn’t get complicated to understand,.