How to lock a drawer for a 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'
});

default export DrawerStack

How to add lock mode lockModeto a specific page.

I tried adding   drawer: {lockMode: 'locked-closed'} drawerNavigation on the components page and the page, but it does not work.

Does navigation mode support lock mode or do I need to disable swipe gestures?

If there is no function, let me know how to disable gesture gestures for a specific component or page.

Answer 1

martnu , . .

: ( https://github.com/react-community/react-navigation/pull/793/files)

1. - /SRC/TypeDefinition.js,

NavigationDrawerScreenOptions, NavigationRouteConfigMap, NavigationDrawerScreenOptions:

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

2. - /SRC/ /DrawerView.js,

render() :

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

<DrawLayout> ref:

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

Usage:

, :

navigationOptions: {
  drawerLockMode: 'locked-closed'
}

:

navigationOptions: {
  drawerLockMode: 'unlocked'
}

Answer 2

- v2. , Drawer .

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

.

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 3

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

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