Non-tech founder’s guide to choosing the right software development partner Download Ebook
Home>Blog>Integrate drawer inside stack navigation in react native

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;



Discover More Reads

Recent Projects

We take pride in creating applications that drive growth and evolution, from niche startups to international companies.

Do you have a tech idea?

Let’s talk!

By submitting this form, you agree with JetRockets’ Privacy Policy

If you prefer email, write to us at hello@jetrockets.com