Route.js

import React, { Component } from "react";
import { View, TouchableOpacity } from "react-native";
import {
  createDrawerNavigator,
  createStackNavigator,
  createAppContainer,
  DrawerActions,
  createSwitchNavigator
} from "react-navigation";
import Icon from "react-native-vector-icons/Ionicons";

// Screens
import SignIn from "../screens/SignIn";
import SignUp from "../screens/signup";
import Home from "../screens/Home";
import HomeOrderDetails from "../screens/HomeOrderDetails";
import Splash from "../screens/Splash";
import Profile from "../screens/Profile";
import Orders from "../screens/Orders";

const AuthStackNavigator = createStackNavigator({
  Splash: {
    screen: Splash,
    navigationOptions: {
      header: null
    }
  },
  SignIn: {
    screen: SignIn,
    navigationOptions: () => ({
      // header: null
      title: "Sign In",
      headerLeft: null,
      headerTintColor: "#2F98AE",
      headerStyle: {
        borderBottomColor: "white"
      },
      headerTitleStyle: {
        color: "#2F98AE",
        // textAlign: "center",
        flex: 1,
        elevation: 0,
        fontSize: 25
        // justifyContent: "center"
      }
    })
  },
  SignUp: {
    screen: SignUp,
    navigationOptions: () => ({
      // header: null
      title: "Sign Up",
      headerLeft: null,
      headerTintColor: "#2F98AE",
      headerStyle: {
        borderBottomColor: "white"
      },
      headerTitleStyle: {
        color: "#2F98AE "
        // textAlign: "center",
      }
    })
  }
});

const HomeStack = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: ({ navigation }) => ({
      // headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      title: "Home",
      headerRight: <View />,
      headerLeft: (
        // <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
        <TouchableOpacity
          onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
        >
          <Icon
            name="ios-menu"
            size={40}
            style={{ margin: 10 }}
            color="#2F98AE"
          />
        </TouchableOpacity>
      ),
      // headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerTintColor: "#2F98AE",
      headerStyle: {
        borderBottomColor: "white"
      },
      headerTitleStyle: {
        color: "#2F98AE",
        // textAlign: "center",
        flex: 1,
        elevation: 0,
        fontSize: 25
        // justifyContent: "center"
      }
    })
  },
  HomeOrderDetails: {
    screen: HomeOrderDetails,
    navigationOptions: ({ navigation }) => ({
      // headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      title: "Order Details",
      headerRight: <View />,
      headerLeft: (
        // <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
        <TouchableOpacity
          onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
        >
          <Icon
            name="ios-menu"
            size={40}
            style={{ margin: 10 }}
            color="#2F98AE"
          />
        </TouchableOpacity>
      ),
      // headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerTintColor: "#2F98AE",
      headerStyle: {
        borderBottomColor: "white"
      },
      headerTitleStyle: {
        color: "#2F98AE",
        // textAlign: "center",
        flex: 1,
        elevation: 0,
        fontSize: 25
        // justifyContent: "center"
      }
    })
  }
});

const ProfileStack = createStackNavigator({
  Profile: {
    screen: Profile,
    navigationOptions: ({ navigation }) => ({
      headerLeft: (
        // <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
        <TouchableOpacity
          onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
        >
          <Icon
            name="ios-menu"
            size={40}
            style={{ margin: 10 }}
            color="#2F98AE"
          />
        </TouchableOpacity>
      ),
      headerRight: <View />,
      title: "Profile",
      headerTintColor: "#2F98AE",
      headerStyle: {
        borderBottomColor: "white"
      },
      headerTitleStyle: {
        color: "#2F98AE",
        // textAlign: "center",
        flex: 1,
        elevation: 0,
        fontSize: 25
        // justifyContent: "center"
      }
    })
  }
});
const OrdersStack = createStackNavigator({
  Orders: {
    screen: Orders,
    navigationOptions: ({ navigation }) => {
      console.log(navigation);

      const header = {
        headerLeft: (
          <TouchableOpacity
            onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
          >
            <Icon
              name="ios-menu"
              size={40}
              style={{ margin: 10 }}
              color="#2F98AE"
            />
          </TouchableOpacity>
        ),
        headerRight: <View />,
        title: "My Orders",
        headerTintColor: "#2F98AE",
        headerStyle: {
          borderBottomColor: "white"
        },
        headerTitleStyle: {
          color: "#2F98AE",
          // textAlign: "center",
          flex: 1,
          elevation: 0,
          fontSize: 25
          // justifyContent: "center"
        }
      };
      if (navigation.state.params)
        return navigation.state.params.showHeader ? header : { header: null };
      else return header;
      // else return { header: null };
    }
  }
});

const DrawerNavigator = createDrawerNavigator({
  HomeStack: {
    screen: HomeStack,
    navigationOptions: {
      drawerLabel: "Home",
      drawerIcon: () => <Icon name="ios-home" size={25} color="#2F98AE" />
    }
  },
  OrdersStack: {
    screen: OrdersStack,
    navigationOptions: {
      drawerLabel: "My Orders",
      drawerIcon: () => <Icon name="ios-paper" size={25} color="#2F98AE" />
    }
  },
  ProfileStack: {
    screen: ProfileStack,
    navigationOptions: {
      drawerLabel: "Profile",
      drawerIcon: () => <Icon name="ios-contact" size={27} color="#2F98AE" />
    }
  }
});

const Navigations = createSwitchNavigator({
  Authloading: Splash,
  Auth: AuthStackNavigator, // the Auth stack
  App: DrawerNavigator // the App stack
});

export default (MyApp = createAppContainer(Navigations));

// export default MyApp = createAppContainer(AuthStackNavigator);