Toggling a drawer from header icon using react-navigation - react-native

Question

I am new to react-native and react-navigation.
Required Screen: A home page with a header (Thumbnail + title) , two tabs and a drawer that toggles onPress of the thumbnail.
Please check my code:
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {Icon, Button} from 'native-base';
const util = require('util');
import { TabNavigator, StackNavigator, DrawerNavigator, NavigationActions } from 'react-navigation';
import FirstScreen from './tabs/FirstScreen';
import SecondScreen from './tabs/SecondScreen';
import Profile from './Profile';
import SearchScreen from './tabs/SearchScreen';
const DrawerScreens = DrawerNavigator({
Profile: {screen: Profile}
},{
drawerPosition: 'left',
drawerWidth: 150
});
// A drawer navigator
const TabScreens= TabNavigator({
First: {screen: FirstScreen},
Second: {screen: SecondScreen}
});
// Started with a tab navigator to register two tabs
const MenuButton =({navigation})=>{
return(
<View>
<TouchableOpacity onPress={()=>(navigation.navigate('DrawerToggle'))}>
<Icon name="person" size= {20}/>
</TouchableOpacity>
</View>)};
export const StackScreens= StackNavigator({
Draw: {screen: DrawerScreens},
// Drawer navigator as a screen
Display: {screen: TabScreens,
// Making the tabnavigator as a screen
navigationOptions: ({navigation})=>({
title: 'Welcome',
headerLeft: <MenuButton navigation={navigation} />
})
},
},{
initialRouteName: 'Display'
});
On pressing of the thumbnail the TabScreens navigates to the DrawerScreens (since that is how i coded). I want to make it toggle. Can someone please help me.

Answer 1

Here's some general ideas on how to structure your navigator properly.
What react-navigation version are you using?
Try changing your MenuButton helper method to this and see if it helps
if (navigation.state.index === 0) {
navigation.navigate('DrawerOpen')
} else {
navigation.navigate('DrawerClose')
}