Stack Navigator drawer icon click drawer not opening but when slide it opening

Question

I want the drawer to open when i click on the left icon; here is my code :

const stackNav = StackNavigator({
  Main : {
    screen: MainScreen,
    navigationOptions: ({navigation}) => ({
      title: "Easy Billing",
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.navigate("DrawerOpen")}>
          <IOSIcon name="ios-menu" size={30} onPress={() => navigation.navigate("DrawerOpen")} />
        </TouchableOpacity>
      ),
      headerStyle: { } 
    })
  }
});

Answer 1

Try : import { DrawerActions, createDrawerNavigator } from 'react-navigation';

and then :

const stackNav = createDrawerNavigator({
  Main : {
    screen: MainScreen,
    navigationOptions: ({navigation}) => ({
      title: "Easy Billing",
      headerLeft: (
        <TouchableOpacity onPress={() => { navigation.dispatch(DrawerActions.openDrawer()); }}>
          <IOSIcon name="ios-menu" size={30} onPress={() => { navigation.dispatch(DrawerActions.openDrawer()); }} />
        </TouchableOpacity>
      ),
      headerStyle: { } 
    })
  }
});

You can't display the drawer while you are using a stackNavigator; that is why i used the createDawerNavigator variable. Notive that the DrawerNavigator and the StackNavigator are deprecated, use createDrawerNavigator and createStackNavigator instead.

Hope my answer helps!

Answer 2

The defaults for opening, closing and toggle the drawer are:

this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();
this.props.navigation.toggleDrawer();

you can use these in the onPress prop of a button. like so, <Button onPress={() => { this.props.navigation.openDrawer(); }} /> <Button onPress={() => { this.props.navigation.openDrawer(); }} />