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

Question

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.

Answer 1

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