Stack navigation and Drawer navigation in React Native

Question

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:

Root.js:

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;

DrawerNavigator.js:

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 }) => {
    return <MenuDrawer navigation={navigation} />;
  }
};
export const DrawerNavigator = createDrawerNavigator(
  {
    MyProduct: {
      screen: MyProduct
    },
    Profile: {
        screen: Profile
      },
      Main: {
        screen: Main
      },
      Home: {
        screen: Home
      },
  },
  {initialRouteName:'Main'},
  DrawerConfig
);

export default createAppContainer(DrawerNavigator);

App.js:

/**
 * 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: () => React$Node = () => {
  return (
      // <DrawerNavigator /> /// here the drawer works fine but stack navgation not working
      <Root /> ////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;

Answer 1

You can try it in this way.

const DrawerNavigators = createDrawerNavigator({
  //Drawer Optons and indexing
  Main: {
    screen: HomeActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Dashboard',
    }
  }
});

const NonDrawerNavigators = createStackNavigator({
    TaskView: {
        screen: TaskView,
        navigationOptions: {
            title: 'Task',
            headerStyle: {
            backgroundColor: '#FF9800',
            },
            headerTintColor: '#fff'
        }
    },
    TeamView: {
        screen: TeamView,
        navigationOptions: {
            title: 'Team',
            headerStyle: {
                backgroundColor: '#FF9800',
            },
            headerTintColor: '#fff'
        }
    }
}, {headerLayoutPreset: 'center'});

const AppNavigator = createStackNavigator({
    drawerStack: {
        screen: DrawerNavigators,
        navigationOptions: {
            header: null
        }
    },
    nonDrawerStack: {
        screen: NonDrawerNavigators,
        navigationOptions: {
            header: null
        }
    }
});

export default createAppContainer(createSwitchNavigator({
    SplashScreen: SplashScreen,
    loginStack: LoginNavigator,
    homeStack: AppNavigator
    }, {
       initialRouteName: 'SplashScreen'
   })
);