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;