How to add a Drawer Inside Stack Navigation in React Navigation

Question

I am working on a Practice Project like Login/Register Application and I am using Stack Navigation from react-navigations and it's working perfect,

Now when User Login's he should be redirected to the Dashboard Screen where I want a Drawer to the right side of the header "I also added a screenshot" and I created the Dashboard Screen also in Stack Navigation I don't know How I can add that Drawer inside the Stack Navigation I just want Drawer on my Dashboard Screen so anyone who can help with that? Thanks

App.js (Where I added all Stack Screens)

    import React from 'react';

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

    import HomeScreen from './screens/HomeScreen';
    import LoginScreen from './screens/LoginScreen';
    import RegisterScreen from './screens/RegisterScreen';
    import Dashboard from './screens/Dashboard';

    const StackNavigation = createStackNavigator({
      HomeStack: HomeScreen,
      LoginStack: LoginScreen,
      RegisterStack: RegisterScreen,
      DashboardStack: Dashboard,

    }, {
        initialRouteName: 'HomeStack',
      });

      const DrawerNav = createDrawerNavigator({
        DashboardStack: Dashboard,
      })


    export default class App extends React.Component {
      render() {
        return (
          <StackNavigation />
        );
      }
    }

Dashboard.js

    import React from 'react';
    import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';

    import Icon from 'react-native-vector-icons/FontAwesome';

    export default class Dashboard extends React.Component {

        static navigationOptions = {

            headerTitle: 'Dashboard',
            headerLeft: null,

            headerTitleStyle: {
                flex: 1,
                color: '#fff',
                textAlign: 'center',
                alignSelf: 'center',
                fontWeight: 'normal',
            },

            headerStyle: {
                backgroundColor: '#b5259e',
            },
        }

Answer 1

For those looking for the solution in react-navigation 5.X, you can do it like this:

Drawer Navigator

const ProductListWithDrawer = () => {
 return (
  <Drawer.Navigator initialRouteName="ProductList">
   <Drawer.Screen name="ProductList" component={screens.ProductList} />
   <Drawer.Screen name="ProductDetail" component={screens.ProductDetailScreen} />
  </Drawer.Navigator>
  );
 };

Stack Navigator (should be wrapped inside a Navigation Container)

<Stack.Navigator initialRouteName="Dashboard" screenOptions={{ headerShown: false }}>
  <Stack.Screen name="Dashboard" component={screens.Dashboard} />
  <Stack.Screen name="Loading" component={screens.Loading} />
  <Stack.Screen name="Chat" component={screens.Chat} />
  <Stack.Screen name="ProductListWithDrawer" component={ProductListWithDrawer} /> //our drawer
</Stack.Navigator>

Basically, this should get the work done. One more thing that could be the issue here is while navigating to those screens inside drawer navigator with params. In that case, it can be done like this:

navigation.navigate("ProductListWithDrawer", {
              screen: "ProductList",
              params: { user: "Alex"},
            });

This has also been explained in Nesting navigators.

Answer 2

Showing drawer from right side.

Add a drawer Position parameter when create Drawer Navigator.

const DrawerNav = createDrawerNavigator({
  DashboardStack: Dashboard, 
},
{
  drawerPosition: 'right'
});

Call DrawerNavigation from header's button.

Add a button to the header for toggleDrawer in Dashboard.js. You can get the navigation instance as below in navigationOptions;

class Dashboard extends React.Component {
  static navigationOptions = ({navigation, navigationOptions}) => {
    return {
      headerTitle: 'Dashboard@@',
      headerLeft: <Text>Left</Text>,
      headerRight: (
        <Button onPress = {navigation.toggleDrawer}
        title="Menu"
        color="#fff">
          <Text>Menu</Text>
        </Button>
      ),
      headerTitleStyle: {
        flex: 1,
        color: '#fff',
        textAlign: 'center',
        alignSelf: 'center',
        fontWeight: 'normal',
      },

      headerStyle: {
        backgroundColor: '#b5259e',
      },
    }
  }

You could change button to Touchable Opacity or another one.

Wrap AuthStackNavigation and DrawerNavigation using another Navigator.

Wrap your navigation using createSwitchNavigation or another and export.

// App.js

import React from 'react';

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

import HomeScreen from './srcs/screens/Home';
import Dashboard from './srcs/screens/Dashboard';

const AuthStackNavigation = createStackNavigator({
  HomeStack: HomeScreen,
  LoginStack: HomeScreen,
  RegisterStack: HomeScreen,
}, {
  initialRouteName: 'HomeStack',
})

const DashboardStack = createStackNavigator({ // For header options
  Dashboard: Dashboard
})

const DrawerNav = createDrawerNavigator({
  DashboardStack: DashboardStack,
  SecondScreen: Dashboard, // You should use another screen.
  ThirdScreen: Dashboard,
})

const MainNavigation = createSwitchNavigator({
  HomeDrawer: DrawerNav,
  AuthStack: AuthStackNavigation, // You will use this.props.navigation.replace('HomeDrawer') after login process.
})

export default MainNavigation // Stack, Drawer, Switch naviagtions return react component.