how to Implement Stack navigation & drawer navigation together

Question

Aim- I want to create an app with 3 navigation (2- types)

react-navigation": "^3.3.2

• Authloading - basically a loading page which checks for a token in async storage and decide whether to redirect to AuthStack or
  AppStack.
  • AuthStack - it has login and signup pages .
  • AppStack - contaons some pages which opens after loging e.g dashboard, profile etc.

What i achieved so far -

I can perform login , sign out, checking at app load if a user is already logged in or not .

What remains- when user comes at Home / Dashboard i want to have an Side-Menu / Drawer to open on sliding and at button press.

i have tried React navigation 3 docs but I think i am too new to understand that, Index.js-

import React from 'react';
import { createStackNavigator, createSwitchNavigator, createAppContainer, 
createDrawerNavigator } from 'react-navigation';
import Signup from './Screens/Authentication/SignUp';
import SignInScreen from './Screens/Authentication/Login';
import HomeScreen from './Screens/DashBoard/Home';
import AuthLoadingScreen from './Screens/Authentication/AuthLoadingScreen';

const AppStack = createStackNavigator({
  Home: HomeScreen,
  //  Other: OtherScreen
});

const AuthStack = createStackNavigator({
  SignIn: SignInScreen,
  SignUp: Signup
}, {
    headerMode: 'none',
    navigationOptions: {
    headerVisible: false,
   }
  });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

const MyDrawerNavigator = createDrawerNavigator({
  App: AppStack
});

const MyApp = createAppContainer(MyDrawerNavigator);

But i am not able to open a drawer Thank you

my index.js file-

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

 AppRegistry.registerComponent(appName, () => App);

my package.Json file-

{
  "name": "SM",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.0",
    "react-native-gesture-handler": "^1.1.0",
    "react-navigation": "^3.3.2"
  },
  "devDependencies": {
    "@babel/core": "7.3.4",
    "@babel/runtime": "7.3.4",
    "babel-jest": "24.5.0",
    "jest": "24.5.0",
    "metro-react-native-babel-preset": "0.53.0",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

Try this

import React from 'react';
import { createStackNavigator, createSwitchNavigator, createAppContainer, 
createDrawerNavigator } from 'react-navigation';
import Signup from './Screens/Authentication/SignUp';
import SignInScreen from './Screens/Authentication/Login';
import HomeScreen from './Screens/DashBoard/Home';
import AuthLoadingScreen from './Screens/Authentication/AuthLoadingScreen';

const AppStack = createStackNavigator({
  Home: MyDrawerNavigator,
  //  Other: OtherScreen
});

const AuthStack = createStackNavigator({
  SignIn: SignInScreen,
  SignUp: Signup
}, {
  headerMode: 'none',
  navigationOptions: {
  headerVisible: false,
 }
});

export default createAppContainer(createSwitchNavigator(
 {
   AuthLoading: AuthLoadingScreen,
   App: AppStack,
   Auth: AuthStack,
 },
 {
    initialRouteName: 'AuthLoading',
 }
));

const MyDrawerNavigator = createDrawerNavigator({
  Home: HomeScreen
});