React Drawer Navigation menu icon is not showing - react-native

Question

Please note that this is my route configuration with the "Stack, Drawer and Tab Navigation"
Stack and the tab navigation is working fine. But the drawer icon is not showing at all and the drawer is working only If I slide the window manually. How to show the drawer icon and use it to open the drawer window? Please help me to sort this out.
import React from "react"
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createDrawerNavigator } from 'react-navigation-drawer'
import Icon from 'react-native-vector-icons/Feather'
import HomeScreen from './screens/home/HomeScreen'
import ControlScreen from './screens/controls/ControlScreen'
import MoreScreen from './screens/more/MoreScreen'
import SignUpScreen from './screens/signup/SignUpScreen'
import AboutScreen from './screens/about/AboutScreen'
const TabContainer = createBottomTabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: ({ tintColor, focused }) => <Icon name="home" size={20} color={`${focused ? tintColor : '#404040'}`} />,
}
},
Controls: {
screen: ControlScreen,
navigationOptions: {
tabBarIcon: ({ tintColor, focused }) => <Icon name="sliders" size={20} color={`${focused ? tintColor : '#404040'}`} />
}
},
More: {
screen: MoreScreen,
navigationOptions: {
tabBarIcon: ({ tintColor, focused }) => <Icon name="more-horizontal" size={20} color={`${focused ? tintColor : '#404040'}`} />
}
},
},{
tabBarposition: 'bottom',
swipeEnabled: false,
tabBarOptions: {
activeTintColor: '#069',
inactiveTintColor: '#404040',
labelStyle: {
fontSize: 14,
paddingTop: 0,
paddingBottom: 0
},
style:{
borderTopWidth: 1,
borderTopColor:'#333333',
position: 'absolute',
bottom: 0,
left: 0
},
animationEnabled: false,
tabStyle: {
paddingBottom: 15,
paddingTop: 0,
height: 75,
marginBottom: 0,
},
}
}
)
const StackContainer = createStackNavigator({
TabContainer,
},{
defaultNavigationOptions: {
headerShown: false
}
})
const MainDrawerNavigator = createDrawerNavigator({
Home: {
screen: StackContainer,
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
title: 'Home',
navigationOptions: {
drawerIcon: ({ tintColor }) => (
<Icon name="home" size={20} color={'#404040'} />
),
}
},
SignUp: {
screen: SignUpScreen,
navigationOptions: {
drawerIcon: ({ tintColor }) => (
<Icon name="user" size={20} color={'#404040'} />
),
}
},
About: {
screen: AboutScreen,
navigationOptions: {
drawerIcon: ({ tintColor }) => (
<Icon name="alert-circle" size={20} color={'#404040'} />
),
}
},
},
{
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
navigationOptions: {
drawerLockMode: 'locked-closed',
},
drawerPosition: 'left',
headerStyle: { backgroundColor: '#E73536' },
headerTintColor: 'white',
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
},
)
export default createAppContainer(MainDrawerNavigator)

Answer 1

You need to include your drawerNavigator inside stackNavigator and you can provide the default navigation options there.
I had edited your code check this:
import React from "react"
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createDrawerNavigator } from 'react-navigation-drawer';
import Icon from 'react-native-vector-icons/Feather'
import HomeScreen from './screens/Example'
import ControlScreen from './screens/Main'
import MoreScreen from './screens/Sample'
import SignUpScreen from './screens/login'
import AboutScreen from './screens/login'
const TabContainer = createBottomTabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: ({ tintColor, focused }) => <Icon name="home" size={20} color={`${focused ? tintColor : '#404040'}`} />,
}
},
Controls: {
screen: ControlScreen,
navigationOptions: {
tabBarIcon: ({ tintColor, focused }) => <Icon name="sliders" size={20} color={`${focused ? tintColor : '#404040'}`} />
}
},
More: {
screen: MoreScreen,
navigationOptions: {
tabBarIcon: ({ tintColor, focused }) => <Icon name="more-horizontal" size={20} color={`${focused ? tintColor : '#404040'}`} />
}
},
},{
tabBarposition: 'bottom',
swipeEnabled: false,
tabBarOptions: {
activeTintColor: '#069',
inactiveTintColor: '#404040',
labelStyle: {
fontSize: 14,
paddingTop: 0,
paddingBottom: 0
},
style:{
borderTopWidth: 1,
borderTopColor:'#333333',
position: 'absolute',
bottom: 0,
left: 0
},
animationEnabled: false,
tabStyle: {
paddingBottom: 15,
paddingTop: 0,
height: 75,
marginBottom: 0,
},
}
}
)
const MainDrawerNavigator = createDrawerNavigator({
Home: {
screen: TabContainer,
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
title: 'Home',
navigationOptions: {
drawerIcon: ({ tintColor }) => (
<Icon name="home" size={20} color={'#404040'} />
),
}
},
SignUp: {
screen: SignUpScreen,
navigationOptions: {
drawerIcon: ({ tintColor }) => (
<Icon name="user" size={20} color={'#404040'} />
),
}
},
About: {
screen: AboutScreen,
navigationOptions: {
drawerIcon: ({ tintColor }) => (
<Icon name="alert-circle" size={20} color={'#404040'} />
),
}
},
},{
initialRouteName:"Home"
}
)
const StackContainer = createStackNavigator({
MainDrawerNavigator,
}, {
defaultNavigationOptions: ({ navigation }) => {
return {
headerTitle:"Welcome!",
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
onPress={() => navigation.openDrawer()}
name="menu"
size={30}
/>
)
};
}
})
export default createAppContainer(StackContainer)
Hope this helps!