How to Lock drawer for specific page using drawerNavigation [react-navigation][react-native]

Question

This is my drawerNavigation :

const DashboardStack = StackNavigator({
        Dashboard: {
            screen: Dashb         


        

Answer 1

martnu gave a patch for this, but not yet merged. I tried to patch it manually and works perfectly.

It works with only change of two files: (reference to this page https://github.com/react-community/react-navigation/pull/793/files)

1. react-navigation/src/TypeDefinition.js,

copy below code into NavigationDrawerScreenOptions, right above NavigationRouteConfigMap, put into declaration of NavigationDrawerScreenOptions:

drawerLockMode?: 'unlocked' | 'locked-close' | 'locked-open',

2. react-navigation/src/views/DrawerView.js,

copy below code into render() right before function return:

const options = this.props.router.getScreenOptions(
    addNavigationHelpers({
        state: this._screenNavigationProp.state,
        dispatch: this._screenNavigationProp.dispatch,
    }),
    this.props.screenProps,
);

and copy below code into returning <DrawLayout> props, right after ref:

drawerLockMode={options.drawerLockMode || 'unlocked'}

Usage:

you can disable the drawer on any screen by just adding:

navigationOptions: {
  drawerLockMode: 'locked-closed'
}

and to enable drawer:

navigationOptions: {
  drawerLockMode: 'unlocked'
}

Answer 2

Now, things have been changed in react-navigation version-5.

swipeEnabled is used to lock the drawer in Drawer.Screen inside the Drawer.Navigator

Visit https://reactnavigation.org/docs/drawer-navigator/#swipeenabled

Please see the below code:

import { createDrawerNavigator } from "@react-navigation/drawer";
import React from "react";
import { Sidebar } from "./SideBar";
import { ScreenWithDrawerEnabled } from "./ScreenWithDrawerEnabled";
import { ScreenWithDrawerDisabled } from "./ScreenWithDrawerDisabled";

const Drawer = createDrawerNavigator();

export const DashboardDrawerNavigator = () => (
  <Drawer.Navigator
    initialRouteName={ScreenWithDrawerEnabled}
    drawerPosition="left"
    drawerType="slide"
    drawerContent={props => <Sidebar {...props} />}
  >
    <Drawer.Screen
      name={'ScreenWithDrawerEnabled'}
      component={ScreenWithDrawerEnabled}
    />
    <Drawer.Screen
      options={({ route, navigation }) => {
        return {
          swipeEnabled: false,
        };
      }}
      name={'ScreenWithDrawerDisabled'}
      component={ScreenWithDrawerDisabled}
    />

  </Drawer.Navigator>
);

Answer 3

I also have faced this on react-navigation v2. as written in drawer docs the solution can be to define navigation options right after routes initialization and it forbids to display Drawer navigator in defined routes.

My routes looks like

const RoutesStack = StackNavigator({
    Authentication: {
        screen: Authentication,
    },
    {...}
});

And Options added, bellow routes.

RoutesStack.navigationOptions = ({ navigation }) => {
    name = (navigation.state.index !== undefined ? navigation.state.routes[navigation.state.index] : navigation.state.routeName)
    let drawerLockMode = 'locked-closed'
    if (name.routeName != 'Authentication' && name.routeName != 'Signup') {
        drawerLockMode = 'unlocked'
    }

    return {
        drawerLockMode,
    };
}

Answer 4

Ans of @ajith helped me!

This is what my code looks like:

const DrawerStack = createDrawerNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions: ({ navigation }) => ({
                drawerLockMode: 'locked-closed',
            })
            },
        Dashboard: { screen: Dashboard},
        .....
    }, 
DrawerNavigatorConfig)

Hope this helps! :)

Answer 5

You can show Drawer navigato for specific page by adding the following

.......
  Dashboard :{
      screen: DashboardStack,
      navigationOptions: ({ navigation }) => ({
        drawerLockMode: 'unlocked',
      })
  }
.......