drawer.js

import { StackNavigator, DrawerNavigator, TabNavigator } from 'react-navigation';

import MyHomeScreen from '../Home';
import Profile from '../Profile';
import Settings from '../Settings';
import Imp from '../Imp';

const TouchableImage = props =>
	<TouchableOpacity onPress={props.onPress}>
		{/* <Image source={props.source} /> */}
	</TouchableOpacity>;

const StackView = StackNavigator({
	Tabs: {
		screen: TabNav
	}
});

const TabNav = TabNavigator({
	Home: {
		screen: MyHomeScreen
	},
	Settings: {
		screen: Settings
	}
});

const drawerMenus = [
	{
		name: 'Home',
		route: 'Home',
		icon: 'ios-home-outline'
	},
	{
		name: 'Profile',
		route: 'Profile',
		icon: 'ios-person'
	},
	{
		name: 'Imp',
		route: 'Imp',
		icon: 'ios-person'
	}
];

class DrawerView extends React.Component {
	render() {
		const { navigation } = this.props;
		const drawerMenu = drawerMenus.map(menu => {
			return (
				<TouchableOpacity key={menu.name} onPress={() => navigation.navigate(menu.route)}>
					<Text
						style={{
							fontSize: 16,
							marginBottom: 10,
							paddingRight: 10,
							color: '#7C7877'
						}}
     >
						<Icon name={menu.icon} size={30} color="#7C7877" margin="10px 20px" />
						{menu.name}
					</Text>
				</TouchableOpacity>
			);
		});
		return (
			<View>
				<View style={{ backgroundColor: 'red', padding: 100 }} />
				<View
					style={{
						padding: 10
					}}
    >
					{drawerMenu}
				</View>
			</View>
		);
	}
}

const DrawerStack = DrawerNavigator(
	{
		Home: {
			screen: StackView
		}
	},
	{
		contentComponent: DrawerView,
		drawerWidth: 280
	}
);

export default DrawerStack;