Allow the routes outputted by DrawerView.Items to be overridden (#1039)

docs/api/navigators/DrawerNavigator.md

@@ -130,10 +130,13 @@ const styles = StyleSheet.create({
 
 ### `contentOptions` for `DrawerItems`
 
+- `items` - the array of routes, can be modified or overridden
+- `activeItemKey` - key identifying the active route
 - `activeTintColor` - label and icon color of the active label
 - `activeBackgroundColor` - background color of the active label
 - `inactiveTintColor` - label and icon color of the inactive label
 - `inactiveBackgroundColor` - background color of the inactive label
+- `onItemPress(route)` - function to be invoked when an item is pressed
 - `style` - style object for the content section
 - `labelStyle` - style object to overwrite `Text` style inside content section, when your label is a string
 

src/views/Drawer/DrawerNavigatorItems.js

@@ -9,18 +9,22 @@ import type {
   NavigationScreenProp,
   NavigationState,
   NavigationAction,
+  NavigationRoute,
   Style,
 } from '../../TypeDefinition';
-import type { DrawerScene } from './DrawerView.js';
+import type { DrawerScene, DrawerItem } from './DrawerView.js';
 
 type Props = {
   navigation: NavigationScreenProp<NavigationState, NavigationAction>,
+  items: Array<NavigationRoute>,
+  activeItemKey?: string,
   activeTintColor?: string,
   activeBackgroundColor?: string,
   inactiveTintColor?: string,
   inactiveBackgroundColor?: string,
   getLabel: (scene: DrawerScene) => ?(React.Element<*> | string),
   renderIcon: (scene: DrawerScene) => ?React.Element<*>,
+  onItemPress: (info: DrawerItem) => void,
   style?: Style,
   labelStyle?: Style,
 };
@@ -29,19 +33,22 @@ type Props = {
  * Component that renders the navigation list in the drawer.
  */
 const DrawerNavigatorItems = ({
-  navigation,
+  navigation: { state, navigate },
+  items,
+  activeItemKey,
   activeTintColor,
   activeBackgroundColor,
   inactiveTintColor,
   inactiveBackgroundColor,
   getLabel,
   renderIcon,
+  onItemPress,
   style,
   labelStyle,
 }: Props) => (
   <View style={[styles.container, style]}>
-    {navigation.state.routes.map((route: *, index: number) => {
-      const focused = navigation.state.index === index;
+    {items.map((route: NavigationRoute, index: number) => {
+      const focused = activeItemKey === route.key;
       const color = focused ? activeTintColor : inactiveTintColor;
       const backgroundColor = focused
         ? activeBackgroundColor
@@ -53,8 +60,7 @@ const DrawerNavigatorItems = ({
         <TouchableItem
           key={route.key}
           onPress={() => {
-            navigation.navigate('DrawerClose');
-            navigation.navigate(route.routeName);
+            onItemPress({ route, focused });
           }}
           delayPressIn={0}
         >

src/views/Drawer/DrawerSidebar.js

@@ -12,12 +12,13 @@ import type {
   NavigationRouter,
   NavigationDrawerScreenOptions,
   NavigationState,
+  NavigationStateRoute,
   Style,
 } from '../../TypeDefinition';
 
-import type { DrawerScene } from './DrawerView';
+import type { DrawerScene, DrawerItem } from './DrawerView';
 
-type Navigation = NavigationScreenProp<NavigationRoute, NavigationAction>;
+type Navigation = NavigationScreenProp<NavigationStateRoute, NavigationAction>;
 
 type Props = {
   router: NavigationRouter<
@@ -74,15 +75,27 @@ class DrawerSidebar extends PureComponent<void, Props, void> {
     return null;
   };
 
+  _onItemPress = ({ route }: DrawerItem) => {
+    this.props.navigation.navigate('DrawerClose');
+    this.props.navigation.navigate(route.routeName);
+  };
+
   render() {
     const ContentComponent = this.props.contentComponent;
+    const { state } = this.props.navigation;
     return (
       <View style={[styles.container, this.props.style]}>
         <ContentComponent
           {...this.props.contentOptions}
           navigation={this.props.navigation}
+          items={state.routes}
+          activeItemKey={
+            state.routes[state.index] && state.routes[state.index].key
+          }
+          screenProps={this.props.screenProps}
           getLabel={this._getLabel}
           renderIcon={this._renderIcon}
+          onItemPress={this._onItemPress}
           router={this.props.router}
         />
       </View>

src/views/Drawer/DrawerView.js

@@ -23,6 +23,11 @@ export type DrawerScene = {
   tintColor?: string,
 };
 
+export type DrawerItem = {
+  route: NavigationRoute,
+  focused: boolean,
+};
+
 export type DrawerViewConfig = {
   drawerWidth: number,
   drawerPosition: 'left' | 'right',