How to route my login screen in react native? - react-native

Question

I want to add a login screen right after my splash screen, and then go to my home screen.
const LoginStack = createStackNavigator({
Login: LoginScreen,
Home: HomeStack,
});
The problem is that my LoginStack is never used even if I call the home screen in my login screen :
<Button onPress = {this.onPressHome}/>
onPressHome = () => {
this.props.navigation.navigate('Home');
};
My App.js
render() {
if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
return (
<AppLoading
startAsync={this._loadResourcesAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
);

Answer 1

I'm assuming that you're using React Navigation for the routing. You can pass a 2nd argument to the createStackNavigator which is the config for the Stack.
if you pass an object to the stack you can define which screen you want. So your code would look like:
const LoginStack = createStackNavigator({
Login: LoginScreen,
Home: HomeStack,
},
{
initialRouteName: 'Login',
});
And then if you use the button as you're using now it should work just fine.
So in your case you need to change your App.js to look something like this:
export default App extends Component {
componentDidMount = () => {
this.setState({
isLoadingComplete: true
})
}
render() {
// This is the loading screen?
if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
return (
<AppLoading
startAsync={this._loadResourcesAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
) else {
return <LoginStack />
}
Once your LoadingIsComplete becomes true it would render the LoginStack