diff --git a/packages/react-navigation/docs/api/navigators/DrawerNavigator.md b/packages/react-navigation/docs/api/navigators/DrawerNavigator.md index 15eb5830..4ece70e2 100644 --- a/packages/react-navigation/docs/api/navigators/DrawerNavigator.md +++ b/packages/react-navigation/docs/api/navigators/DrawerNavigator.md @@ -68,6 +68,12 @@ To open and close drawer, navigate to `'DrawerOpen'` and `'DrawerClose'` respect this.props.navigation.navigate('DrawerOpen'); // open drawer this.props.navigation.navigate('DrawerClose'); // close drawer ``` +If you would like to toggle the drawer you can navigate to `'DrawerToggle'`, and this will choose which navigation is appropriate for you given the drawers current state. + +```js +// fires 'DrawerOpen'/'DrawerClose' accordingly +this.props.navigation.navigate('DrawerToggle'); +``` ## API Definition @@ -181,7 +187,7 @@ The navigator component created by `DrawerNavigator(...)` takes the following pr screenProps={/* this prop will get passed to the screen components and nav options as props.screenProps */} /> ``` - + ### Nesting `DrawerNavigation` - + Please bear in mind that if you nest the DrawerNavigation, the drawer will show below the parent navigation. diff --git a/packages/react-navigation/src/navigators/DrawerNavigator.js b/packages/react-navigation/src/navigators/DrawerNavigator.js index 134ac681..3b9eee80 100644 --- a/packages/react-navigation/src/navigators/DrawerNavigator.js +++ b/packages/react-navigation/src/navigators/DrawerNavigator.js @@ -63,6 +63,9 @@ const DrawerNavigator = ( DrawerOpen: { screen: () => null, }, + DrawerToggle: { + screen: () => null, + }, }, { initialRouteName: 'DrawerClose', diff --git a/packages/react-navigation/src/views/Drawer/DrawerView.js b/packages/react-navigation/src/views/Drawer/DrawerView.js index da9a69ef..b8c15942 100644 --- a/packages/react-navigation/src/views/Drawer/DrawerView.js +++ b/packages/react-navigation/src/views/Drawer/DrawerView.js @@ -63,6 +63,12 @@ export default class DrawerView extends PureComponent { const { routes, index } = nextProps.navigation.state; if (routes[index].routeName === 'DrawerOpen') { this._drawer.openDrawer(); + } else if (routes[index].routeName === 'DrawerToggle') { + if (this._drawer.state.drawerShown) { + this.props.navigation.navigate('DrawerClose'); + } else { + this.props.navigation.navigate('DrawerOpen'); + } } else { this._drawer.closeDrawer(); }