Is it Possible to navigate from createStackNavigator to createDrawerNavigator? - react-native

Question

How is this implemented
I have a stack navigator which i use for Splashscreen and Login, this works fine , now i have a drawerNavigator which is the main home of the Application, Now my worry is, Is this possible , navigating from a stack navigator (username and password) and landing at a homepage (DrawerNavigator) (home page with left side menu)
My code is looking something like this, its a very long code I know, but pls at the same time, I just started out react-native some few days ago. Does anyone think its advisable to use createStackNavigator as well as createDrawerNavigator at the same time?
import React , {Component} from 'react';
import { Platform, View, Text, Image , StyleSheet , ActivityIndicator, Dimensions, Modal, TextInput, TouchableOpacity, Alert } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { Header } from 'react-native-elements';
import { Left, Right, Icon } from 'native-base';
import { createStackNavigator } from 'react-navigation-stack';
class SplashScreen extends React.Component{
componentDidMount()
{
setTimeout(() => {
this.props.navigation.navigate('Login')
}, 4000);
}
render(){
return(
<View style={styles.Logocontainer}>
<Image
source={{uri: 'LOGO IMAGE HERE'}}
style={styles.logo} />
<ActivityIndicator size="large" color="blue" style={{margin:10}}/>
</View>
);
}
}
class Login extends React.Component{
login(){
const {username, password} = this.state;
Alert.alert('Login Successful');
this.props.navigation.navigate('Home');
}
render(){
return(
<View style={styles.Logocontainer}>
<Image
source={{uri: 'LOGO IMAGE HERE'}}
style={styles.logo} />
<Text style={{textAlign:'left',fontSize:25,color: '#009999'}}> Sign In {"\n"}</Text>
<TextInput
onChangeText={(username) => this.setState({ username })}
placeholder = "Username"
style={styles.input}
/>
<TextInput
onChangeText={(password) => this.setState({ password })}
placeholder = "Password"
style={styles.input}
secureTextEntry={true} />
<TouchableOpacity style={styles.button} onPress={this.login.bind(this)}>
<Text style={styles.loginbtn}> Login </Text>
</TouchableOpacity>
</View>
);
}
}
class Home extends React.Component{
static navigationOptions = {
drawerLabel: 'Home',
drawerIcon: ({ tintColor }) => (
<Image
source={{uri:'http://imageholder.freeasphost.net/home.png'}}
style={[styles.icon, { tintColor: tintColor }]}
/>
),
};
render()
{
return(
<View style={styles.container}>
<Header
leftComponent={<Icon name="menu" onPress={() => this.props.navigation.openDrawer()} />}
/>
<View style={styles.text}>
<Text> Welcome to Home screen</Text>
</View>
</View>
);
}
}
class Profile extends React.Component{
static navigationOptions = {
drawerLabel: 'Profile',
drawerIcon: ({ tintColor }) => (
<Image
source={{uri:'http://imageholder.freeasphost.net/profile.png'}}
style={[styles.icon, { tintColor: tintColor }]}
/>
),
};
render()
{
return(
<View style={styles.container}>
<Header
leftComponent={<Icon name="menu" onPress={() => this.props.navigation.openDrawer()} />}
/>
<View style={styles.text}>
<Text>Welcome to Profile screen</Text>
</View>
</View>
);
}
}
class Settings extends React.Component{
static navigationOptions = {
drawerLabel: 'Settings',
drawerIcon: ({ tintColor }) => (
<Image
source={{uri:'http://imageholder.freeasphost.net/settings.png'}}
style={[styles.icon, { tintColor: tintColor }]}
/>
),
};
render()
{
return(
<View style={styles.container}>
<Header
leftComponent={<Icon name="menu" onPress={() => this.props.navigation.openDrawer()} />}
/>
<View style={styles.text}>
<Text>Welcome to Settings Screen</Text>
</View>
</View>
);
}
}
const myStackNavigator = createStackNavigator({
SplashScreen:{
screen:SplashScreen
},
Login:{
screen:Login
},
});
const MyDrawerNavigator = createDrawerNavigator({
Home:{
screen:Home
},
Settings:{
screen:Settings
},
Profile:{
screen:Profile
},
});
const MyApp = createAppContainer(MyDrawerNavigator);
const MyPrologue = createAppContainer(myStackNavigator);
export default class App extends Component {
render() {
return (
<MyPrologue/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 24,
height: 24,
},
container: {
flex: 1
},
text:{
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
Logocontainer:{
flex: 1,
justifyContent :"center",
alignItems:"center"
},
logo:{
width:150,
height:150
},
button:{
width:300,
padding:10,
backgroundColor:'#009999',
alignItems: 'center'
},
input: {
width: 300,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: '#009999',
marginBottom: 10,
},
loginbtn:{
color:'#ffff'
},
});

Answer 1

For this cases i would suggest to use a SwitchNavigator, that renders pretty much like a web application. When you are passing from one screen the previous screen gets unmounted. Only the focused screen will be mounted.
I'll keep your current StackNavigator if you wanted to use it for the header:
First of all you need to import the SwitchNavigator:
import { createSwitchNavigator } from 'react-navigation';
Remove const MyApp = createAppContainer(MyDrawerNavigator); and change
const MyPrologue = createAppContainer(myStackNavigator);
to
const MyPrologue = createAppContainer(switchNavigator );
where switchNavigator is :
const switchNavigator = createSwitchNavigator({
Authentication: {
screen:myStackNavigator
},
DrawerNavigator: {
screen: MyDrawerNavigator
},
},
{
initialRouteName: "Authentication"
})
Then your login function can navigate doing :
this.props.navigation.navigate("DrawerNavigator")
You can read about SwitchNavigator at : https://reactnavigation.org/docs/en/switch-navigator.html#docsNav