Today I Learned

This project exists to catalogue the sharing & accumulation of knowledge as it happens day-to-day. Posts have a 200-word limit, and posting is open to any Rocketeer as well as selected friends of JetRockets. We hope you enjoy learning along with us.

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;
Looking for help? At JetRockets, our JavaScript experts launch scalable, performant apps on the Web, Android and iOS. Contact us and find out how we can help you.