Hamburger icon refuses to show in react-native - react-native

Question

So i started to play with Navigation in React-native and i am really having fun with it, Except i ran into deadlocks with using the navigation in a way. Now here is what the worry is.
I want the header displayed using the hamburger icon. So the user can click the Hamburger Icon and it shows the menu on the Left where the user can select and perform any task, i tried it and it never shows up.
My code looks thus :
App.js
import React , {Component} from 'react';
import { View, Text, Image , StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';
import HamburgerIconMain from './HamburgerIcon/hamburgerIconMain';
class Home extends React.Component{
static navigationOptions = () => {
return{
headerLeft:<HamburgerIconMain/>
};
};
static navigationOptions = {
drawerLabel: 'Home',
drawerIcon: ({ tintColor }) => (
<Image
source={{uri:'http://imageholder.freeasphost.net/home.png'}}
style={[styles.icon, { tintColor: tintColor }]}
/>
),
};
render()
{
return(
<View>
<Text> Welcome to Home screen</Text>
</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>
<Text>Welcome to Profile screen</Text>
</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>
<Text>Welcome to Settings Screen</Text>
</View>
);
}
}
const MyDrawerNavigator = createDrawerNavigator({
Home:{
screen:Home
},
Settings:{
screen:Settings
},
Profile:{
screen:Profile
},
});
const MyApp = createAppContainer(MyDrawerNavigator);
export default class App extends Component {
render() {
return (
<MyApp/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 24,
height: 24,
},
});
Then the code for the Hamburger icon looks like this
import React, {Component} from 'react';
import { withNavigation } from 'react-navigation';
import { TouchableOpacity } from "react-native-gesture-handler";
import Icon from 'react-native-vector-icons/SimpleLineIcons';
class HamburgerIconMain extends React.Component{
render(){
return(
<TouchableOpacity>
style={{
width: 44,
height: 44,
marginLeft: 20
}}
onPress={()=>{
this.props.navigation.openDrawer();
}}>
<Icon name='menu' size={20} color='black'/>
</TouchableOpacity>
);
}
}
export default withNavigation(HamburgerIconMain);
The worry I have now is , the header with the Hamburger Icon never shows up. How and what can i do to Resolve this

Answer 1

https://reactnavigation.org/docs/en/next/stack-navigator.html#docsNav
According to docs, you need to createStackNavigator.
Or, you can create your own header for Home screen with <HamburgerIconMain/> component.
Something like this.
render(){
return(
<View style={{flex:1, backgroundColor: 'green'}}>
<View style={{backgroundColor: 'yellow', height: 40, justifyContent: 'center'}}>
<Text> Header: add hamburger icon here </Text>
</View>
<View style={{flex: 1, backgroundColor: 'grey', justifyContent: 'center', alignItems: 'center'}}>
<Text> Welcome to Home screen</Text>
</View>
</View>
);
}
But such solution good just in case, if you want to see header just on one screen.