diff --git a/packages/react-navigation/src/views/Drawer/DrawerSidebar.js b/packages/react-navigation/src/views/Drawer/DrawerSidebar.js index ac8c2def..387928d5 100644 --- a/packages/react-navigation/src/views/Drawer/DrawerSidebar.js +++ b/packages/react-navigation/src/views/Drawer/DrawerSidebar.js @@ -4,6 +4,7 @@ import React, { PureComponent } from 'react'; import { StyleSheet, View } from 'react-native'; import withCachedChildNavigation from '../../withCachedChildNavigation'; +import NavigationActions from '../../NavigationActions'; import type { NavigationScreenProp, @@ -44,8 +45,14 @@ class DrawerSidebar extends PureComponent { const DrawerScreen = this.props.router.getComponentForRouteName( 'DrawerClose' ); + const { [routeKey]: childNavigation } = this.props.childNavigationProps; return DrawerScreen.router.getScreenOptions( - this.props.childNavigationProps[routeKey], + childNavigation.state.index !== undefined // if the child screen is a StackRouter then always show the screen options of its first screen (see #1914) + ? { + ...childNavigation, + state: { ...childNavigation.state, index: 0 }, + } + : childNavigation, this.props.screenProps ); }; @@ -78,7 +85,10 @@ class DrawerSidebar extends PureComponent { _onItemPress = ({ route, focused }: DrawerItem) => { this.props.navigation.navigate('DrawerClose'); if (!focused) { - this.props.navigation.navigate(route.routeName); + const subAction = route.index !== undefined && route.index !== 0 // if the child screen is a StackRouter then always navigate to its first screen (see #1914) + ? NavigationActions.navigate({ routeName: route.routes[0].routeName }) + : undefined; + this.props.navigation.navigate(route.routeName, undefined, subAction); } };