diff --git a/packages/react-navigation/examples/NavigationPlayground/js/App.js b/packages/react-navigation/examples/NavigationPlayground/js/App.js
index 94798b5e..231ce14f 100644
--- a/packages/react-navigation/examples/NavigationPlayground/js/App.js
+++ b/packages/react-navigation/examples/NavigationPlayground/js/App.js
@@ -19,6 +19,7 @@ import Banner from './Banner';
import CustomTabs from './CustomTabs';
import CustomTransitioner from './CustomTransitioner';
import Drawer from './Drawer';
+import MultipleDrawer from './MultipleDrawer';
import TabsInDrawer from './TabsInDrawer';
import ModalStack from './ModalStack';
import StacksInTabs from './StacksInTabs';
@@ -43,6 +44,11 @@ const ExampleRoutes = {
description: 'Android-style drawer navigation',
screen: Drawer,
},
+ MultipleDrawer: {
+ name: 'Multiple Drawer Example',
+ description: 'Add any drawer you need',
+ screen: MultipleDrawer,
+ },
TabsInDrawer: {
name: 'Drawer + Tabs Example',
description: 'A drawer combined with tabs',
diff --git a/packages/react-navigation/examples/NavigationPlayground/js/MultipleDrawer.js b/packages/react-navigation/examples/NavigationPlayground/js/MultipleDrawer.js
new file mode 100644
index 00000000..6921fa13
--- /dev/null
+++ b/packages/react-navigation/examples/NavigationPlayground/js/MultipleDrawer.js
@@ -0,0 +1,80 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { Button, Platform, ScrollView, StyleSheet } from 'react-native';
+import { DrawerNavigator } from 'react-navigation';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import SampleText from './SampleText';
+
+const MyNavScreen = ({ navigation, banner }) => (
+
+ {banner}
+
+);
+
+const InboxScreen = ({ navigation }) => (
+
+);
+InboxScreen.navigationOptions = {
+ drawerLabel: 'Inbox',
+ drawerIcon: ({ tintColor }) => (
+
+ ),
+};
+
+const DraftsScreen = ({ navigation }) => (
+
+);
+DraftsScreen.navigationOptions = {
+ drawerLabel: 'Drafts',
+ drawerIcon: ({ tintColor }) => (
+
+ ),
+};
+
+const DrawerExample = DrawerNavigator(
+ {
+ Inbox: {
+ path: '/',
+ screen: InboxScreen,
+ },
+ Drafts: {
+ path: '/sent',
+ screen: DraftsScreen,
+ },
+ },
+ {
+ initialRouteName: 'Drafts',
+ contentOptions: {
+ activeTintColor: '#e91e63',
+ },
+ }
+);
+
+const MainDrawerExample = DrawerNavigator({
+ Drafts: {
+ screen: DrawerExample,
+ },
+}, {
+ drawerOpenRoute: 'FooDrawerOpen',
+ drawerCloseRoute: 'FooDrawerClose',
+});
+
+const styles = StyleSheet.create({
+ container: {
+ marginTop: Platform.OS === 'ios' ? 20 : 0,
+ },
+});
+
+export default MainDrawerExample;
diff --git a/packages/react-navigation/src/navigators/DrawerNavigator.js b/packages/react-navigation/src/navigators/DrawerNavigator.js
index 00ab7bd0..26916a5c 100644
--- a/packages/react-navigation/src/navigators/DrawerNavigator.js
+++ b/packages/react-navigation/src/navigators/DrawerNavigator.js
@@ -70,7 +70,11 @@ const DefaultDrawerConfig = {
const DrawerNavigator = (
routeConfigs: NavigationRouteConfigMap,
- config: DrawerNavigatorConfig = {}
+ config: DrawerNavigatorConfig = {
+ drawerOpenRoute: 'DrawerOpen',
+ drawerCloseRoute: 'DrawerClose',
+ drawerToggleRoute: 'DrawerToggle',
+ }
) => {
const mergedConfig = { ...DefaultDrawerConfig, ...config };
const {
@@ -82,6 +86,9 @@ const DrawerNavigator = (
drawerPosition,
useNativeAnimations,
drawerBackgroundColor,
+ drawerOpenRoute,
+ drawerCloseRoute,
+ drawerToggleRoute,
...tabsConfig
} = mergedConfig;
@@ -89,7 +96,7 @@ const DrawerNavigator = (
const drawerRouter = TabRouter(
{
- DrawerClose: {
+ [drawerCloseRoute]: {
screen: createNavigator(
contentRouter,
routeConfigs,
@@ -99,15 +106,15 @@ const DrawerNavigator = (
)),
},
- DrawerOpen: {
+ [drawerOpenRoute]: {
screen: () => null,
},
- DrawerToggle: {
+ [drawerToggleRoute]: {
screen: () => null,
},
},
{
- initialRouteName: 'DrawerClose',
+ initialRouteName: drawerCloseRoute,
}
);
@@ -126,6 +133,9 @@ const DrawerNavigator = (
contentComponent={contentComponent}
contentOptions={contentOptions}
drawerPosition={drawerPosition}
+ drawerOpenRoute={drawerOpenRoute}
+ drawerCloseRoute={drawerCloseRoute}
+ drawerToggleRoute={drawerToggleRoute}
/>
));
diff --git a/packages/react-navigation/src/views/Drawer/DrawerView.js b/packages/react-navigation/src/views/Drawer/DrawerView.js
index ba17a22d..32a73c52 100644
--- a/packages/react-navigation/src/views/Drawer/DrawerView.js
+++ b/packages/react-navigation/src/views/Drawer/DrawerView.js
@@ -33,6 +33,9 @@ export type DrawerViewConfig = {
drawerLockMode?: 'unlocked' | 'locked-closed' | 'locked-open',
drawerWidth?: number | (() => number),
drawerPosition?: 'left' | 'right',
+ drawerOpenRoute: string,
+ drawerCloseRoute: string,
+ drawerToggleRoute: string,
contentComponent?: React.ComponentType<*>,
contentOptions?: {},
style?: ViewStyleProp,
@@ -81,14 +84,19 @@ export default class DrawerView extends React.PureComponent<
if (
this.props.navigation.state.index !== nextProps.navigation.state.index
) {
+ const {
+ drawerOpenRoute,
+ drawerCloseRoute,
+ drawerToggleRoute,
+ } = this.props;
const { routes, index } = nextProps.navigation.state;
- if (routes[index].routeName === 'DrawerOpen') {
+ if (routes[index].routeName === drawerOpenRoute) {
this._drawer.openDrawer();
- } else if (routes[index].routeName === 'DrawerToggle') {
+ } else if (routes[index].routeName === drawerToggleRoute) {
if (this._drawer.state.drawerShown) {
- this.props.navigation.navigate('DrawerClose');
+ this.props.navigation.navigate(drawerCloseRoute);
} else {
- this.props.navigation.navigate('DrawerOpen');
+ this.props.navigation.navigate(drawerOpenRoute);
}
} else {
this._drawer.closeDrawer();
@@ -100,27 +108,28 @@ export default class DrawerView extends React.PureComponent<
_screenNavigationProp: NavigationScreenProp;
_handleDrawerOpen = () => {
- const { navigation } = this.props;
+ const { navigation, drawerOpenRoute } = this.props;
const { routes, index } = navigation.state;
- if (routes[index].routeName !== 'DrawerOpen') {
- this.props.navigation.navigate('DrawerOpen');
+ if (routes[index].routeName !== drawerOpenRoute) {
+ this.props.navigation.navigate(drawerOpenRoute);
}
};
_handleDrawerClose = () => {
- const { navigation } = this.props;
+ const { navigation, drawerCloseRoute } = this.props;
const { routes, index } = navigation.state;
- if (routes[index].routeName !== 'DrawerClose') {
- this.props.navigation.navigate('DrawerClose');
+ if (routes[index].routeName !== drawerCloseRoute) {
+ this.props.navigation.navigate(drawerCloseRoute);
}
};
_updateScreenNavigation = (
navigation: NavigationScreenProp
) => {
+ const { drawerCloseRoute } = this.props;
// $FlowFixMe there's no way type the specific shape of the nav state
const navigationState: NavigationStateRoute = navigation.state.routes.find(
- (route: *) => route.routeName === 'DrawerClose'
+ (route: *) => route.routeName === drawerCloseRoute
);
if (
this._screenNavigationProp &&
@@ -146,8 +155,9 @@ export default class DrawerView extends React.PureComponent<
};
_getNavigationState = (navigation: NavigationScreenProp) => {
+ const { drawerCloseRoute } = this.props;
const navigationState = navigation.state.routes.find(
- (route: *) => route.routeName === 'DrawerClose'
+ (route: *) => route.routeName === drawerCloseRoute
);
return navigationState;
};
@@ -168,7 +178,7 @@ export default class DrawerView extends React.PureComponent<
render() {
const DrawerScreen = this.props.router.getComponentForRouteName(
- 'DrawerClose'
+ this.props.drawerCloseRoute
);
const screenNavigation = addNavigationHelpers({