I'm brand new to react and currently working on a project where navigation is done through a hamburger menu. I haven't encountered any errors in my code, but for some reason, the hamburger menu icon isn't displaying as expected. Interestingly, when I swipe across the screen, the menu does pop up.
Here's the snippet of my Portfolio.js file:
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import HamburgerIcon from '../assets/HamburgerIcon';
export default class Portfolio extends Component {
static navigationOptions = () => {
return {
headerLeft: <HamburgerIcon/>
};
};
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>Green Screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
},
title: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
As for the HamburgerIcon.js code:
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 HamburgerIcon extends 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(HamburgerIcon);
Update:
The NavigationBar.js contains the following code:
import { createDrawerNavigator} from 'react-navigation-drawer';
import { createAppContainer } from "react-navigation";
import HomePage from '../Pages/HomePage';
import Portfolio from '../Pages/Portfolio';
const HamburgerNavigation = createDrawerNavigator(
{
Portfolio: Portfolio,
HomePage: {
screen: HomePage,
}
},
{
initialRouteName: 'HomePage',
}
);
export default createAppContainer(HamburgerNavigation);
If anyone can assist me in figuring out how to display the icon properly, that would be greatly appreciated!