How to add a NavigationDrawer in react native? - react-native

Question

I know this question has been asked before, but for my situation I can't find an answer. I am helping make an app with a friend and I am tasked with making a DrawerNavigator for one of our screens. I am using react native for this.
Here is my render function inside the class of one of my screens
render() {
return (
<Container>
<Header title='BarMate'/>
<View style={styles.container}>
<MapView
style={{ alignSelf: 'stretch', height: 750}}
region={this.state.mapRegion}
onRegionChange={this._handleMapRegionChange}
/>
</View>
</Container>
);
}
The problem is that when I try to add an icon and button to the Header, it just doesn't show up. Here is the code after I added the icon
render() {
return (
<Container>
<Header title='BarMate'>
<Left>
<Icon name="ios-menu" onPress={() =>
this.props.navigation.navigate('DrawerOpen')} />
</Left>
</Header>
<View style={styles.container}>
<MapView
style={{ alignSelf: 'stretch', height: 750}}
region={this.state.mapRegion}
onRegionChange={this._handleMapRegionChange}
/>
</View>
</Container>
);
}
However, this code does work if instead of importing Container and Header from a custom made file like this:
import { Container } from '../components/Container'
import { Header } from '../components/Header'
I import them like this:
import {Container, Header, Icon, Button, Content, Left } from 'native-base'
I'm a beginner in react native so there might just be something here I'm overlooking, but any help would be appreciated. Here is what's in the files Container and Header my friend made.
//Header file
import React from 'react';
import { View, Text, StatusBar } from 'react-native';
import { Icon, Button, Content, Left} from 'native-base'
import styles from './styles';
const Header = ({title}) => (
<View style={styles.container}>
<StatusBar translucent={false} barStyle="light-content" />
<Text style={styles.title}>{title}</Text>
</View>
);
export default Header;
//Container file
import React from 'react';
import PropTypes from 'prop-types'; // ES6
import { View } from 'react-native';
import styles from './styles';
const Container = ({ children }) => (
<View style={styles.container}>
{children}
</View>
);
Container.propTypes = {
children: PropTypes.any,
}
export default Container;