drawerLockMode (#1377)

* added drawerLockMode with cabilities to update it on the fly

* fixed incorrect name on markdown for usage

* added handling if screenProps is not being used

* Fix linting error

* Use drawerLockMode instead of lockMode

* Correct docs

* Fix flow issues

* Make drawerLockMode optional

docs/api/navigators/DrawerNavigator.md

@@ -87,7 +87,6 @@ The route configs object is a mapping from route name to a route config, which t
 
 
 ### DrawerNavigatorConfig
-
 - `drawerWidth` - Width of the drawer
 - `drawerPosition` - Options are `left` or `right`. Default is `left` position.
 - `contentComponent` - Component used to render the content of the drawer, for example, navigation items. Receives the `navigation` prop for the drawer. Defaults to `DrawerItems`. For more information, see below.
@@ -172,6 +171,10 @@ String, React Element or a function that given `{ focused: boolean, tintColor: s
 
 React Element or a function, that given `{ focused: boolean, tintColor: string }` returns a React.Element, to display in drawer sidebar
 
+#### `drawerLockMode`
+
+Specifies the [lock mode](https://facebook.github.io/react-native/docs/drawerlayoutandroid.html#drawerlockmode) of the drawer. This can also update dynamically by using screenProps.lockMode on your top level router.
+
 ### Navigator Props
 
 The navigator component created by `DrawerNavigator(...)` takes the following props:

src/TypeDefinition.js

@@ -359,6 +359,7 @@ export type NavigationDrawerScreenOptions = {
     | ((options: { tintColor: ?string, focused: boolean }) => ?React.Element<
         *
       >),
+  drawerLockMode?: 'unlocked' | 'locked-closed' | 'locked-open',
 };
 
 /**

src/navigators/DrawerNavigator.js

@@ -43,6 +43,7 @@ const DrawerNavigator = (
   const {
     containerConfig,
     drawerWidth,
+    drawerLockMode,
     contentComponent,
     contentOptions,
     drawerPosition,
@@ -82,6 +83,7 @@ const DrawerNavigator = (
   )((props: *) =>
     <DrawerView
       {...props}
+      drawerLockMode={drawerLockMode}
       useNativeAnimations={useNativeAnimations}
       drawerWidth={drawerWidth}
       contentComponent={contentComponent}

src/views/Drawer/DrawerView.js

@@ -29,6 +29,7 @@ export type DrawerItem = {
 };
 
 export type DrawerViewConfig = {
+  drawerLockMode?: 'unlocked' | 'locked-closed' | 'locked-open',
   drawerWidth: number,
   drawerPosition: 'left' | 'right',
   contentComponent: ReactClass<*>,
@@ -138,11 +139,26 @@ export default class DrawerView<T: *> extends PureComponent<void, Props, void> {
     const DrawerScreen = this.props.router.getComponentForRouteName(
       'DrawerClose'
     );
+
+    const screenNavigation = addNavigationHelpers({
+      state: this._screenNavigationProp.state,
+      dispatch: this._screenNavigationProp.dispatch,
+    });
+
+    const config = this.props.router.getScreenOptions(
+      screenNavigation,
+      this.props.screenProps
+    );
+
     return (
       <DrawerLayout
         ref={(c: *) => {
           this._drawer = c;
         }}
+        drawerLockMode={
+          (this.props.screenProps && this.props.screenProps.drawerLockMode) ||
+          (config && config.drawerLockMode)
+        }
         drawerWidth={this.props.drawerWidth}
         onDrawerOpen={this._handleDrawerOpen}
         onDrawerClose={this._handleDrawerClose}