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

react-native, react-navigation

Solution

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)

- react-navigation/src/TypeDefinition.js,

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

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

- 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'
}

Problem

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.

Original source