How to acess my stacks from routes.js in App.js - react-native

Question

How can i use AppContainer in my main file App.js? And navigate between pages of these two stacks AuthenticationNavigator and MainNavigator
I'm trying to acess my stacks from routes.js in the App.js, but i cant. Can someone tell me what's wrong in the code?
routes.js
const AuthenticationNavigator = createStackNavigator({
Login: {
screen: LoginScreen,
navigationOptions: {
title: 'Login',
headerShown: false, //desabilita a barra do topo
},
},
Register: {
screen: RegisterScreen,
navigationOptions: {
title: 'Cadastro',
},
},
}, {
initialRouteName: 'Login',
defaultNavigationOptions: {
headerTitleAlign: 'center',
headerTintColor: '#FFF',
headerStyle: {
backgroundColor: '#121212',
},
}
})
const MainNavigator = createStackNavigator({
Main: {
screen: MainScreen,
navigationOptions: {
title: 'Main',
headerShown: false,
},
},
}, {
initialRouteName: 'Main',
defaultNavigationOptions: {
headerTitleAlign: 'center',
headerTintColor: '#FFF',
headerStyle: {
backgroundColor: '#121212',
},
}
})
const AppNavigator = createSwitchNavigator({
/*
* Rather than being rendered by a screen component, the
* AuthenticationNavigator is a screen component
*/
Auth: AuthenticationNavigator,
Home: MainNavigator,
}, {
initialRouteName: 'Auth'}
);
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer
The way it's imported in App.js
import AppContainer from "./src/routes"
Where and how i try to acess the stacks(App.js):
render() {
if (!this.state.isAuthenticationReady) {
return (
{}
);
} else {
return (
<>
<StatusBar barStyle="light-content" backgroundColor="#121212" />
{this.state.isAuthenticated ? <AppContainer /> : <AppContainer />}
</>
);
}
}

Answer 1

Make sure you are exporting your all routes like
export {InitialStack, MainStack, Loading}
because you want to use it as
import {InitialStack, MainStack, Loading} from "./src/routes"
And you need to add state in your this line
{this.isAuthenticated ? <MainStack /> : <InitialStack />} // change this to
{this.state.isAuthenticated ? <MainStack /> : <InitialStack />}