title: Stack navigation and Drawer navigation in React Native
body: <p>In my app, I have buttons navigate to other screens and I have a drawer have buttons as well,
  I did the drawer and it works fine and also did stack navigation and also works fine, but in my app.js when I define one of them (drawer or stack) the other not working, I will provide my code, I think the problem is that I declared createAppContainer for both of them separately, How I do combine between them?
  Here is my code: </p>
  
  <p>Root.js:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { createAppContainer } from "react-navigation";
  import { createStackNavigator } from "react-navigation-stack";
  
  import Main from "./Main.js";
  import Signup from "./Signup.js";
  import Home from "./Home.js";
  import CardDetails from "./CardDetails";
  import Profile from "./Profile";
  
  const MainNavigator = createStackNavigator(
    {
      Main: { screen: Main },
      Profile: { screen: Profile },
      Signup: { screen: Signup },
      Home: { screen: Home },
      CardDetails: { screen: CardDetails },
    },
    {
      initialRouteName: "Main",
      navigationOptions: {
        header: null
      },
      initialRouteParams: {
        navigationMode: true
      }
    }
  );
  
  const Root = createAppContainer(MainNavigator);
  
  export default Root;
  </code></pre>
  
  <p>DrawerNavigator.js:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import { Platform, Dimensions } from "react-native";
  import { createAppContainer } from "react-navigation";
  import { createDrawerNavigator } from "react-navigation-drawer";
  
  import MyProduct from "../Containers/MyProduct";
  import Home from "../Containers/Home";
  import Profile from "../Containers/Profile";
  import Main from "../Containers/Main";
  import Signup from "../Containers/Signup.js";
  import MenuDrawer from "../Components/MenuDrawer";
  
  const { width, height } = Dimensions.get("window");
  
  const DrawerConfig = {
    drawerWidth: width * 0.83,
    contentComponent: ({ navigation }) =&gt; {
      return &lt;MenuDrawer navigation={navigation} /&gt;;
    }
  };
  export const DrawerNavigator = createDrawerNavigator(
    {
      MyProduct: {
        screen: MyProduct
      },
      Profile: {
          screen: Profile
        },
        Main: {
          screen: Main
        },
        Home: {
          screen: Home
        },
    },
    {initialRouteName:'Main'},
    DrawerConfig
  );
  
  export default createAppContainer(DrawerNavigator);
  </code></pre>
  
  <p>App.js:</p>
  
  <pre class="lang-js prettyprint-override"><code>/**
   * Sample React Native App
   * https://github.com/facebook/react-native
   *
   * @format
   * @flow
   */
  
  import React from "react";
  import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar
  } from "react-native";
  // import { Provider } from 'react-redux';
  
  import {
    Header,
    LearnMoreLinks,
    Colors,
    DebugInstructions,
    ReloadInstructions
  } from "react-native/Libraries/NewAppScreen";
  
  
  import Main from './src/Containers/Main.js'
  import Login from './src/Containers/Login.js'
  import Signup from './src/Containers/Signup.js'
  import Home from './src/Containers/Home.js'
  import CardDetails from './src/Containers/CardDetails'
  import AddMobile from './src/Containers/AddMobile'
  import Profile from './src/Containers/Profile'
  import MyProduct from './src/Containers/MyProduct'
  import Root from './src/Containers/Root'
  import DrawerNavigator from './src/Navigation/DrawerNavigator';
  import Navigators from './src/Navigation/Navigators';
  import MenuButton from "./src/Components/MenuButton.js";
  
  const App: () =&gt; React$Node = () =&gt; {
    return (
        // &lt;DrawerNavigator /&gt; /// here the drawer works fine but stack navgation not working
        &lt;Root /&gt; ////here stacknavigations work fine but I got an error when I press drawer icon. Error screenshot pasted in the end.
    );
  };
  
  const styles = StyleSheet.create({
  
  });
  
  export default App;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/bwwIe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bwwIe.png" alt="Error Screenshot"></a></p>