Drawer navigator in react-native using react-navigation 4.x - react-native

Question

I want to create a drawer navigator using react navigation 4.x in react native, but not getting drawer menu in left side of the screen. Here is my code for the navigation component.
It includes three screens First,Home and Login that i want to show in drawer menu.
import {
createSwitchNavigator,
createAppContainer,
//createDrawerNavigator,
// createBottomTabNavigator,
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';
import FirstScreen from '../screen/FirstScreen';
import HomeScreen from '../screen/HomeScreen';
import LoginScreen from '../screen/LoginScreen';
const AppStack = createStackNavigator ({
First: {screen: FirstScreen},
// Dashboard: {screen: AppDrawerNavigator},
Login: {screen: LoginScreen},
Home: {screen: HomeScreen},
})
const AppDrawerNavigator = createDrawerNavigator({
Dashboard: {screen:AppStack}
});
const switchNavigator = createSwitchNavigator({
First: {screen: FirstScreen},
Dashboard: {screen: AppDrawerNavigator},
Login: {screen: LoginScreen},
Home: {screen: HomeScreen},
});
const AppNavigator = createAppContainer(switchNavigator);
export default AppNavigator;

Answer 1

If you want to keep your AppStack as stackNavigator then you have to create custom drawer navigator and need to pass it on createDrawerNavigator.
So first create CustomDrawer.js as below :
import React, { Component } from 'react';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
import { NavigationActions } from 'react-navigation';
class CustomDrawer extends Component {
constructor(props) {
super(props);
this.state = {
menus: [
key: 'First', title: 'First', screen: 'FirstScreen',
key: 'Login', title: 'Login', screen: 'LoginScreen',
key: 'Home', title: 'Home', screen: 'HomeScreen'
]
};
}
navigateToScreen = (route) => {
const navigateAction = NavigationActions.navigate({
routeName: route
});
this.props.navigation.dispatch(navigateAction);
this.props.navigation.closeDrawer();
}
render() {
return (
<ScrollView style={{flex: 1}}>
{
this.state.menus.map((menu) => (
<TouchableOpacity key={menu.key} onPress={() => this.navigateToScreen(menu.screen)}>
<Text>{menu.title}</Text>
</TouchableOpacity>
))
}
</ScrollView>
);
}
}
export default CustomDrawer;
Then on in your AppNavigator.js pass CustomDrawer as contentComponent in createDrawerNavigator as below :
const DrawerNavigator = createDrawerNavigator({
Dashboard: {
screen: AppStack,
}
}, {
contentComponent: CustomDrawer, // Pass here
// others props
drawerBackgroundColor: 'rgba(255,255,255,.9)',
overlayColor: 'rgba(0,0,0,0.5)',
contentOptions: {
activeTintColor: '#fff',
activeBackgroundColor: '#6b52ae',
},
});
If you want more style you can done in CustomDrawer.js.

Answer 2

you are returning the switch navigator, try this way , embed switch-navigator object with drawer-navigator object and return drawer-navigator object. refer below,
const AppDrawerNavigator = createDrawerNavigator({
First: {screen: FirstScreen},
Login: {screen: LoginScreen},
Home: {screen: HomeScreen},
switchNavigator: switchNavigator
});
const AppNavigator = createAppContainer(AppDrawerNavigator);
export default AppNavigator;