CODEWITHSUNDEEP
react-nativereact-navigation
Nithin C
Nithin C

Reputation: 215

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

This is my drawerNavigation :

const DashboardStack = StackNavigator({
        Dashboard: {
            screen: Dashboard
        },
    }, {
        headerMode: 'screen',
    });

const DetailsformStack = StackNavigator({
    Detailsform: {
        screen: Detailsform
    },
}, {
    headerMode: 'none'
});

const OtpStack = StackNavigator({
    Otp: {
        screen: Otp,
        drawer: {
            lockMode: 'locked-closed'
        }
    },
    }, {
        headerMode: 'none'
});

const MobilenumberStack = StackNavigator({
    Mobilenumber: {
        screen: Mobilenumber
    },
}, {
    headerMode: 'none'
});

const DrawerviewStack = StackNavigator({
    Drawerview: {
        screen: Drawerview
    },
}, {
    headerMode: 'none'
});

const ExamsheetStack = StackNavigator({
    Examsheet: {
        screen: Examsheet
    },
}, {
    headerMode: 'none'
});

const TopicStack = StackNavigator({
    Topic: {
        screen: Topic
    },
}, {
    headerMode: 'screen'
});

const DrawerStack = DrawerNavigator({
    Otp: {
        screen: OtpStack,
    },
    Dashboard: {
        screen: DashboardStack,
    },
    Detailsform: {
        screen: DetailsformStack,
    },
    Mobilenumber: {
        screen: MobilenumberStack,
    },
    Drawerview: {
        screen: DrawerviewStack,
    },
    Examsheet: {
        screen: ExamsheetStack,
    },
    Topic: {
        screen: TopicStack,
    }
}, {
    headerMode: 'none',
    initialRouteName: 'Mobilenumber',
    contentComponent: Drawerview,

    lockMode: 'locked-closed'
});

export default DrawerStack

How can i add lock mode lockMode to specific page.

i tried adding drawer: {lockMode: 'locked-closed'} in both components page and drawerNavigation page but it doesnt work.

Does react navigation have a lock mode feature or do i need to disable the swipe gesture?

If there is no feature then let me know how to disable swipe gesture for a particular component or page.

Upvotes: 10

Views: 12806

Answers (5)

Aqeeb Imtiaz Harun
Aqeeb Imtiaz Harun

Reputation: 167

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! :)

Upvotes: 0

Vinay Singh
Vinay Singh

Reputation: 408

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>
);

Upvotes: 3

Ajith
Ajith

Reputation: 2666

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

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

Upvotes: 1

Nerius Jok
Nerius Jok

Reputation: 3227

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,
    };
}

Upvotes: 5

Val
Val

Reputation: 22797

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',
  1. 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'
}

Upvotes: 8

Related Questions