createDrawerNavigator Is Not Working React Native - react-native

Question

I tried lots of things to open drawer but nothing works for me. I do not understand how to combine navigators like I have, one is createStackNavigator and second is createDrawerNavigator. Please check my code if anything goes wrong so let me know otherwise provide me a link or code to implement. thanks
App.js
import React, { Component } from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import LoginScreen from './src/screens/LoginScreen';
import SignupScreen from './src/screens/SignupScreen';
import DashboardScreen from './src/screens/DashboardScreen';
import CaseListingScreen from './src/screens/CaseListingScreen';
import { createDrawerNavigator, DrawerItems } from "react-navigation-drawer";
import SideBar from './src/SideBar';
const DrawerNavigator = createDrawerNavigator({
Home: {
screen: DashboardScreen,
},
Cases: {
screen: CaseListingScreen,
navigationOptions: {
header: null
}
}
},
{
initialRouteName: 'Home',
}
);
const AppNavigator = createStackNavigator({
Dashboard: {
screen: DashboardScreen,
navigationOptions: {
header: null
}
},
Cases: {
screen: CaseListingScreen,
navigationOptions: {
header: null
}
},
Login: {
screen: LoginScreen,
navigationOptions: {
header: null
}
},
Signup: {
screen: SignupScreen,
navigationOptions: {
header: null
}
}
});
export default createAppContainer(AppNavigator, DrawerNavigator);
DashboardScreen.js
export default class DashboardScreen extends Component {
static navigationOption = {
drawerLabel: 'Home'
}
render() {
return (
<Container>
<Appbar.Header theme={{ colors: { primary: '#b33f3f' } }}>
<Appbar.Action icon="menu" onPress={() => this.props.navigation.navigate('DrawerOpen')} />
<Appbar.Content
title="Manage My Case"
subtitle="Dashboard"
/>
</Appbar.Header>
</Container>
);
}
}

Answer 1

In your export default createAppContainer(AppNavigator, DrawerNavigator); , you should have the drawerNavigator as the app container and not along with App navigator.
createAppContainer contains only 1 arguement , so pass DrawerNavigator in the app container, and if you want to use the stackNavigator inside the drawer navigator just create the drawernavigator as ,
const AppNavigator = createStackNavigator({
Dashboard: {
screen: DashboardScreen,
navigationOptions: {
header: null
}
},
Cases: {
screen: CaseListingScreen,
navigationOptions: {
header: null
}
},
Login: {
screen: LoginScreen,
navigationOptions: {
header: null
}
},
Signup: {
screen: SignupScreen,
navigationOptions: {
header: null
}
}
});
const DrawerNavigator = createDrawerNavigator({
Home: {
screen: DashboardScreen,
},
Cases: {
screen: CaseListingScreen,
navigationOptions: {
header: null
}
},
AppScreen:{
screen:AppNavigator // this is new , im adding stacknavigaoter to your drawer.
}
},
{
initialRouteName: 'Home',
}
);
export default createAppContainer(DrawerNavigator);
Hope that helps, otherwise feel free for doubts.

Answer 2

Mention your drawer navigator inside the stacknavigator just like below,
const myDrawerNavigator = createDrawerNavigator(
{
Home: { screen: YOUR_HOME },
},
{
contentComponent: SideMenu,
drawerWidth: Dimensions.get('window').width * 0.75
}
)
const RootStack = createStackNavigator({
SplashScreen: {
screen: SplashScreen,
navigationOptions: {
header: null,
},
},
SomeName: {
screen: myDrawerNavigator ,
navigationOptions: {
header: null,
},
},
})
Modify the above code as per your screen name and it will works fine...
I hope this helps thanks... :)