Integrate Drawer inside Stack Navigation in React Native

I wanted to use more than one navigation in a React Native app.

The documentation didn’t give a clear way to implement this.

Here is what you can do on purpose to add several types of navigation in your React Native app:

import { createStackNavigator, createDrawerNavigator } from 'react-navigation';

import * as Screens from './screens/index';

import Drawer from './components/DrawerMenu';

import getDrawerWidth from './utils/scale';

const AppStackNavigator = createStackNavigator({

  home: {

    screen: Screens.MainScreen,


  about: {

    screen: Screens.AboutScreen,



const AppNavigator = createDrawerNavigator(


    home: {

       screen: AppStackNavigator,




    contentComponent: Drawer,

    drawerWidth: getDrawerWidth,

    headerMode: 'none',



export default AppNavigator;

Do you have a project for us?Get a free quote