How to Lock drawer for specific page using drawerN

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

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

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

Answer 2

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 3

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 4

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