How Can I add Hamburger icon menu in React-Native - react-native

Question

I am fairly new to Navigation in react-native but i have been able to pick up few things here now i want o add the Hamburger icon to it to do a Proper Menu bar. Since i am fairly new to this, I need help in every way.
My code Looks something like this
import React , {Component} from 'react';
import { View, Text, Image , StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';
class Home extends React.Component{
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,
},
});
Like i wanted to use some drawer navigation uri to do it but how to start is the main worry, hence I wanted to know how and what i must do.

Answer 1

I'll always prefer making your own custom component rather than any library.
It's simple, first download icon like this or your icon and create a view box, and then on the image add touchable opacity so that when a user clicks, it will expand
will turn into this
Now steps are like that,
renderUnExpanded=()=>(
<View>
<TouchableOpacity onPress = {this.flipState} >
<Icon />
</TouchableOpacity>
<View>
)
renderExpanded = () =>(
<View>
<TouchableOpacity onPress = {this.flipState} >
<Icon />
</TouchableOpacity>
<ProfileIcon />
<SignoutIcon />
<View>
)
now flipState will be a function to toggle expanded state,
flipState =() => {
this.setState({optionVisible:!this.state.optionVisible})
}
and now in render function , show accordingly to state,
render(){
return(
{this.state.optionVisible?this.renderExpanded():this.renderUnExpanded()}
)
}
hope its clear, otherwise ask any doubts