How to add a drawer navigator React-Navigation v4 - react-native

Question

I have this code for creating a drawer navigator. But I can't open my drawer through left to right slide. Can anyone please help me to solve my problem. I am new to react-native. I am using react-navigation v4 and react-navigation-drawer for the drawer navigator.
const EMBotomTabScreen = createDrawerNavigator ({
SUMMARY: {
screen : EMNavigator,
navigationOptions :{
animationEnabled : 'true',
// headerLeft : <HamburgerIcon navigationProps={ navigation }/>,
swipeEnabled: true,
tabBarOptions: {
activeTintColor: '#369841',
//activeBackgroundColor : '#f2f2f2',
inactiveTintColor : 'gray',
inactiveBackgroundColor : '#adc1b8',
borderRightWidth:2,
borderRightColor:'blue',
labelStyle: {
fontSize: 13,
},
style: {
backgroundColor: '#f2f2f2',
// borderRightWidth:2,
// borderRightColor:'blue'
},
indicatorStyle: {
backgroundColor: 'red',
},
},
tabStyle: {
backgroundColor: 'green',
borderRightWidth:2,
borderRightColor:'blue'
},
indicatorStyle : {
backgroundColor : 'red'
},
tabBarIcon: ({ focused, tintColor }) => {
const iconName = `ios-desktop`;
return <Image source={require('../assets/aaaaa.png')} size={27} color={tintColor} />;
},
}
},
DEMAND: {
screen : EMDemandNavigator,
navigationOptions : {
tabBarOptions: {
activeTintColor: '#369841',
// activeBackgroundColor : '#f2f2f2',
inactiveTintColor : 'gray',
inactiveBackgroundColor : '#adc1b8',
labelStyle: {
fontSize: 13,
},
style: {
backgroundColor: '#f2f2f2',
},
},
tabBarIcon: ({ focused, tintColor }) => {
const iconName = `ios-cloud`;
return <Image source={require('../assets/aaaaaaa.png')} size={27} color={tintColor} />;
},
}
},
ALARM: {
screen : EMAlarmNavigator,
navigationOptions : {
animationEnabled : 'true',
swipeEnabled: true,
tabBarOptions: {
activeTintColor: '#369841',
//activeBackgroundColor : '#f2f2f2',
inactiveTintColor : 'gray',
inactiveBackgroundColor : '#adc1b8',
borderRightWidth:2,
borderRightColor:'blue',
labelStyle: {
fontSize: 13,
},
style: {
backgroundColor: '#f2f2f2',
// borderRightWidth:2,
// borderRightColor:'blue'
},
indicatorStyle: {
backgroundColor: 'red',
},
},
tabStyle: {
backgroundColor: 'green',
borderRightWidth:2,
borderRightColor:'blue'
},
indicatorStyle : {
backgroundColor : 'red'
},
tabBarIcon: ({ focused, tintColor }) => {
const iconName = `bell-o`;
return <Icons name={iconName} size={27} color={tintColor} />;
},
}
}

Answer 1

You can get an idea from the below given code.
import Splash from '../Splash/Splash';
import Home from '../screens/Home';
import DrawerScreen from '../screens/DrawerScreen'
//And many more
import {createStackNavigator,
createSwitchNavigator,
createAppContainer,
createDrawerNavigator} from 'react-navigation';
const AppStack = createDrawerNavigator({
Home:Home,
},{
contentComponent: DrawerScreen,
defaultNavigationOptions: {
drawerWidth: Dimensions.get('window').width - 120,
},
});
const AppNavigator = createStackNavigator({
Splash:Splash,
Login:Login,
SignUp:SignUp },,{
defaultNavigationOptions: {
header: null,
gesturesEnabled: false
},
initialRouteName: "Splash");
const AppContainer = createAppContainer(AppNavigator);
Whenever you want to open the drawer like on click of the drawer icon. then add these line in the onPress definition.
this.props.navigation.openDrawer();