Release 2.5.4

Adds getNavigation to web exports (#4551 )
Prevent flicker in header when header is null on initial mount (when using default header sizes) (#4577 )
2026-02-03 09:18:49 +08:00 · 2018-06-27 15:24:34 -07:00 · 2018-06-27 13:34:45 -07:00 · 2018-06-26 13:27:43 -07:00 · 2018-06-26 11:24:23 -07:00 · 2018-06-25 15:41:56 -07:00
59 changed files with 3854 additions and 2448 deletions
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -25,7 +25,7 @@ Bugs with react-navigation must be reproducible *without any external libraries

 ### How to reproduce

- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repoistory as that is outside of the scope of Rect Navigation.
+- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repoistory as that is outside of the scope of React Navigation.
 - Either re-create the bug on [Snack](https://snack.expo.io) or link to a GitHub repository with code that reproduces the bug.
 - Explain how to run the example app and any steps that we need to take to reproduce the issue from the example app.

--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,17 +1,21 @@
 Please provide enough information so that others can review your pull request:

+## Motivation
+
 Explain the **motivation** for making this change. What existing problem does the pull request solve?

-Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise split it.
+## Test plan

-**Test plan (required)**
-
-Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.
+Demonstrate the code is solid. Example: the exact commands you ran and their output, screenshots / videos if the pull request changes UI.

 Make sure you test on both platforms if your change affects both platforms.

 The code must pass tests.

-**Code formatting**
+## Code formatting

-Look around. Match the style of the rest of the codebase.
+Look around. Match the style of the rest of the codebase. Run `yarn format` before committing.
+
+## Changelog
+
+Add an entry under the "Unreleased" heading in [CHANGELOG.md](https://github.com/react-navigation/react-navigation/blob/master/CHANGELOG.md#unreleased) which explains your change.
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -0,0 +1,45 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [2.5.4] - [2018-06-27](https://github.com/react-navigation/react-navigation/releases/tag/2.5.4)
+### Fixed
+- Header no longer sometimes flashes for 1 frame when using `header: null` on initial route of stack with floating header.
+- Export `createSwitchNavigator` in react-navigation.web.js
+
+## [2.5.3] - [2018-06-23](https://github.com/react-navigation/react-navigation/releases/tag/2.5.3)
+### Fixed
+- `setParams` applies to the navigation object it is called on even if that is the navigation object for a navigation view (more details in https://github.com/react-navigation/react-navigation/issues/4497)
+
+## [2.5.2] - [2018-06-23](https://github.com/react-navigation/react-navigation/releases/tag/2.5.2)
+### Fixed
+- Update react-navigation-drawer to fix regression in toggleDrawer
+
+## [2.5.1] - [2018-06-22](https://github.com/react-navigation/react-navigation/releases/tag/2.5.1)
+### Fixed
+- `transitionConfig` in stack navigator no longer passes incorrect `fromTransitionProps` when navigating back
+
+## [2.5.0] - [2018-06-22](https://github.com/react-navigation/react-navigation/releases/tag/2.5.0)
+### Changed
+- Refactor internals to make it play more nicely with web
+
+### Fixed
+- `const defaultGetStateForAction = SwitchBasedNavigator.router.getStateForAction` no longer throws error.
+- Updated react-navigation-drawer to 0.4.1 which should fix issues related to automatically closing drawer when changing routes.
+
+## [2.4.1] - [2018-06-21](https://github.com/react-navigation/react-navigation/releases/tag/2.4.1)
+### Changed
+- Improved examples
+
+[Unreleased]: https://github.com/react-navigation/react-navigation/compare/2.5.4...HEAD
+[2.5.4]: https://github.com/react-navigation/react-navigation/compare/2.5.3...2.5.4
+[2.5.3]: https://github.com/react-navigation/react-navigation/compare/2.5.2...2.5.3
+[2.5.2]: https://github.com/react-navigation/react-navigation/compare/2.5.1...2.5.2
+[2.5.1]: https://github.com/react-navigation/react-navigation/compare/2.5.0...2.5.1
+[2.5.0]: https://github.com/react-navigation/react-navigation/compare/2.4.1...2.5.0
+[2.4.1]: https://github.com/react-navigation/react-navigation/compare/2.4.0...2.4.1
--- a/examples/NavigationPlayground/app.json
+++ b/examples/NavigationPlayground/app.json
@@ -13,14 +13,15 @@
    },
    "sdkVersion": "27.0.0",
    "entryPoint": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
-    "packagerOpts": {
-      "assetExts": [
-        "ttf",
-        "mp4"
-      ]
-    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
    "ios": {
+      "bundleIdentifier": "com.reactnavigation.example",
      "supportsTablet": true
+    },
+    "android": {
+      "package": "com.reactnavigation.example"
    }
  }
 }
--- a/examples/NavigationPlayground/js/App.js
+++ b/examples/NavigationPlayground/js/App.js
@@ -26,6 +26,7 @@ import TabsInDrawer from './TabsInDrawer';
 import ModalStack from './ModalStack';
 import StacksInTabs from './StacksInTabs';
 import StacksOverTabs from './StacksOverTabs';
+import StacksOverTopTabs from './StacksOverTopTabs';
 import StacksWithKeys from './StacksWithKeys';
 import InactiveStack from './InactiveStack';
 import StackWithCustomHeaderBackImage from './StackWithCustomHeaderBackImage';
@@ -105,6 +106,10 @@ const ExampleInfo = {
    name: 'Stacks over Tabs',
    description: 'Nested stack navigation that pushes on top of tabs',
  },
+  StacksOverTopTabs: {
+    name: 'Stacks with non-standard header height',
+    description: 'Tab navigator in stack with custom header heights',
+  },
  StacksWithKeys: {
    name: 'Link in Stack with keys',
    description: 'Use keys to link between screens',
@@ -137,7 +142,12 @@ const ExampleRoutes = {
  //   screen: MultipleDrawer,
  // },
  StackWithCustomHeaderBackImage: StackWithCustomHeaderBackImage,
-  StackWithHeaderPreset: StackWithHeaderPreset,
+  ...Platform.select({
+    ios: {
+      StackWithHeaderPreset: StackWithHeaderPreset,
+    },
+    android: {},
+  }),
  StackWithTranslucentHeader: StackWithTranslucentHeader,
  TabsInDrawer: TabsInDrawer,
  CustomTabs: CustomTabs,
@@ -146,6 +156,7 @@ const ExampleRoutes = {
  StacksWithKeys: StacksWithKeys,
  StacksInTabs: StacksInTabs,
  StacksOverTabs: StacksOverTabs,
+  StacksOverTopTabs: StacksOverTopTabs,
  LinkStack: {
    screen: SimpleStack,
    path: 'people/Jordan',
--- a/examples/NavigationPlayground/js/SimpleTabs.js
+++ b/examples/NavigationPlayground/js/SimpleTabs.js
@@ -165,7 +165,7 @@ const SimpleTabs = createBottomTabNavigator(
  },
  {
    tabBarOptions: {
-      activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
+      activeTintColor: '#e91e63',
    },
  }
 );
--- a/examples/NavigationPlayground/js/StacksOverTopTabs.js
+++ b/examples/NavigationPlayground/js/StacksOverTopTabs.js
@@ -0,0 +1,142 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { View, ScrollView, StatusBar, StyleSheet } from 'react-native';
+import {
+  SafeAreaView,
+  createStackNavigator,
+  createMaterialTopTabNavigator,
+} from 'react-navigation';
+import { Constants } from 'expo';
+import { MaterialTopTabBar } from 'react-navigation-tabs';
+
+import SampleText from './SampleText';
+import { Button } from './commonComponents/ButtonWithMargin';
+
+const HEADER_HEIGHT = 64;
+
+const MyNavScreen = ({ navigation, banner, statusBarStyle }) => (
+  <ScrollView>
+    <SafeAreaView forceInset={{ horizontal: 'always' }}>
+      <SampleText>{banner}</SampleText>
+      <Button
+        onPress={() => navigation.navigate('Profile', { name: 'Jordan' })}
+        title="Open profile screen"
+      />
+      <Button
+        onPress={() => navigation.navigate('NotifSettings')}
+        title="Open notifications screen"
+      />
+      <Button
+        onPress={() => navigation.navigate('SettingsTab')}
+        title="Go to settings tab"
+      />
+      <Button onPress={() => navigation.goBack(null)} title="Go back" />
+    </SafeAreaView>
+    <StatusBar barStyle={statusBarStyle || 'default'} />
+  </ScrollView>
+);
+
+const MyHomeScreen = ({ navigation }) => (
+  <MyNavScreen
+    banner="Home Screen"
+    navigation={navigation}
+    statusBarStyle="light-content"
+  />
+);
+
+const MyProfileScreen = ({ navigation }) => (
+  <MyNavScreen
+    banner={`${navigation.state.params.name}s Profile`}
+    navigation={navigation}
+  />
+);
+
+const MyNotificationsSettingsScreen = ({ navigation }) => (
+  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
+);
+
+const MySettingsScreen = ({ navigation }) => (
+  <MyNavScreen
+    banner="Settings Screen"
+    navigation={navigation}
+    statusBarStyle="light-content"
+  />
+);
+
+const styles = StyleSheet.create({
+  stackHeader: {
+    height: HEADER_HEIGHT,
+  },
+  tab: {
+    height: HEADER_HEIGHT,
+  },
+});
+
+function MaterialTopTabBarWithStatusBar(props) {
+  return (
+    <View
+      style={{
+        paddingTop: Constants.statusBarHeight,
+        backgroundColor: '#2196f3',
+      }}
+    >
+      <MaterialTopTabBar {...props} jumpToIndex={() => {}} />
+    </View>
+  );
+}
+
+const TabNavigator = createMaterialTopTabNavigator(
+  {
+    MainTab: {
+      screen: MyHomeScreen,
+      navigationOptions: {
+        title: 'Welcome',
+      },
+    },
+    SettingsTab: {
+      screen: MySettingsScreen,
+      navigationOptions: {
+        title: 'Settings',
+      },
+    },
+  },
+  {
+    tabBarComponent: MaterialTopTabBarWithStatusBar,
+    tabBarOptions: {
+      tabStyle: styles.tab,
+    },
+  }
+);
+
+const StackNavigator = createStackNavigator(
+  {
+    Root: {
+      screen: TabNavigator,
+      navigationOptions: {
+        header: null,
+      },
+    },
+    NotifSettings: {
+      screen: MyNotificationsSettingsScreen,
+      navigationOptions: {
+        title: 'Notifications',
+      },
+    },
+    Profile: {
+      screen: MyProfileScreen,
+      navigationOptions: ({ navigation }) => ({
+        title: `${navigation.state.params.name}'s Profile!`,
+      }),
+    },
+  },
+  {
+    navigationOptions: {
+      headerStyle: styles.stackHeader,
+    },
+  }
+);
+
+export default StackNavigator;
--- a/examples/NavigationPlayground/package.json
+++ b/examples/NavigationPlayground/package.json
@@ -18,7 +18,8 @@
    "react-native-iphone-x-helper": "^1.0.2",
    "react-navigation": "link:../..",
    "react-navigation-header-buttons": "^0.0.4",
-    "react-navigation-material-bottom-tabs": "0.1.3"
+    "react-navigation-material-bottom-tabs": "0.1.3",
+    "react-navigation-tabs": "^0.5.1"
  },
  "devDependencies": {
    "babel-jest": "^22.4.1",
--- a/examples/NavigationPlayground/yarn.lock
+++ b/examples/NavigationPlayground/yarn.lock
@@ -5758,9 +5758,9 @@ react-navigation-deprecated-tab-navigator@1.3.0:
  dependencies:
    react-native-tab-view "^0.0.77"

-react-navigation-drawer@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/react-navigation-drawer/-/react-navigation-drawer-0.2.0.tgz#906f78c35f82f6ee39c3ca1d275f1a71e80e2c57"
+react-navigation-drawer@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/react-navigation-drawer/-/react-navigation-drawer-0.3.0.tgz#641007213f0f1e1b55a0a4bb64d71df07b3e7208"
  dependencies:
    react-native-drawer-layout-polyfill "^1.3.2"

@@ -5789,9 +5789,9 @@ react-navigation-tabs@0.2.0-rc.0:
    react-native-safe-area-view "^0.7.0"
    react-native-tab-view "~0.0.77"

-react-navigation-tabs@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.5.0.tgz#74d5511270742a0b67c46fe65a1b19e553763819"
+react-navigation-tabs@0.5.1, react-navigation-tabs@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.5.1.tgz#ed33bce3a3e21b92646700de25bd94b8fc570371"
  dependencies:
    hoist-non-react-statics "^2.5.0"
    prop-types "^15.6.1"
--- a/examples/ReduxExample/App.js
+++ b/examples/ReduxExample/App.js
@@ -4,19 +4,15 @@ import { Provider } from 'react-redux';
 import { createStore, applyMiddleware } from 'redux';

 import AppReducer from './src/reducers';
-import AppWithNavigationState from './src/navigators/AppNavigator';
-import { middleware } from './src/utils/redux';
+import { AppNavigator, middleware } from './src/navigators/AppNavigator';

-const store = createStore(
-  AppReducer,
-  applyMiddleware(middleware),
-);
+const store = createStore(AppReducer, applyMiddleware(middleware));

 class ReduxExampleApp extends React.Component {
  render() {
    return (
      <Provider store={store}>
-        <AppWithNavigationState />
+        <AppNavigator />
      </Provider>
    );
  }
--- a/examples/ReduxExample/app.json
+++ b/examples/ReduxExample/app.json
@@ -12,7 +12,7 @@
      "icon": "./assets/icons/react-navigation.png",
      "hideExponentText": false
    },
-    "sdkVersion": "25.0.0",
+    "sdkVersion": "27.0.0",
    "entryPoint": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
    "packagerOpts": {
      "assetExts": ["ttf", "mp4"]
--- a/examples/ReduxExample/assets/icons/react-navigation.png
+++ b/examples/ReduxExample/assets/icons/react-navigation.png
--- a/examples/ReduxExample/package.json
+++ b/examples/ReduxExample/package.json
@@ -21,17 +21,18 @@
    ]
  },
  "dependencies": {
-    "expo": "^25.0.0",
+    "expo": "^27.0.0",
    "prop-types": "^15.5.10",
-    "react": "16.2.0",
-    "react-native": "^0.52.0",
+    "react": "16.3.1",
+    "react-native": "^0.55.0",
    "react-navigation": "link:../..",
-    "react-navigation-redux-helpers": "^1.0.0",
+    "react-navigation-redux-helpers": "^2.0.0-beta.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2"
  },
  "devDependencies": {
    "babel-jest": "^22.4.1",
+    "flow-bin": "^0.74.0",
    "jest": "^22.1.3",
    "jest-expo": "^25.1.0",
    "react-native-scripts": "^1.3.1",
--- a/examples/ReduxExample/src/navigators/AppNavigator.js
+++ b/examples/ReduxExample/src/navigators/AppNavigator.js
@@ -2,38 +2,32 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { createStackNavigator } from 'react-navigation';
-import { initializeListeners } from 'react-navigation-redux-helpers';
+import {
+  reduxifyNavigator,
+  createReactNavigationReduxMiddleware,
+} from 'react-navigation-redux-helpers';

 import LoginScreen from '../components/LoginScreen';
 import MainScreen from '../components/MainScreen';
 import ProfileScreen from '../components/ProfileScreen';
-import { navigationPropConstructor } from '../utils/redux';

-export const AppNavigator = createStackNavigator({
+const middleware = createReactNavigationReduxMiddleware(
+  'root',
+  state => state.nav
+);
+
+const RootNavigator = createStackNavigator({
  Login: { screen: LoginScreen },
  Main: { screen: MainScreen },
  Profile: { screen: ProfileScreen },
 });

-class AppWithNavigationState extends React.Component {
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    nav: PropTypes.object.isRequired,
-  };
-
-  componentDidMount() {
-    initializeListeners('root', this.props.nav);
-  }
-
-  render() {
-    const { dispatch, nav } = this.props;
-    const navigation = navigationPropConstructor(dispatch, nav);
-    return <AppNavigator navigation={navigation} />;
-  }
-}
+const AppWithNavigationState = reduxifyNavigator(RootNavigator, 'root');

 const mapStateToProps = state => ({
-  nav: state.nav,
+  state: state.nav,
 });

-export default connect(mapStateToProps)(AppWithNavigationState);
+const AppNavigator = connect(mapStateToProps)(AppWithNavigationState);
+
+export { RootNavigator, AppNavigator, middleware };
--- a/examples/ReduxExample/src/reducers/index.js
+++ b/examples/ReduxExample/src/reducers/index.js
@@ -1,13 +1,13 @@
 import { combineReducers } from 'redux';
 import { NavigationActions } from 'react-navigation';

-import { AppNavigator } from '../navigators/AppNavigator';
+import { RootNavigator } from '../navigators/AppNavigator';

 // Start with two routes: The Main screen, with the Login screen on top.
-const firstAction = AppNavigator.router.getActionForPathAndParams('Main');
-const tempNavState = AppNavigator.router.getStateForAction(firstAction);
-const secondAction = AppNavigator.router.getActionForPathAndParams('Login');
-const initialNavState = AppNavigator.router.getStateForAction(
+const firstAction = RootNavigator.router.getActionForPathAndParams('Main');
+const tempNavState = RootNavigator.router.getStateForAction(firstAction);
+const secondAction = RootNavigator.router.getActionForPathAndParams('Login');
+const initialNavState = RootNavigator.router.getStateForAction(
  secondAction,
  tempNavState
 );
@@ -16,19 +16,19 @@ function nav(state = initialNavState, action) {
  let nextState;
  switch (action.type) {
    case 'Login':
-      nextState = AppNavigator.router.getStateForAction(
+      nextState = RootNavigator.router.getStateForAction(
        NavigationActions.back(),
        state
      );
      break;
    case 'Logout':
-      nextState = AppNavigator.router.getStateForAction(
+      nextState = RootNavigator.router.getStateForAction(
        NavigationActions.navigate({ routeName: 'Login' }),
        state
      );
      break;
    default:
-      nextState = AppNavigator.router.getStateForAction(action, state);
+      nextState = RootNavigator.router.getStateForAction(action, state);
      break;
  }

--- a/examples/ReduxExample/src/utils/redux.js
+++ b/examples/ReduxExample/src/utils/redux.js
@@ -1,12 +0,0 @@
-import {
-  createReactNavigationReduxMiddleware,
-  createNavigationPropConstructor,
-} from 'react-navigation-redux-helpers';
-
-const middleware = createReactNavigationReduxMiddleware(
-  'root',
-  state => state.nav
-);
-const navigationPropConstructor = createNavigationPropConstructor('root');
-
-export { middleware, navigationPropConstructor };
--- a/examples/ReduxExample/yarn.lock
+++ b/examples/ReduxExample/yarn.lock
--- a/flow/react-navigation.js
+++ b/flow/react-navigation.js
@@ -284,7 +284,7 @@ declare module 'react-navigation' {
    | NavigationContainer<*, *, *>;

  declare interface withOptionalNavigationOptions<Options> {
-    navigationOptions?: NavigationScreenConfig<Options>,
+    navigationOptions?: NavigationScreenConfig<Options>;
  }

  declare export type NavigationScreenComponent<
@@ -294,10 +294,11 @@ declare module 'react-navigation' {
  > = React$ComponentType<{
    ...Props,
    ...NavigationNavigatorProps<Options, Route>,
-  }> & withOptionalNavigationOptions<Options>;
+  }> &
+    withOptionalNavigationOptions<Options>;

  declare interface withRouter<State, Options> {
-    router: NavigationRouter<State, Options>,
+    router: NavigationRouter<State, Options>;
  }

  declare export type NavigationNavigator<
@@ -307,7 +308,9 @@ declare module 'react-navigation' {
  > = React$ComponentType<{
    ...Props,
    ...NavigationNavigatorProps<Options, State>,
-  }> & withRouter<State, Options> & withOptionalNavigationOptions<Options>;
+  }> &
+    withRouter<State, Options> &
+    withOptionalNavigationOptions<Options>;

  declare export type NavigationRouteConfig =
    | NavigationComponent
@@ -449,6 +452,7 @@ declare module 'react-navigation' {
    tabBarTestIDProps?: { testID?: string, accessibilityLabel?: string },
    tabBarOnPress?: ({
      navigation: NavigationScreenProp<NavigationRoute>,
+      defaultHandler: () => void,
    }) => void,
  |};

@@ -503,10 +507,6 @@ declare module 'react-navigation' {
  };

  declare export type NavigationScreenProp<+S> = {
-    ...$ObjMap<
-      _DefaultActionCreators,
-      <Args>((...args: Args) => *) => (...args: Args) => boolean
-    >,
    +state: S,
    dispatch: NavigationDispatch,
    addListener: (
@@ -515,6 +515,21 @@ declare module 'react-navigation' {
    ) => NavigationEventSubscription,
    getParam: (paramName: string, fallback?: any) => any,
    isFocused: () => boolean,
+    // Shared action creators that exist for all routers
+    goBack: (routeKey?: ?string) => boolean,
+    navigate: (
+      routeName:
+        | string
+        | {
+            routeName: string,
+            params?: NavigationParams,
+            action?: NavigationNavigateAction,
+            key?: string,
+          },
+      params?: NavigationParams,
+      action?: NavigationNavigateAction
+    ) => boolean,
+    setParams: (newParams: NavigationParams) => boolean,
    // StackRouter action creators
    pop?: (n?: number, params?: { immediate?: boolean }) => boolean,
    popToTop?: (params?: { immediate?: boolean }) => boolean,
@@ -553,7 +568,9 @@ declare module 'react-navigation' {
  > = React$ComponentType<{
    ...Props,
    ...NavigationContainerProps<State, Options>,
-  }> & withRouter<State, Options> & withOptionalNavigationOptions<Options>;
+  }> &
+    withRouter<State, Options> &
+    withOptionalNavigationOptions<Options>;

  declare export type NavigationContainerProps<S: {}, O: {}> = $Shape<{
    uriPrefix?: string | RegExp,
@@ -791,26 +808,6 @@ declare module 'react-navigation' {
    }) => NavigationToggleDrawerAction,
  };

-  declare type _DefaultActionCreators = {|
-    goBack: (routeKey?: ?string) => NavigationBackAction,
-    navigate: (
-      routeName:
-        | string
-        | {
-            routeName: string,
-            params?: NavigationParams,
-            action?: NavigationNavigateAction,
-            key?: string,
-          },
-      params?: NavigationParams,
-      action?: NavigationNavigateAction
-    ) => NavigationNavigateAction,
-    setParams: (newParams: NavigationParams) => NavigationSetParamsAction,
-  |};
-  declare export function getNavigationActionCreators(
-    route: NavigationRoute | NavigationState
-  ): _DefaultActionCreators;
-
  declare type _RouterProp<S: NavigationState, O: {}> = {
    router: NavigationRouter<S, O>,
  };
@@ -1162,4 +1159,13 @@ declare module 'react-navigation' {
  declare export function withNavigationFocus<Props: {}>(
    Component: React$ComponentType<Props>
  ): React$ComponentType<$Diff<Props, { isFocused: boolean | void }>>;
+
+  declare export function getNavigation<State: NavigationState, Options: {}>(
+    router: NavigationRouter<State, Options>,
+    state: State,
+    dispatch: NavigationDispatch,
+    actionSubscribers: Set<NavigationEventCallback>,
+    getScreenProps: () => {},
+    getCurrentNavigation: () => NavigationScreenProp<State>
+  ): NavigationScreenProp<State>;
 }
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-navigation",
-  "version": "2.2.3",
+  "version": "2.5.4",
  "description": "Routing and navigation for your React Native apps",
  "main": "src/react-navigation.js",
  "repository": {
@@ -33,11 +33,10 @@
    "create-react-context": "^0.2.1",
    "hoist-non-react-statics": "^2.2.0",
    "path-to-regexp": "^1.7.0",
-    "prop-types": "^15.5.10",
    "react-lifecycles-compat": "^3",
    "react-native-safe-area-view": "^0.8.0",
    "react-navigation-deprecated-tab-navigator": "1.3.0",
-    "react-navigation-drawer": "0.2.1",
+    "react-navigation-drawer": "0.4.2",
    "react-navigation-tabs": "0.5.1"
  },
  "devDependencies": {
--- a/src/tests/NavigationContainer-test.js
+++ b/src/tests/NavigationContainer-test.js
@@ -5,7 +5,9 @@ import renderer from 'react-test-renderer';

 import NavigationActions from '../NavigationActions';
 import createStackNavigator from '../navigators/createStackNavigator';
-import { _TESTING_ONLY_reset_container_count } from '../createNavigationContainer';
+import createNavigationContainer, {
+  _TESTING_ONLY_reset_container_count,
+} from '../createNavigationContainer';

 describe('NavigationContainer', () => {
  jest.useFakeTimers();
@@ -19,7 +21,7 @@ describe('NavigationContainer', () => {
  const CarScreen = () => <div />;
  const DogScreen = () => <div />;
  const ElkScreen = () => <div />;
-  const NavigationContainer = createStackNavigator(
+  const Stack = createStackNavigator(
    {
      foo: {
        screen: FooScreen,
@@ -44,6 +46,7 @@ describe('NavigationContainer', () => {
      initialRouteName: 'foo',
    }
  );
+  const NavigationContainer = createNavigationContainer(Stack);

  describe('state.nav', () => {
    it("should be preloaded with the router's initial state", () => {
@@ -225,7 +228,7 @@ describe('NavigationContainer', () => {

      let spy = spyConsole();

-      it('warns when you render more than one navigator explicitly', () => {
+      it('warns when you render more than one container explicitly', () => {
        class BlankScreen extends React.Component {
          render() {
            return <View />;
@@ -242,13 +245,17 @@ describe('NavigationContainer', () => {
          }
        }

-        const ChildNavigator = createStackNavigator({
-          Child: BlankScreen,
-        });
+        const ChildNavigator = createNavigationContainer(
+          createStackNavigator({
+            Child: BlankScreen,
+          })
+        );

-        const RootStack = createStackNavigator({
-          Root: RootScreen,
-        });
+        const RootStack = createNavigationContainer(
+          createStackNavigator({
+            Root: RootScreen,
+          })
+        );

        renderer.create(<RootStack />).toJSON();
        expect(spy).toMatchSnapshot();
--- a/src/tests/snapshots/NavigationContainer-test.js.snap
+++ b/src/tests/snapshots/NavigationContainer-test.js.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`NavigationContainer warnings detached navigators warns when you render more than one navigator explicitly 1`] = `
+exports[`NavigationContainer warnings detached navigators warns when you render more than one container explicitly 1`] = `
 Object {
  "console": [MockFunction] {
    "calls": Array [
      Array [
-        "You should only render one navigator explicitly in your app, and other navigators should by rendered by including them in that navigator. Full details at: https://v2.reactnavigation.org/docs/common-mistakes.html#explicitly-rendering-more-than-one-navigator",
+        "You should only render one navigator explicitly in your app, and other navigators should by rendered by including them in that navigator. Full details at: https://reactnavigation.org/docs/common-mistakes.html#explicitly-rendering-more-than-one-navigator",
      ],
    ],
  },
--- a/src/tests/getNavigation-test.js
+++ b/src/tests/getNavigation-test.js
@@ -0,0 +1,102 @@
+import getNavigation from '../getNavigation';
+
+test('getNavigation provides default action helpers', () => {
+  const router = {
+    getActionCreators: () => ({}),
+    getStateForAction(action, lastState = {}) {
+      return lastState;
+    },
+  };
+
+  const dispatch = jest.fn();
+
+  const topNav = getNavigation(
+    router,
+    {},
+    dispatch,
+    new Set(),
+    () => ({}),
+    () => topNav
+  );
+
+  topNav.navigate('GreatRoute');
+
+  expect(dispatch.mock.calls.length).toBe(1);
+  expect(dispatch.mock.calls[0][0].type).toBe('Navigation/NAVIGATE');
+  expect(dispatch.mock.calls[0][0].routeName).toBe('GreatRoute');
+});
+
+test('getNavigation provides router action helpers', () => {
+  const router = {
+    getActionCreators: () => ({
+      foo: bar => ({ type: 'FooBarAction', bar }),
+    }),
+    getStateForAction(action, lastState = {}) {
+      return lastState;
+    },
+  };
+
+  const dispatch = jest.fn();
+
+  const topNav = getNavigation(
+    router,
+    {},
+    dispatch,
+    new Set(),
+    () => ({}),
+    () => topNav
+  );
+
+  topNav.foo('Great');
+
+  expect(dispatch.mock.calls.length).toBe(1);
+  expect(dispatch.mock.calls[0][0].type).toBe('FooBarAction');
+  expect(dispatch.mock.calls[0][0].bar).toBe('Great');
+});
+
+test('getNavigation get child navigation with router', () => {
+  const actionSubscribers = new Set();
+  let navigation = null;
+
+  const routerA = {
+    getActionCreators: () => ({}),
+    getStateForAction(action, lastState = {}) {
+      return lastState;
+    },
+  };
+  const router = {
+    childRouters: {
+      RouteA: routerA,
+    },
+    getActionCreators: () => ({}),
+    getStateForAction(action, lastState = {}) {
+      return lastState;
+    },
+  };
+
+  const initState = {
+    index: 0,
+    routes: [
+      {
+        key: 'a',
+        routeName: 'RouteA',
+        routes: [{ key: 'c', routeName: 'RouteC' }],
+        index: 0,
+      },
+      { key: 'b', routeName: 'RouteB' },
+    ],
+  };
+
+  const topNav = getNavigation(
+    router,
+    initState,
+    () => {},
+    actionSubscribers,
+    () => ({}),
+    () => navigation
+  );
+
+  const childNavA = topNav.getChildNavigation('a');
+
+  expect(childNavA.router).toBe(routerA);
+});
--- a/src/createNavigationContainer.js
+++ b/src/createNavigationContainer.js
@@ -4,8 +4,8 @@ import { polyfill } from 'react-lifecycles-compat';

 import { BackHandler } from './PlatformHelpers';
 import NavigationActions from './NavigationActions';
+import getNavigation from './getNavigation';
 import invariant from './utils/invariant';
-import getNavigationActionCreators from './routers/getNavigationActionCreators';
 import docsUrl from './utils/docsUrl';

 function isStateful(props) {
@@ -286,7 +286,7 @@ export default function createNavigationContainer(Component) {
        );
        this.dispatch(NavigationActions.init());
      } else {
-        throw new Error(e);
+        throw e;
      }
    }

@@ -358,34 +358,24 @@ export default function createNavigationContainer(Component) {
      return false;
    };

+    _getScreenProps = () => this.props.screenProps;
+
    render() {
      let navigation = this.props.navigation;
      if (this._isStateful()) {
-        const nav = this.state.nav;
-        if (!nav) {
+        const navState = this.state.nav;
+        if (!navState) {
          return this._renderLoading();
        }
-        if (!this._navigation || this._navigation.state !== nav) {
-          this._navigation = {
-            dispatch: this.dispatch,
-            state: nav,
-            addListener: (eventName, handler) => {
-              if (eventName !== 'action') {
-                return { remove: () => {} };
-              }
-              this._actionEventSubscribers.add(handler);
-              return {
-                remove: () => {
-                  this._actionEventSubscribers.delete(handler);
-                },
-              };
-            },
-          };
-          const actionCreators = getNavigationActionCreators(nav);
-          Object.keys(actionCreators).forEach(actionName => {
-            this._navigation[actionName] = (...args) =>
-              this.dispatch(actionCreators[actionName](...args));
-          });
+        if (!this._navigation || this._navigation.state !== navState) {
+          this._navigation = getNavigation(
+            Component.router,
+            navState,
+            this.dispatch,
+            this._actionEventSubscribers,
+            this._getScreenProps,
+            () => this._navigation
+          );
        }
        navigation = this._navigation;
      }
--- a/src/getChildNavigation.js
+++ b/src/getChildNavigation.js
@@ -0,0 +1,105 @@
+import getChildEventSubscriber from './getChildEventSubscriber';
+import getChildRouter from './getChildRouter';
+import getNavigationActionCreators from './routers/getNavigationActionCreators';
+import invariant from './utils/invariant';
+
+const createParamGetter = route => (paramName, defaultValue) => {
+  const params = route.params;
+
+  if (params && paramName in params) {
+    return params[paramName];
+  }
+
+  return defaultValue;
+};
+
+function getChildNavigation(navigation, childKey, getCurrentParentNavigation) {
+  const children =
+    navigation._childrenNavigation || (navigation._childrenNavigation = {});
+
+  const childRoute = navigation.state.routes.find(r => r.key === childKey);
+
+  if (children[childKey] && children[childKey].state === childRoute) {
+    return children[childKey];
+  }
+
+  const childRouter = getChildRouter(navigation.router, childRoute.routeName);
+
+  // If the route has children, we'll use this to pass in to the action creators
+  // for the childRouter so that any action that depends on the active route will
+  // behave as expected. We don't explicitly require that routers implement routes
+  // and index properties, but if we did then we would put an invariant here to
+  // ensure that a focusedGrandChildRoute exists if childRouter is defined.
+  const focusedGrandChildRoute =
+    childRoute.routes && typeof childRoute.index === 'number'
+      ? childRoute.routes[childRoute.index]
+      : null;
+
+  const actionCreators = {
+    ...navigation.actions,
+    ...navigation.router.getActionCreators(childRoute, navigation.state.key),
+    ...(childRouter
+      ? childRouter.getActionCreators(focusedGrandChildRoute, childRoute.key)
+      : {}),
+    ...getNavigationActionCreators(childRoute),
+  };
+
+  const actionHelpers = {};
+  Object.keys(actionCreators).forEach(actionName => {
+    actionHelpers[actionName] = (...args) => {
+      const actionCreator = actionCreators[actionName];
+      const action = actionCreator(...args);
+      return navigation.dispatch(action);
+    };
+  });
+
+  if (children[childKey]) {
+    children[childKey] = {
+      ...children[childKey],
+      ...actionHelpers,
+      state: childRoute,
+      router: childRouter,
+      actions: actionCreators,
+      getParam: createParamGetter(childRoute),
+    };
+    return children[childKey];
+  }
+
+  const childSubscriber = getChildEventSubscriber(
+    navigation.addListener,
+    childKey
+  );
+
+  children[childKey] = {
+    ...actionHelpers,
+
+    state: childRoute,
+    router: childRouter,
+    actions: actionCreators,
+    getParam: createParamGetter(childRoute),
+
+    getChildNavigation: grandChildKey =>
+      getChildNavigation(children[childKey], grandChildKey, () =>
+        getCurrentParentNavigation().getChildNavigation(childKey)
+      ),
+
+    isFocused: () => {
+      const currentNavigation = getCurrentParentNavigation();
+      const { routes, index } = currentNavigation.state;
+      if (!currentNavigation.isFocused()) {
+        return false;
+      }
+      if (routes[index].key === childKey) {
+        return true;
+      }
+      return false;
+    },
+    dispatch: navigation.dispatch,
+    getScreenProps: navigation.getScreenProps,
+    dangerouslyGetParent: getCurrentParentNavigation,
+    addListener: childSubscriber.addListener,
+  };
+  return children[childKey];
+}
+
+export default getChildNavigation;
--- a/src/getChildRouter.js
+++ b/src/getChildRouter.js
@@ -0,0 +1,9 @@
+export default function getChildRouter(router, routeName) {
+  if (router.childRouters && router.childRouters[routeName]) {
+    return router.childRouters[routeName];
+  }
+
+  const Component = router.getComponentForRouteName(routeName);
+
+  return Component.router;
+}
--- a/src/getNavigation.js
+++ b/src/getNavigation.js
@@ -0,0 +1,54 @@
+import getNavigationActionCreators from './routers/getNavigationActionCreators';
+import getChildNavigation from './getChildNavigation';
+
+export default function getNavigation(
+  router,
+  state,
+  dispatch,
+  actionSubscribers,
+  getScreenProps,
+  getCurrentNavigation
+) {
+  const actions = router.getActionCreators(state, null);
+
+  const navigation = {
+    actions,
+    router,
+    state,
+    dispatch,
+    getScreenProps,
+    getChildNavigation: childKey =>
+      getChildNavigation(navigation, childKey, getCurrentNavigation),
+    isFocused: childKey => {
+      const { routes, index } = getCurrentNavigation().state;
+      if (childKey == null || routes[index].key === childKey) {
+        return true;
+      }
+      return false;
+    },
+    addListener: (eventName, handler) => {
+      if (eventName !== 'action') {
+        return { remove: () => {} };
+      }
+      actionSubscribers.add(handler);
+      return {
+        remove: () => {
+          actionSubscribers.delete(handler);
+        },
+      };
+    },
+    dangerouslyGetParent: () => null,
+  };
+
+  const actionCreators = {
+    ...getNavigationActionCreators(navigation.state),
+    ...actions,
+  };
+
+  Object.keys(actionCreators).forEach(actionName => {
+    navigation[actionName] = (...args) =>
+      navigation.dispatch(actionCreators[actionName](...args));
+  });
+
+  return navigation;
+}
--- a/src/navigators/tests/NestedNavigator-test.js
+++ b/src/navigators/tests/NestedNavigator-test.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import StackNavigator from '../createContainedStackNavigator';
+
+const SubNavigator = StackNavigator({
+  Home: {
+    screen: () => null,
+  },
+});
+
+const NavNestedDirect = StackNavigator({
+  Sub: {
+    screen: SubNavigator,
+  },
+});
+
+const NavNestedIndirect = StackNavigator({
+  Sub: {
+    // eslint-disable-next-line react/display-name
+    screen: props => <SubNavigator {...props} />,
+  },
+});
+
+/* Prevent React error boundaries from swallowing the errors */
+NavNestedIndirect.prototype.componentDidCatch = null;
+SubNavigator.prototype.componentDidCatch = null;
+
+describe('Nested navigators', () => {
+  it('renders succesfully as direct child', () => {
+    const rendered = renderer.create(<NavNestedDirect />).toJSON();
+    expect(rendered).toMatchSnapshot();
+  });
+
+  it('throw when trying to pass navigation prop', () => {
+    const tryRender = () => {
+      renderer.create(<NavNestedIndirect />);
+    };
+    expect(tryRender).toThrowErrorMatchingSnapshot();
+  });
+});
--- a/src/navigators/tests/StackNavigator-test.js
+++ b/src/navigators/tests/StackNavigator-test.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { StyleSheet, View } from 'react-native';
 import renderer from 'react-test-renderer';

-import StackNavigator from '../createStackNavigator';
+import StackNavigator from '../createContainedStackNavigator';
 import withNavigation from '../../views/withNavigation';
 import { _TESTING_ONLY_reset_container_count } from '../../createNavigationContainer';

--- a/src/navigators/tests/SwitchNavigator-test.js
+++ b/src/navigators/tests/SwitchNavigator-test.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { View } from 'react-native';
 import renderer from 'react-test-renderer';

-import SwitchNavigator from '../createSwitchNavigator';
+import SwitchNavigator from '../createContainedSwitchNavigator';

 const A = () => <View />;
 const B = () => <View />;
--- a/src/navigators/tests/snapshots/NestedNavigator-test.js.snap
+++ b/src/navigators/tests/snapshots/NestedNavigator-test.js.snap
@@ -0,0 +1,371 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Nested navigators renders succesfully as direct child 1`] = `
+<View
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+    ]
+  }
+>
+  <View
+    onMoveShouldSetResponder={[Function]}
+    onMoveShouldSetResponderCapture={[Function]}
+    onResponderEnd={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderReject={[Function]}
+    onResponderRelease={[Function]}
+    onResponderStart={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    onStartShouldSetResponderCapture={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+          "flexDirection": "column-reverse",
+        },
+        Object {
+          "backgroundColor": "#000",
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <View
+        collapsable={undefined}
+        pointerEvents="auto"
+        style={
+          Object {
+            "backgroundColor": "#E9E9EF",
+            "bottom": 0,
+            "left": 0,
+            "marginTop": 0,
+            "opacity": 1,
+            "position": "absolute",
+            "right": 0,
+            "shadowColor": "black",
+            "shadowOffset": Object {
+              "height": 0,
+              "width": 0,
+            },
+            "shadowOpacity": 0.2,
+            "shadowRadius": 5,
+            "top": 0,
+            "transform": Array [
+              Object {
+                "translateX": 0,
+              },
+              Object {
+                "translateY": 0,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+            ]
+          }
+        >
+          <View
+            onMoveShouldSetResponder={[Function]}
+            onMoveShouldSetResponderCapture={[Function]}
+            onResponderEnd={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderReject={[Function]}
+            onResponderRelease={[Function]}
+            onResponderStart={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            onStartShouldSetResponderCapture={[Function]}
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "flexDirection": "column-reverse",
+                },
+                Object {
+                  "backgroundColor": "#000",
+                },
+              ]
+            }
+          >
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={undefined}
+                pointerEvents="auto"
+                style={
+                  Object {
+                    "backgroundColor": "#E9E9EF",
+                    "bottom": 0,
+                    "left": 0,
+                    "marginTop": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "shadowColor": "black",
+                    "shadowOffset": Object {
+                      "height": 0,
+                      "width": 0,
+                    },
+                    "shadowOpacity": 0.2,
+                    "shadowRadius": 5,
+                    "top": 0,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateY": 0,
+                      },
+                    ],
+                  }
+                }
+              />
+            </View>
+            <View
+              onLayout={[Function]}
+              pointerEvents="box-none"
+            >
+              <View
+                collapsable={undefined}
+                style={
+                  Object {
+                    "backgroundColor": "#F7F7F7",
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  collapsable={undefined}
+                  onLayout={[Function]}
+                  pointerEvents="box-none"
+                  style={
+                    Object {
+                      "backgroundColor": "#F7F7F7",
+                      "borderBottomColor": "#A7A7AA",
+                      "borderBottomWidth": 0.5,
+                      "height": 64,
+                      "paddingBottom": 0,
+                      "paddingLeft": 0,
+                      "paddingRight": 0,
+                      "paddingTop": 20,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "bottom": 0,
+                          "flexDirection": "row",
+                          "left": 0,
+                          "position": "absolute",
+                          "right": 0,
+                          "top": 0,
+                        }
+                      }
+                    >
+                      <View
+                        collapsable={undefined}
+                        pointerEvents="box-none"
+                        style={
+                          Object {
+                            "alignItems": "center",
+                            "backgroundColor": "transparent",
+                            "bottom": 0,
+                            "flexDirection": "row",
+                            "justifyContent": "center",
+                            "left": 0,
+                            "opacity": 1,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
+                          }
+                        }
+                      >
+                        <Text
+                          accessibilityTraits="header"
+                          accessible={true}
+                          allowFontScaling={true}
+                          collapsable={undefined}
+                          ellipsizeMode="tail"
+                          numberOfLines={1}
+                          onLayout={[Function]}
+                          style={
+                            Object {
+                              "color": "rgba(0, 0, 0, .9)",
+                              "fontSize": 17,
+                              "fontWeight": "700",
+                              "marginHorizontal": 16,
+                              "textAlign": "center",
+                            }
+                          }
+                        />
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+      pointerEvents="box-none"
+    >
+      <View
+        collapsable={undefined}
+        style={
+          Object {
+            "backgroundColor": "#F7F7F7",
+            "transform": Array [
+              Object {
+                "translateX": 0,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          collapsable={undefined}
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={
+            Object {
+              "backgroundColor": "#F7F7F7",
+              "borderBottomColor": "#A7A7AA",
+              "borderBottomWidth": 0.5,
+              "height": 64,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 20,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              }
+            }
+          />
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          >
+            <View
+              style={
+                Object {
+                  "bottom": 0,
+                  "flexDirection": "row",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                }
+              }
+            >
+              <View
+                collapsable={undefined}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "backgroundColor": "transparent",
+                    "bottom": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityTraits="header"
+                  accessible={true}
+                  allowFontScaling={true}
+                  collapsable={undefined}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgba(0, 0, 0, .9)",
+                      "fontSize": 17,
+                      "fontWeight": "700",
+                      "marginHorizontal": 16,
+                      "textAlign": "center",
+                    }
+                  }
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Nested navigators throw when trying to pass navigation prop 1`] = `"No \\"routes\\" found in navigation state. Did you try to pass the navigation prop of a React component to a Navigator child? See https://reactnavigation.org/docs/en/custom-navigators.html#navigator-navigation-prop"`;
--- a/src/navigators/tests/snapshots/StackNavigator-test.js.snap
+++ b/src/navigators/tests/snapshots/StackNavigator-test.js.snap
@@ -76,50 +76,37 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
      />
    </View>
    <View
-      collapsable={undefined}
-      style={
-        Object {
-          "transform": Array [
-            Object {
-              "translateX": 0,
-            },
-          ],
-        }
-      }
+      onLayout={[Function]}
+      pointerEvents="box-none"
    >
      <View
        collapsable={undefined}
-        onLayout={[Function]}
-        pointerEvents="box-none"
        style={
          Object {
-            "backgroundColor": "red",
-            "borderBottomColor": "#A7A7AA",
-            "borderBottomWidth": 0.5,
-            "height": 64,
-            "opacity": 0.5,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 20,
+            "backgroundColor": "#F7F7F7",
+            "transform": Array [
+              Object {
+                "translateX": 0,
+              },
+            ],
          }
        }
      >
        <View
+          collapsable={undefined}
+          onLayout={[Function]}
+          pointerEvents="box-none"
          style={
            Object {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            }
-          }
-        />
-        <View
-          style={
-            Object {
-              "flex": 1,
+              "backgroundColor": "red",
+              "borderBottomColor": "#A7A7AA",
+              "borderBottomWidth": 0.5,
+              "height": 64,
+              "opacity": 0.5,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 20,
            }
          }
        >
@@ -127,70 +114,89 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
            style={
              Object {
                "bottom": 0,
-                "flexDirection": "row",
                "left": 0,
                "position": "absolute",
                "right": 0,
                "top": 0,
              }
            }
+          />
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
          >
            <View
-              collapsable={undefined}
-              pointerEvents="box-none"
              style={
                Object {
-                  "alignItems": "center",
-                  "backgroundColor": "transparent",
                  "bottom": 0,
                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "left": 70,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 70,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityTraits="header"
-                accessible={true}
-                allowFontScaling={true}
-                collapsable={undefined}
-                ellipsizeMode="tail"
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgba(0, 0, 0, .9)",
-                    "fontSize": 17,
-                    "fontWeight": "700",
-                    "marginHorizontal": 16,
-                    "textAlign": "center",
-                  }
-                }
-              >
-                Welcome anonymous
-              </Text>
-            </View>
-            <View
-              collapsable={undefined}
-              pointerEvents="box-none"
-              style={
-                Object {
-                  "alignItems": "center",
-                  "backgroundColor": "transparent",
-                  "bottom": 0,
-                  "flexDirection": "row",
-                  "opacity": 1,
+                  "left": 0,
                  "position": "absolute",
                  "right": 0,
                  "top": 0,
                }
              }
            >
-              <View />
+              <View
+                collapsable={undefined}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "backgroundColor": "transparent",
+                    "bottom": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "left": 70,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 70,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityTraits="header"
+                  accessible={true}
+                  allowFontScaling={true}
+                  collapsable={undefined}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgba(0, 0, 0, .9)",
+                      "fontSize": 17,
+                      "fontWeight": "700",
+                      "marginHorizontal": 16,
+                      "textAlign": "center",
+                    }
+                  }
+                >
+                  Welcome anonymous
+                </Text>
+              </View>
+              <View
+                collapsable={undefined}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "backgroundColor": "transparent",
+                    "bottom": 0,
+                    "flexDirection": "row",
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <View />
+              </View>
            </View>
          </View>
        </View>
@@ -276,50 +282,37 @@ exports[`StackNavigator renders successfully 1`] = `
      />
    </View>
    <View
-      collapsable={undefined}
-      style={
-        Object {
-          "transform": Array [
-            Object {
-              "translateX": 0,
-            },
-          ],
-        }
-      }
+      onLayout={[Function]}
+      pointerEvents="box-none"
    >
      <View
        collapsable={undefined}
-        onLayout={[Function]}
-        pointerEvents="box-none"
        style={
          Object {
-            "backgroundColor": "red",
-            "borderBottomColor": "#A7A7AA",
-            "borderBottomWidth": 0.5,
-            "height": 64,
-            "opacity": 0.5,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 20,
+            "backgroundColor": "#F7F7F7",
+            "transform": Array [
+              Object {
+                "translateX": 0,
+              },
+            ],
          }
        }
      >
        <View
+          collapsable={undefined}
+          onLayout={[Function]}
+          pointerEvents="box-none"
          style={
            Object {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            }
-          }
-        />
-        <View
-          style={
-            Object {
-              "flex": 1,
+              "backgroundColor": "red",
+              "borderBottomColor": "#A7A7AA",
+              "borderBottomWidth": 0.5,
+              "height": 64,
+              "opacity": 0.5,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 20,
            }
          }
        >
@@ -327,52 +320,71 @@ exports[`StackNavigator renders successfully 1`] = `
            style={
              Object {
                "bottom": 0,
-                "flexDirection": "row",
                "left": 0,
                "position": "absolute",
                "right": 0,
                "top": 0,
              }
            }
+          />
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
          >
            <View
-              collapsable={undefined}
-              pointerEvents="box-none"
              style={
                Object {
-                  "alignItems": "center",
-                  "backgroundColor": "transparent",
                  "bottom": 0,
                  "flexDirection": "row",
-                  "justifyContent": "center",
                  "left": 0,
-                  "opacity": 1,
                  "position": "absolute",
                  "right": 0,
                  "top": 0,
                }
              }
            >
-              <Text
-                accessibilityTraits="header"
-                accessible={true}
-                allowFontScaling={true}
+              <View
                collapsable={undefined}
-                ellipsizeMode="tail"
-                numberOfLines={1}
-                onLayout={[Function]}
+                pointerEvents="box-none"
                style={
                  Object {
-                    "color": "rgba(0, 0, 0, .9)",
-                    "fontSize": 17,
-                    "fontWeight": "700",
-                    "marginHorizontal": 16,
-                    "textAlign": "center",
+                    "alignItems": "center",
+                    "backgroundColor": "transparent",
+                    "bottom": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                  }
                }
              >
-                Welcome anonymous
-              </Text>
+                <Text
+                  accessibilityTraits="header"
+                  accessible={true}
+                  allowFontScaling={true}
+                  collapsable={undefined}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgba(0, 0, 0, .9)",
+                      "fontSize": 17,
+                      "fontWeight": "700",
+                      "marginHorizontal": 16,
+                      "textAlign": "center",
+                    }
+                  }
+                >
+                  Welcome anonymous
+                </Text>
+              </View>
            </View>
          </View>
        </View>
--- a/src/navigators/createContainedStackNavigator.js
+++ b/src/navigators/createContainedStackNavigator.js
@@ -0,0 +1,9 @@
+import createNavigationContainer from '../createNavigationContainer';
+import createStackNavigator from './createStackNavigator';
+
+const StackNavigator = (routeConfigs, config = {}) => {
+  const navigator = createStackNavigator(routeConfigs, config);
+  return createNavigationContainer(navigator);
+};
+
+export default StackNavigator;
--- a/src/navigators/createContainedSwitchNavigator.js
+++ b/src/navigators/createContainedSwitchNavigator.js
@@ -0,0 +1,9 @@
+import createNavigationContainer from '../createNavigationContainer';
+import createSwitchNavigator from './createSwitchNavigator';
+
+const SwitchNavigator = (routeConfigs, config = {}) => {
+  const navigator = createSwitchNavigator(routeConfigs, config);
+  return createNavigationContainer(navigator);
+};
+
+export default SwitchNavigator;
--- a/src/navigators/createKeyboardAwareNavigator.js
+++ b/src/navigators/createKeyboardAwareNavigator.js
@@ -30,12 +30,12 @@ export default Navigator =>
      if (this._previouslyFocusedTextInput) {
        TextInput.State.focusTextInput(this._previouslyFocusedTextInput);
      }
-      this.props.onGestureFinish && this.props.onGestureFinish();
+      this.props.onGestureCanceled && this.props.onGestureCanceled();
    };

    _handleGestureFinish = () => {
      this._previouslyFocusedTextInput = null;
-      this.props.onGestureCanceled && this.props.onGestureCanceled();
+      this.props.onGestureFinish && this.props.onGestureFinish();
    };

    _handleTransitionStart = (transitionProps, prevTransitionProps) => {
--- a/src/navigators/createNavigator.js
+++ b/src/navigators/createNavigator.js
@@ -10,122 +10,56 @@ function createNavigator(NavigatorView, router, navigationConfig) {

    state = {
      descriptors: {},
-      childEventSubscribers: {},
+      screenProps: this.props.screenProps,
    };

    static getDerivedStateFromProps(nextProps, prevState) {
+      const prevDescriptors = prevState.descriptors;
      const { navigation, screenProps } = nextProps;
      const { dispatch, state, addListener } = navigation;
      const { routes } = state;
+      if (typeof routes === 'undefined') {
+        throw new TypeError(
+          'No "routes" found in navigation state. Did you try to pass the navigation prop of a React component to a Navigator child? See https://reactnavigation.org/docs/en/custom-navigators.html#navigator-navigation-prop'
+        );
+      }

      const descriptors = { ...prevState.descriptors };
-      const childEventSubscribers = { ...prevState.childEventSubscribers };
+
      routes.forEach(route => {
-        if (!descriptors[route.key] || descriptors[route.key].state !== route) {
-          const getComponent = () =>
-            router.getComponentForRouteName(route.routeName);
-
-          if (!childEventSubscribers[route.key]) {
-            childEventSubscribers[route.key] = getChildEventSubscriber(
-              addListener,
-              route.key
-            );
-          }
-
-          const actionCreators = {
-            ...navigation.actions,
-            ...router.getActionCreators(route, state.key),
-          };
-          const actionHelpers = {};
-          Object.keys(actionCreators).forEach(actionName => {
-            actionHelpers[actionName] = (...args) => {
-              const actionCreator = actionCreators[actionName];
-              const action = actionCreator(...args);
-              return dispatch(action);
-            };
-          });
-          const childNavigation = {
-            ...actionHelpers,
-            actions: actionCreators,
-            dispatch,
-            state: route,
-            addListener: childEventSubscribers[route.key].addListener,
-            getParam: (paramName, defaultValue) => {
-              const params = route.params;
-
-              if (params && paramName in params) {
-                return params[paramName];
-              }
-
-              return defaultValue;
-            },
-          };
-
-          const options = router.getScreenOptions(childNavigation, screenProps);
-          descriptors[route.key] = {
-            key: route.key,
-            getComponent,
-            options,
-            state: route,
-            navigation: childNavigation,
-          };
+        if (
+          prevDescriptors &&
+          prevDescriptors[route.key] &&
+          route === prevDescriptors[route.key].state &&
+          screenProps === prevState.screenProps
+        ) {
+          descriptors[route.key] = prevDescriptors[route.key];
+          return;
        }
+        const getComponent = () =>
+          router.getComponentForRouteName(route.routeName);
+        const childNavigation = navigation.getChildNavigation(route.key);
+        const options = router.getScreenOptions(childNavigation, screenProps);
+        descriptors[route.key] = {
+          key: route.key,
+          getComponent,
+          options,
+          state: route,
+          navigation: childNavigation,
+        };
      });

-      return {
-        descriptors,
-        childEventSubscribers,
-      };
+      return { descriptors, screenProps };
    }

-    // Cleanup subscriptions for routes that no longer exist
-    componentDidUpdate() {
-      const activeKeys = this.props.navigation.state.routes.map(r => r.key);
-      let childEventSubscribers = { ...this.state.childEventSubscribers };
-      Object.keys(childEventSubscribers).forEach(key => {
-        if (!activeKeys.includes(key)) {
-          delete childEventSubscribers[key];
-        }
-      });
-      if (
-        childEventSubscribers.length !== this.state.childEventSubscribers.length
-      ) {
-        this.setState({ childEventSubscribers });
-      }
-    }
-
-    _isRouteFocused = route => {
-      const { state } = this.props.navigation;
-      const focusedRoute = state.routes[state.index];
-      return route === focusedRoute;
-    };
-
-    _dangerouslyGetParent = () => {
-      return this.props.navigation;
-    };
-
    render() {
-      // Mutation in render 😩
-      // The problem:
-      // - We don't want to re-render each screen every time the parent navigator changes
-      // - But we need to be able to access the parent navigator from callbacks
-      // - These functions should only be used within callbacks, but they are passed in props,
-      //   which is what makes this awkward. What's a good way to pass in stuff that we don't
-      //   want people to depend on in render?
-      let descriptors = { ...this.state.descriptors };
-      Object.values(descriptors).forEach(descriptor => {
-        descriptor.navigation.isFocused = () =>
-          this._isRouteFocused(descriptor.state);
-        descriptor.navigation.dangerouslyGetParent = this._dangerouslyGetParent;
-      });
-
      return (
        <NavigatorView
          {...this.props}
-          screenProps={this.props.screenProps}
+          screenProps={this.state.screenProps}
          navigation={this.props.navigation}
          navigationConfig={navigationConfig}
-          descriptors={descriptors}
+          descriptors={this.state.descriptors}
        />
      );
    }
--- a/src/navigators/createStackNavigator.js
+++ b/src/navigators/createStackNavigator.js
@@ -1,5 +1,3 @@
-import React from 'react';
-import createNavigationContainer from '../createNavigationContainer';
 import createKeyboardAwareNavigator from './createKeyboardAwareNavigator';
 import createNavigator from './createNavigator';
 import StackView from '../views/StackView/StackView';
@@ -33,8 +31,7 @@ function createStackNavigator(routeConfigMap, stackConfig = {}) {
    Navigator = createKeyboardAwareNavigator(Navigator);
  }

-  // HOC to provide the navigation prop for the top-level navigator (when the prop is missing)
-  return createNavigationContainer(Navigator);
+  return Navigator;
 }

 export default createStackNavigator;
--- a/src/navigators/createSwitchNavigator.js
+++ b/src/navigators/createSwitchNavigator.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import createNavigationContainer from '../createNavigationContainer';
 import createNavigator from '../navigators/createNavigator';
 import SwitchRouter from '../routers/SwitchRouter';
 import SwitchView from '../views/SwitchView/SwitchView';
@@ -7,7 +6,7 @@ import SwitchView from '../views/SwitchView/SwitchView';
 function createSwitchNavigator(routeConfigMap, switchConfig = {}) {
  const router = SwitchRouter(routeConfigMap, switchConfig);
  const Navigator = createNavigator(SwitchView, router, switchConfig);
-  return createNavigationContainer(Navigator);
+  return Navigator;
 }

 export default createSwitchNavigator;
--- a/src/react-navigation.js
+++ b/src/react-navigation.js
@@ -8,28 +8,31 @@ module.exports = {
  get StateUtils() {
    return require('./StateUtils').default;
  },
+  get getNavigation() {
+    return require('./getNavigation').default;
+  },

  // Navigators
  get createNavigator() {
    return require('./navigators/createNavigator').default;
  },
  get createStackNavigator() {
-    return require('./navigators/createStackNavigator').default;
+    return require('./navigators/createContainedStackNavigator').default;
  },
  get StackNavigator() {
    console.warn(
      'The StackNavigator function name is deprecated, please use createStackNavigator instead'
    );
-    return require('./navigators/createStackNavigator').default;
+    return require('./navigators/createContainedStackNavigator').default;
  },
  get createSwitchNavigator() {
-    return require('./navigators/createSwitchNavigator').default;
+    return require('./navigators/createContainedSwitchNavigator').default;
  },
  get SwitchNavigator() {
    console.warn(
      'The SwitchNavigator function name is deprecated, please use createSwitchNavigator instead'
    );
-    return require('./navigators/createSwitchNavigator').default;
+    return require('./navigators/createContainedSwitchNavigator').default;
  },
  get createDrawerNavigator() {
    return require('react-navigation-drawer').createDrawerNavigator;
@@ -71,9 +74,6 @@ module.exports = {
  get DrawerActions() {
    return require('react-navigation-drawer').DrawerActions;
  },
-  get getNavigationActionCreators() {
-    return require('./routers/getNavigationActionCreators').default;
-  },

  // Routers
  get StackRouter() {
--- a/src/react-navigation.web.js
+++ b/src/react-navigation.web.js
@@ -8,11 +8,17 @@ module.exports = {
  get StateUtils() {
    return require('./StateUtils').default;
  },
+  get getNavigation() {
+    return require('./getNavigation').default;
+  },

  // Navigators
  get createNavigator() {
    return require('./navigators/createNavigator').default;
  },
+  get createSwitchNavigator() {
+    return require('./navigators/createSwitchNavigator').default;
+  },

  // Actions
  get NavigationActions() {
@@ -24,9 +30,6 @@ module.exports = {
  get DrawerActions() {
    return require('./routers/DrawerActions').default;
  },
-  get getNavigationActionCreators() {
-    return require('./routers/getNavigationActionCreators').default;
-  },

  // Routers
  get StackRouter() {
--- a/src/routers/StackRouter.js
+++ b/src/routers/StackRouter.js
@@ -8,7 +8,6 @@ import StateUtils from '../StateUtils';
 import validateRouteConfigMap from './validateRouteConfigMap';
 import invariant from '../utils/invariant';
 import { generateKey } from './KeyGenerator';
-import getNavigationActionCreators from './getNavigationActionCreators';

 function isEmpty(obj) {
  if (!obj) return true;
@@ -149,6 +148,8 @@ export default (routeConfigs, stackConfig = {}) => {
  paths.sort((a, b) => b[1].priority - a[1].priority);

  return {
+    childRouters,
+
    getComponentForState(state) {
      const activeChildRoute = state.routes[state.index];
      const { routeName } = activeChildRoute;
@@ -164,7 +165,6 @@ export default (routeConfigs, stackConfig = {}) => {

    getActionCreators(route, navStateKey) {
      return {
-        ...getNavigationActionCreators(route),
        ...getCustomActionCreators(route, navStateKey),
        pop: (n, params) =>
          StackActions.pop({
@@ -399,7 +399,10 @@ export default (routeConfigs, stackConfig = {}) => {
                routeName: childRouterName,
                key: action.key || generateKey(),
              };
-              return StateUtils.push(state, route);
+              return {
+                ...StateUtils.push(state, route),
+                isTransitioning: action.immediate !== true,
+              };
            }
          }
        }
--- a/src/routers/SwitchRouter.js
+++ b/src/routers/SwitchRouter.js
@@ -5,7 +5,6 @@ import createConfigGetter from './createConfigGetter';
 import NavigationActions from '../NavigationActions';
 import StackActions from './StackActions';
 import validateRouteConfigMap from './validateRouteConfigMap';
-import getNavigationActionCreators from './getNavigationActionCreators';

 const defaultActionCreators = (route, navStateKey) => ({});

@@ -74,48 +73,47 @@ export default (routeConfigs, config = {}) => {
    };
  }

-  return {
-    getInitialState() {
-      const routes = order.map(resetChildRoute);
+  function getNextState(prevState, possibleNextState) {
+    if (!prevState) {
+      return possibleNextState;
+    }
+
+    let nextState;
+    if (prevState.index !== possibleNextState.index && resetOnBlur) {
+      const prevRouteName = prevState.routes[prevState.index].routeName;
+      const nextRoutes = [...possibleNextState.routes];
+      nextRoutes[prevState.index] = resetChildRoute(prevRouteName);
+
      return {
-        routes,
-        index: initialRouteIndex,
-        isTransitioning: false,
+        ...possibleNextState,
+        routes: nextRoutes,
      };
-    },
+    } else {
+      nextState = possibleNextState;
+    }

-    getNextState(prevState, possibleNextState) {
-      if (!prevState) {
-        return possibleNextState;
-      }
+    return nextState;
+  }

-      let nextState;
-      if (prevState.index !== possibleNextState.index && resetOnBlur) {
-        const prevRouteName = prevState.routes[prevState.index].routeName;
-        const nextRoutes = [...possibleNextState.routes];
-        nextRoutes[prevState.index] = resetChildRoute(prevRouteName);
+  function getInitialState() {
+    const routes = order.map(resetChildRoute);
+    return {
+      routes,
+      index: initialRouteIndex,
+      isTransitioning: false,
+    };
+  }

-        return {
-          ...possibleNextState,
-          routes: nextRoutes,
-        };
-      } else {
-        nextState = possibleNextState;
-      }
-
-      return nextState;
-    },
+  return {
+    childRouters,

    getActionCreators(route, stateKey) {
-      return {
-        ...getNavigationActionCreators(route),
-        ...getCustomActionCreators(route, stateKey),
-      };
+      return getCustomActionCreators(route, stateKey);
    },

    getStateForAction(action, inputState) {
      let prevState = inputState ? { ...inputState } : inputState;
-      let state = inputState || this.getInitialState();
+      let state = inputState || getInitialState();
      let activeChildIndex = state.index;

      if (action.type === NavigationActions.INIT) {
@@ -152,7 +150,7 @@ export default (routeConfigs, config = {}) => {
        if (activeChildState && activeChildState !== activeChildLastState) {
          const routes = [...state.routes];
          routes[state.index] = activeChildState;
-          return this.getNextState(prevState, {
+          return getNextState(prevState, {
            ...state,
            routes,
          });
@@ -202,7 +200,7 @@ export default (routeConfigs, config = {}) => {
          if (newChildState && newChildState !== childState) {
            const routes = [...state.routes];
            routes[activeChildIndex] = newChildState;
-            return this.getNextState(prevState, {
+            return getNextState(prevState, {
              ...state,
              routes,
              index: activeChildIndex,
@@ -230,7 +228,7 @@ export default (routeConfigs, config = {}) => {
            ...lastRoute,
            params,
          };
-          return this.getNextState(prevState, {
+          return getNextState(prevState, {
            ...state,
            routes,
          });
@@ -238,7 +236,7 @@ export default (routeConfigs, config = {}) => {
      }

      if (activeChildIndex !== state.index) {
-        return this.getNextState(prevState, {
+        return getNextState(prevState, {
          ...state,
          index: activeChildIndex,
        });
@@ -282,7 +280,7 @@ export default (routeConfigs, config = {}) => {
      }

      if (index !== state.index || routes !== state.routes) {
-        return this.getNextState(prevState, {
+        return getNextState(prevState, {
          ...state,
          index,
          routes,
--- a/src/routers/tests/StackRouter-test.js
+++ b/src/routers/tests/StackRouter-test.js
@@ -426,12 +426,47 @@ describe('StackRouter', () => {
    expect(state3 && state3.index).toEqual(0);
  });

+  test('Handle navigation to nested navigator', () => {
+    const state = TestStackRouter.getStateForAction({
+      type: NavigationActions.INIT,
+    });
+    const action = TestStackRouter.getActionForPathAndParams('fo/22/b/hello');
+    /* $FlowFixMe */
+    const state2 = TestStackRouter.getStateForAction(action);
+    expect(state2).toEqual({
+      index: 0,
+      isTransitioning: false,
+      key: 'StackRouterRoot',
+      routes: [
+        {
+          index: 0,
+          key: 'id-4',
+          isTransitioning: false,
+          routeName: 'foo',
+          params: {
+            fooThing: '22',
+          },
+          routes: [
+            {
+              routeName: 'bar',
+              key: 'id-3',
+              params: {
+                barThing: 'hello',
+              },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
  test('popToTop bubbles up', () => {
    const ChildNavigator = () => <div />;
    ChildNavigator.router = StackRouter({
      Baz: { screen: () => <div /> },
      Qux: { screen: () => <div /> },
    });
+
    const router = StackRouter({
      Foo: { screen: () => <div /> },
      Bar: { screen: ChildNavigator },
@@ -657,6 +692,7 @@ describe('StackRouter', () => {
      state
    );

+    expect(state2.isTransitioning).toEqual(true);
    expect(state2.index).toEqual(1);
    expect(state2.routes[1].index).toEqual(1);
    expect(state2.routes[1].routes[1].index).toEqual(1);
--- a/src/routers/validateRouteConfigMap.js
+++ b/src/routers/validateRouteConfigMap.js
@@ -21,25 +21,24 @@ function validateRouteConfigMap(routeConfigs) {
        typeof screenComponent !== 'string' &&
        !routeConfig.getScreen)
    ) {
-      throw new Error(
-        `The component for route '${routeName}' must be a ` +
-          'React component. For example:\n\n' +
-          "import MyScreen from './MyScreen';\n" +
-          '...\n' +
-          `${routeName}: MyScreen,\n` +
-          '}\n\n' +
-          'You can also use a navigator:\n\n' +
-          "import MyNavigator from './MyNavigator';\n" +
-          '...\n' +
-          `${routeName}: MyNavigator,\n` +
-          '}'
-      );
+      throw new Error(`The component for route '${routeName}' must be a React component. For example:
+
+import MyScreen from './MyScreen';
+...
+${routeName}: MyScreen,
+}
+
+You can also use a navigator:
+
+import MyNavigator from './MyNavigator';
+...
+${routeName}: MyNavigator,
+}`);
    }

    if (routeConfig.screen && routeConfig.getScreen) {
      throw new Error(
-        `Route '${routeName}' should declare a screen or ` +
-          'a getScreen, not both.'
+        `Route '${routeName}' should declare a screen or a getScreen, not both.`
      );
    }
  });
--- a/src/utils/docsUrl.js
+++ b/src/utils/docsUrl.js
@@ -1,3 +1,3 @@
 export default function docsUrl(path) {
-  return `https://v2.reactnavigation.org/docs/${path}`;
+  return `https://reactnavigation.org/docs/${path}`;
 }
--- a/src/utils/invariant.js
+++ b/src/utils/invariant.js
@@ -1,14 +1,3 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
-
-'use strict';
-
 /**
 * Use invariant() to assert state which your program assumes to be true.
 *
--- a/src/utils/shallowEqual.js
+++ b/src/utils/shallowEqual.js
@@ -1,19 +1,5 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @typechecks
- *
- */
-
 /*eslint-disable no-self-compare */

-'use strict';
-
 const hasOwnProperty = Object.prototype.hasOwnProperty;

 /**
@@ -71,4 +57,4 @@ function shallowEqual(objA, objB) {
  return true;
 }

-module.exports = shallowEqual;
+export default shallowEqual;
--- a/src/utils/withDefaultValue.js
+++ b/src/utils/withDefaultValue.js
@@ -1,5 +1,5 @@
 export default (obj, key, defaultValue) => {
-  if (obj.hasOwnProperty(key)) {
+  if (obj.hasOwnProperty(key) && typeof obj[key] !== 'undefined') {
    return obj;
  }

--- a/src/views/Header/Header.js
+++ b/src/views/Header/Header.js
@@ -491,7 +491,12 @@ class Header extends React.PureComponent {
    const forceInset = headerForceInset || { top: 'always', bottom: 'never' };

    return (
-      <Animated.View style={this.props.layoutInterpolator(this.props)}>
+      <Animated.View
+        style={[
+          this.props.layoutInterpolator(this.props),
+          { backgroundColor: DEFAULT_BACKGROUND_COLOR },
+        ]}
+      >
        <SafeAreaView forceInset={forceInset} style={containerStyles}>
          <View style={StyleSheet.absoluteFill}>
            {options.headerBackground}
@@ -529,9 +534,11 @@ if (Platform.OS === 'ios') {
  };
 }

+const DEFAULT_BACKGROUND_COLOR = Platform.OS === 'ios' ? '#F7F7F7' : '#FFF';
+
 const styles = StyleSheet.create({
  container: {
-    backgroundColor: Platform.OS === 'ios' ? '#F7F7F7' : '#FFF',
+    backgroundColor: DEFAULT_BACKGROUND_COLOR,
    ...platformContainerStyles,
  },
  transparentContainer: {
--- a/src/views/Header/HeaderStyleInterpolator.js
+++ b/src/views/Header/HeaderStyleInterpolator.js
@@ -58,7 +58,15 @@ function forLayout(props) {

  const { first, last } = interpolate;
  const index = scene.index;
-  const width = layout.initWidth;
+
+  // We really shouldn't render the scene at all until we know the width of the
+  // stack. That said, in every case that I have ever seen, this has just been
+  // the full width of the window. This won't continue to be true if we support
+  // layouts like iPad master-detail. For now, in order to solve
+  // https://github.com/react-navigation/react-navigation/issues/4264, I have
+  // opted for the heuristic that we will use the window width until we have
+  // measured (and they will usually be the same).
+  const width = layout.initWidth || Dimensions.get('window').width;

  // Make sure the header stays hidden when transitioning between 2 screens
  // with no header.
--- a/src/views/NavigationConsumer.js
+++ b/src/views/NavigationConsumer.js
@@ -0,0 +1,3 @@
+import { NavigationConsumer } from './NavigationContext';
+
+export default NavigationConsumer;
--- a/src/views/NavigationContext.js
+++ b/src/views/NavigationContext.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import propTypes from 'prop-types';
 import createReactContext from 'create-react-context';

 const NavigationContext = createReactContext();
--- a/src/views/NavigationProvider.js
+++ b/src/views/NavigationProvider.js
@@ -0,0 +1,3 @@
+import { NavigationProvider } from './NavigationContext';
+
+export default NavigationProvider;
--- a/src/views/SceneView.js
+++ b/src/views/SceneView.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import propTypes from 'prop-types';
 import { NavigationProvider } from './NavigationContext';

 export default class SceneView extends React.PureComponent {
--- a/src/views/ScenesReducer.js
+++ b/src/views/ScenesReducer.js
@@ -65,6 +65,17 @@ export default function ScenesReducer(
  prevState,
  descriptors
 ) {
+  // Always update the descriptors
+  // This is a workaround for https://github.com/react-navigation/react-navigation/issues/4271
+  // It will be resolved in a better way when we re-write Transitioner
+  scenes.forEach(scene => {
+    const { route } = scene;
+    if (descriptors && descriptors[route.key]) {
+      scene.descriptor = descriptors[route.key];
+    }
+  });
+
+  // Bail out early if we didn't update the state
  if (prevState === nextState) {
    return scenes;
  }
--- a/src/views/StackView/StackView.js
+++ b/src/views/StackView/StackView.js
@@ -3,7 +3,6 @@ import { NativeModules } from 'react-native';

 import StackViewLayout from './StackViewLayout';
 import Transitioner from '../Transitioner';
-import NavigationActions from '../../NavigationActions';
 import StackActions from '../../routers/StackActions';
 import TransitionConfigs from './StackViewTransitionConfigs';

@@ -22,11 +21,13 @@ class StackView extends React.Component {
      <Transitioner
        render={this._render}
        configureTransition={this._configureTransition}
+        screenProps={this.props.screenProps}
        navigation={this.props.navigation}
        descriptors={this.props.descriptors}
        onTransitionStart={this.props.onTransitionStart}
        onTransitionEnd={(transition, lastTransition) => {
-          const { onTransitionEnd, navigation } = this.props;
+          const { navigationConfig, navigation } = this.props;
+          const { onTransitionEnd } = navigationConfig;
          if (transition.navigation.state.isTransitioning) {
            navigation.dispatch(
              StackActions.completeTransition({
--- a/src/views/StackView/StackViewLayout.js
+++ b/src/views/StackView/StackViewLayout.js
@@ -21,7 +21,7 @@ import withOrientation from '../withOrientation';
 import { NavigationProvider } from '../NavigationContext';

 import TransitionConfigs from './StackViewTransitionConfigs';
-import * as ReactNativeFeatures from '../../utils/ReactNativeFeatures';
+import { supportsImprovedSpringAnimation } from '../../utils/ReactNativeFeatures';

 const emptyFunction = () => {};

@@ -68,6 +68,20 @@ const animatedSubscribeValue = animatedValue => {
  }
 };

+const getDefaultHeaderHeight = isLandscape => {
+  if (Platform.OS === 'ios') {
+    if (isLandscape && !Platform.isPad) {
+      return 32;
+    } else if (IS_IPHONE_X) {
+      return 88;
+    } else {
+      return 64;
+    }
+  } else {
+    return 56;
+  }
+};
+
 class StackViewLayout extends React.Component {
  /**
   * Used to identify the starting point of the position when the gesture starts, such that it can
@@ -89,6 +103,19 @@ class StackViewLayout extends React.Component {
   */
  _immediateIndex = null;

+  constructor(props) {
+    super(props);
+
+    this.state = {
+      // Used when card's header is null and mode is float to make transition
+      // between screens with headers and those without headers smooth.
+      // This is not a great heuristic here. We don't know synchronously
+      // on mount what the header height is so we have just used the most
+      // common cases here.
+      floatingHeaderHeight: getDefaultHeaderHeight(props.isLandscape),
+    };
+  }
+
  _renderHeader(scene, headerMode) {
    const { options } = scene.descriptor;
    const { header } = options;
@@ -114,20 +141,24 @@ class StackViewLayout extends React.Component {
    const {
      mode,
      transitionProps,
-      prevTransitionProps,
+      lastTransitionProps,
      ...passProps
    } = this.props;

-    return renderHeader({
-      ...passProps,
-      ...transitionProps,
-      scene,
-      mode: headerMode,
-      transitionPreset: this._getHeaderTransitionPreset(),
-      leftInterpolator: headerLeftInterpolator,
-      titleInterpolator: headerTitleInterpolator,
-      rightInterpolator: headerRightInterpolator,
-    });
+    return (
+      <NavigationProvider value={scene.descriptor.navigation}>
+        {renderHeader({
+          ...passProps,
+          ...transitionProps,
+          scene,
+          mode: headerMode,
+          transitionPreset: this._getHeaderTransitionPreset(),
+          leftInterpolator: headerLeftInterpolator,
+          titleInterpolator: headerTitleInterpolator,
+          rightInterpolator: headerRightInterpolator,
+        })}
+      </NavigationProvider>
+    );
  }

  // eslint-disable-next-line class-methods-use-this
@@ -145,10 +176,7 @@ class StackViewLayout extends React.Component {
  }

  _reset(resetToIndex, duration) {
-    if (
-      Platform.OS === 'ios' &&
-      ReactNativeFeatures.supportsImprovedSpringAnimation()
-    ) {
+    if (Platform.OS === 'ios' && supportsImprovedSpringAnimation()) {
      Animated.spring(this.props.transitionProps.position, {
        toValue: resetToIndex,
        stiffness: 5000,
@@ -188,10 +216,7 @@ class StackViewLayout extends React.Component {
      }
    };

-    if (
-      Platform.OS === 'ios' &&
-      ReactNativeFeatures.supportsImprovedSpringAnimation()
-    ) {
+    if (Platform.OS === 'ios' && supportsImprovedSpringAnimation()) {
      Animated.spring(position, {
        toValue,
        stiffness: 5000,
@@ -227,7 +252,7 @@ class StackViewLayout extends React.Component {
        return false;
      }

-      position.stopAnimation((value: number) => {
+      position.stopAnimation(value => {
        this._isResponding = true;
        this._gestureStartValue = value;
      });
@@ -235,7 +260,7 @@ class StackViewLayout extends React.Component {
    },
    onMoveShouldSetPanResponder: (event, gesture) => {
      const {
-        transitionProps: { navigation, position, layout, scene, scenes },
+        transitionProps: { navigation, layout, scene },
        mode,
      } = this.props;
      const { index } = navigation.state;
@@ -391,30 +416,27 @@ class StackViewLayout extends React.Component {
    },
  });

+  _onFloatingHeaderLayout = e => {
+    this.setState({ floatingHeaderHeight: e.nativeEvent.layout.height });
+  };
+
  render() {
    let floatingHeader = null;
    const headerMode = this._getHeaderMode();
+
    if (headerMode === 'float') {
      const { scene } = this.props.transitionProps;
      floatingHeader = (
-        <NavigationProvider value={scene.descriptor.navigation}>
+        <View pointerEvents="box-none" onLayout={this._onFloatingHeaderLayout}>
          {this._renderHeader(scene, headerMode)}
-        </NavigationProvider>
+        </View>
      );
    }
    const {
-      transitionProps: { navigation, position, layout, scene, scenes },
+      transitionProps: { scene, scenes },
      mode,
    } = this.props;
-    const { index } = navigation.state;
-    const isVertical = mode === 'modal';
    const { options } = scene.descriptor;
-    const gestureDirection = options.gestureDirection;
-
-    const gestureDirectionInverted =
-      typeof gestureDirection === 'string'
-        ? gestureDirection === 'inverted'
-        : I18nManager.isRTL;

    const gesturesEnabled =
      typeof options.gesturesEnabled === 'boolean'
@@ -499,13 +521,14 @@ class StackViewLayout extends React.Component {
    return TransitionConfigs.getTransitionConfig(
      this.props.transitionConfig,
      this.props.transitionProps,
-      this.props.prevTransitionProps,
+      this.props.lastTransitionProps,
      isModal
    );
  };

  _renderCard = scene => {
    const { screenInterpolator } = this._getTransitionConfig();
+
    const style =
      screenInterpolator &&
      screenInterpolator({ ...this.props.transitionProps, scene });
@@ -518,21 +541,7 @@ class StackViewLayout extends React.Component {
    const headerMode = this._getHeaderMode();
    let marginTop = 0;
    if (!hasHeader && headerMode === 'float') {
-      const { isLandscape } = this.props;
-      let headerHeight;
-      if (Platform.OS === 'ios') {
-        if (isLandscape && !Platform.isPad) {
-          headerHeight = 52;
-        } else if (IS_IPHONE_X) {
-          headerHeight = 88;
-        } else {
-          headerHeight = 64;
-        }
-      } else {
-        headerHeight = 56;
-        // TODO (Android only): Need to handle translucent status bar.
-      }
-      marginTop = -headerHeight;
+      marginTop = -this.state.floatingHeaderHeight;
    }

    return (
--- a/src/views/StackView/StackViewTransitionConfigs.js
+++ b/src/views/StackView/StackViewTransitionConfigs.js
@@ -1,9 +1,9 @@
 import { Animated, Easing, Platform } from 'react-native';
 import StyleInterpolator from './StackViewStyleInterpolator';
-import * as ReactNativeFeatures from '../../utils/ReactNativeFeatures';
+import { supportsImprovedSpringAnimation } from '../../utils/ReactNativeFeatures';

 let IOSTransitionSpec;
-if (ReactNativeFeatures.supportsImprovedSpringAnimation()) {
+if (supportsImprovedSpringAnimation()) {
  // These are the exact values from UINavigationController's animation configuration
  IOSTransitionSpec = {
    timing: Animated.spring,
--- a/src/views/Transitioner.js
+++ b/src/views/Transitioner.js
@@ -63,6 +63,12 @@ class Transitioner extends React.Component {
      nextScenes = filterStale(nextScenes);
    }

+    // Update nextScenes when we change screenProps
+    // This is a workaround for https://github.com/react-navigation/react-navigation/issues/4271
+    if (nextProps.screenProps !== this.props.screenProps) {
+      this.setState({ nextScenes });
+    }
+
    if (nextScenes === this.state.scenes) {
      return;
    }
--- a/yarn.lock
+++ b/yarn.lock
@@ -3,14 +3,14 @@


 "@babel/code-frame@^7.0.0-beta.35":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.49.tgz#becd805482734440c9d137e46d77340e64d7f51b"
+  version "7.0.0-beta.51"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.51.tgz#bd71d9b192af978df915829d39d4094456439a0c"
  dependencies:
-    "@babel/highlight" "7.0.0-beta.49"
+    "@babel/highlight" "7.0.0-beta.51"

-"@babel/highlight@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.49.tgz#96bdc6b43e13482012ba6691b1018492d39622cc"
+"@babel/highlight@7.0.0-beta.51":
+  version "7.0.0-beta.51"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.51.tgz#e8844ae25a1595ccfd42b89623b4376ca06d225d"
  dependencies:
    chalk "^2.0.0"
    esutils "^2.0.2"
@@ -59,8 +59,8 @@ acorn@^3.0.4:
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"

 acorn@^5.0.0, acorn@^5.3.0, acorn@^5.5.0:
-  version "5.6.2"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.6.2.tgz#b1da1d7be2ac1b4a327fb9eab851702c5045b4e7"
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8"

 ajv-keywords@^2.1.0:
  version "2.1.1"
@@ -174,8 +174,8 @@ aproba@^1.0.3:
  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"

 arch@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.0.tgz#3613aa46149064b3c1f0607919bf1d4786e82889"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.1.tgz#8f5c2731aa35a30929221bb0640eed65175ec84e"

 are-we-there-yet@~1.1.2:
  version "1.1.5"
@@ -1082,8 +1082,8 @@ bcrypt-pbkdf@^1.0.0:
    tweetnacl "^0.14.3"

 big-integer@^1.6.7:
-  version "1.6.30"
-  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.30.tgz#7796f04acdd6ba56345f19049c8fffd427f09d16"
+  version "1.6.31"
+  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.31.tgz#6d7852486e67c642502dcc03f7225a245c9fc7fa"

 binary-extensions@^1.0.0:
  version "1.11.0"
@@ -1157,8 +1157,8 @@ browser-process-hrtime@^0.1.2:
  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.2.tgz#425d68a58d3447f02a04aa894187fce8af8b7b8e"

 browser-resolve@^1.11.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
  dependencies:
    resolve "1.1.7"

@@ -1385,14 +1385,14 @@ collection-visit@^1.0.0:
    object-visit "^1.0.0"

 color-convert@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.2.tgz#49881b8fba67df12a96bdf3f56c0aab9e7913147"
  dependencies:
-    color-name "^1.1.1"
+    color-name "1.1.1"

-color-name@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+color-name@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"

 color-support@^1.1.3:
  version "1.1.3"
@@ -1417,8 +1417,8 @@ common-tags@^1.4.0:
  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"

 compare-versions@^3.1.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.2.1.tgz#a49eb7689d4caaf0b6db5220173fd279614000f7"
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.3.0.tgz#af93ea705a96943f622ab309578b9b90586f39c3"

 component-emitter@^1.2.1:
  version "1.2.1"
@@ -1836,8 +1836,8 @@ envinfo@^3.0.0:
    which "^1.2.14"

 error-ex@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
  dependencies:
    is-arrayish "^0.2.1"

@@ -1879,8 +1879,8 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"

 escodegen@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.1.tgz#dbae17ef96c8e4bedb1356f4504fa4cc2f7cb7e2"
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.10.0.tgz#f647395de22519fbd0d928ffcf1d17e0dec2603e"
  dependencies:
    esprima "^3.1.3"
    estraverse "^4.2.0"
@@ -2244,8 +2244,8 @@ fbjs-scripts@^0.8.1:
    through2 "^2.0.0"

 fbjs@^0.8.0, fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.9:
-  version "0.8.16"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
  dependencies:
    core-js "^1.0.0"
    isomorphic-fetch "^2.1.1"
@@ -2253,7 +2253,7 @@ fbjs@^0.8.0, fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.9:
    object-assign "^4.1.0"
    promise "^7.1.1"
    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.9"
+    ua-parser-js "^0.7.18"

 figures@^1.7.0:
  version "1.7.0"
@@ -2520,8 +2520,8 @@ global@^4.3.0:
    process "~0.5.1"

 globals@^11.0.1:
-  version "11.5.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-11.5.0.tgz#6bc840de6771173b191f13d3a9c94d441ee92642"
+  version "11.7.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.7.0.tgz#a583faa43055b1aca771914bf68258e2fc125673"

 globals@^9.18.0:
  version "9.18.0"
@@ -2645,8 +2645,8 @@ hoek@2.x.x:
  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"

 hoist-non-react-statics@^2.2.0, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40"
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"

 home-or-tmp@^2.0.0:
  version "2.0.0"
@@ -2725,8 +2725,8 @@ ignore@^3.3.3:
  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.8.tgz#3f8e9c35d38708a3a7e0e9abb6c73e7ee7707b2b"

 image-size@^0.6.0:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.2.tgz#8ee316d4298b028b965091b673d5f1537adee5b4"
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.3.tgz#e7e5c65bb534bd7cdcedd6cb5166272a85f75fb2"

 import-local@^1.0.0:
  version "1.0.0"
@@ -4231,8 +4231,8 @@ number-is-nan@^1.0.0:
  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"

 nwsapi@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.0.2.tgz#33a0aab27c678d4dfdbba6a7f84b1c627fc4966f"
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.0.4.tgz#dc79040a5f77b97716dc79565fc7fc3ef7d50570"

 oauth-sign@~0.8.1, oauth-sign@~0.8.2:
  version "0.8.2"
@@ -4251,8 +4251,8 @@ object-copy@^0.1.0:
    kind-of "^3.0.3"

 object-keys@^1.0.8:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.12.tgz#09c53855377575310cca62f55bb334abff7b3ed2"

 object-visit@^1.0.0:
  version "1.0.1"
@@ -4581,8 +4581,8 @@ prettier-eslint@^8.8.1:
    typescript-eslint-parser "^11.0.0"

 prettier@^1.12.1, prettier@^1.7.0:
-  version "1.13.4"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.13.4.tgz#31bbae6990f13b1093187c731766a14036fa72e6"
+  version "1.13.5"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.13.5.tgz#7ae2076998c8edce79d63834e9b7b09fead6bfd0"

 pretty-format@^21.2.1:
  version "21.2.1"
@@ -4625,10 +4625,9 @@ promise@^7.1.1:
    asap "~2.0.3"

 prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1:
-  version "15.6.1"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
  dependencies:
-    fbjs "^0.8.16"
    loose-envify "^1.3.1"
    object-assign "^4.1.1"

@@ -4637,8 +4636,8 @@ pseudomap@^1.0.2:
  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"

 psl@^1.1.24:
-  version "1.1.27"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.27.tgz#2b2c77019db86855170d903532400bf71ee085b6"
+  version "1.1.28"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.28.tgz#4fb6ceb08a1e2214d4fd4de0ca22dae13740bc7b"

 punycode@^1.4.1:
  version "1.4.1"
@@ -4708,9 +4707,9 @@ react-devtools-core@3.0.0:
    shell-quote "^1.6.1"
    ws "^2.0.3"

-react-is@^16.4.0:
-  version "16.4.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.0.tgz#cc9fdc855ac34d2e7d9d2eb7059bbc240d35ffcf"
+react-is@^16.4.1:
+  version "16.4.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"

 react-lifecycles-compat@^3, react-lifecycles-compat@^3.0.4:
  version "3.0.4"
@@ -4829,9 +4828,9 @@ react-navigation-deprecated-tab-navigator@1.3.0:
  dependencies:
    react-native-tab-view "^0.0.77"

-react-navigation-drawer@0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/react-navigation-drawer/-/react-navigation-drawer-0.2.1.tgz#fed9b09a41ddfdc1ff198fad04a7b6051def8adf"
+react-navigation-drawer@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/react-navigation-drawer/-/react-navigation-drawer-0.4.2.tgz#49aa1bc6684923294a9c112dce75d8ec4184c64f"
  dependencies:
    react-native-drawer-layout-polyfill "^1.3.2"

@@ -4861,13 +4860,13 @@ react-test-renderer@16.2.0:
    prop-types "^15.6.0"

 react-test-renderer@^16.0.0:
-  version "16.4.0"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.0.tgz#0dbe0e24263e94e1830c7afb1f403707fad313a3"
+  version "16.4.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.1.tgz#f2fb30c2c7b517db6e5b10ed20bb6b0a7ccd8d70"
  dependencies:
    fbjs "^0.8.16"
    object-assign "^4.1.1"
    prop-types "^15.6.0"
-    react-is "^16.4.0"
+    react-is "^16.4.1"

 react-timer-mixin@^0.13.2:
  version "0.13.3"
@@ -5138,8 +5137,8 @@ resolve@1.1.7:
  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"

 resolve@^1.5.0, resolve@^1.6.0:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.7.1.tgz#aadd656374fd298aee895bc026b8297418677fd3"
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
  dependencies:
    path-parse "^1.0.5"

@@ -5833,10 +5832,10 @@ typescript-eslint-parser@^11.0.0:
    semver "5.4.1"

 typescript@^2.5.1:
-  version "2.9.1"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.9.1.tgz#fdb19d2c67a15d11995fd15640e373e09ab09961"
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.9.2.tgz#1cbf61d05d6b96269244eb6a3bce4bd914e0f00c"

-ua-parser-js@^0.7.9:
+ua-parser-js@^0.7.18:
  version "0.7.18"
  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"

@@ -6020,8 +6019,8 @@ whatwg-mimetype@^2.0.0, whatwg-mimetype@^2.1.0:
  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.1.0.tgz#f0f21d76cbba72362eb609dbed2a30cd17fcc7d4"

 whatwg-url@^6.4.0, whatwg-url@^6.4.1:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.4.1.tgz#fdb94b440fd4ad836202c16e9737d511f012fd67"
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.5.0.tgz#f2df02bff176fd65070df74ad5ccbb5a199965a8"
  dependencies:
    lodash.sortby "^4.7.0"
    tr46 "^1.0.1"
Author	SHA1	Message	Date
Brent Vatne	3dd3f5b804	Release 2.5.4	2018-06-27 15:24:34 -07:00
Julian Paas	3d8d5a0634	Adds getNavigation to web exports (#4551 )	2018-06-27 13:34:45 -07:00
Brent Vatne	54448ed070	Prevent flicker in header when header is null on initial mount (when using default header sizes) (#4577 ) * Prevent flicker in header in most common cases. Fixes https://github.com/react-navigation/react-navigation/issues/4264 * Update snapshots	2018-06-26 13:27:43 -07:00
Julian Paas	369ac2b568	Adds SwitchNavigator to react-navigation-web (#4550 ) * Adds SwitchNavigator to react-navigation-web	2018-06-26 11:24:23 -07:00
Vojtech Novak	3dc592f679	Update ISSUE_TEMPLATE.md (#4575 )	2018-06-25 15:41:56 -07:00
Brent Vatne	4f93200c91	Release 2.5.3	2018-06-25 14:37:26 -07:00
Brent Vatne	665736d754	Hoist navigation action creators for router above those for child router	2018-06-25 14:33:01 -07:00
Brent Vatne	5598c3e28f	Update changelog	2018-06-23 11:03:38 -07:00
Brent Vatne	cde6e845cd	Release 2.5.2	2018-06-23 11:02:14 -07:00
Brent Vatne	fb8c712ad8	Update react-navigation-drawer to 0.4.2 to fix toggle regression	2018-06-23 11:01:47 -07:00
Brent Vatne	350b7e0aed	Release 2.5.1	2018-06-22 13:21:22 -07:00
Brent Vatne	de112565d3	Fix name of prop, should be lastTransitionProps instead of prevTransitionProps in StackViewLayout - Fixes #4542	2018-06-22 13:18:26 -07:00
Brent Vatne	acdd515c13	Update example app.json	2018-06-22 12:50:50 -07:00
Rodrigo Bermúdez Schettino	452a6d2004	Improve changelog format (#4559 ) Bug fixes should be listed in the "Fixed" section instead of "Changed" according to keepachangelog.	2018-06-22 10:41:58 -07:00
Brent Vatne	08c8031a71	Release 2.5.0	2018-06-22 10:32:11 -07:00
Eric Vicenti	608365266a	@ericvicenti/universe (#4493 ) * Isolate modules for uncontainerized navigators * Clean up prop-types * Fix warnings and web import friendlyness * strip a flow * Standalone provider/consumer navigation context * export shallowEqual as module * address various lint # Conflicts: # src/navigators/createStackNavigator.js * Get tests to pass	2018-06-22 10:20:27 -07:00
Rodrigo Bermúdez Schettino	247fba56e6	Fix typo in Pull Request Template (#4558 ) Also link to the "Unreleased" section in CHANGELOG.	2018-06-22 10:19:41 -07:00
Brent Vatne	060f5dcecf	Update PR template for changelog	2018-06-22 08:25:38 -07:00
Rodrigo Bermúdez Schettino	fdec05c87a	Create CHANGELOG.md (#4544 ) List all changes between versions to notify about notable changes in releases.	2018-06-22 08:22:15 -07:00
Brent Vatne	76da804574	Fixes #4491	2018-06-21 15:24:52 -07:00
Brent Vatne	dde091848a	Release 2.4.1	2018-06-20 15:35:07 -07:00
Brent Vatne	824fa32416	Improve playground on Android	2018-06-20 14:20:00 -07:00
Brent Vatne	c518e7f36c	Improve example	2018-06-20 13:51:34 -07:00
Brent Vatne	1cfe01dbdb	Release 2.4.0	2018-06-20 13:38:05 -07:00
Brent Vatne	e62a9050fd	Fix withDefaultValue	2018-06-20 13:37:33 -07:00
Christophe Hurpeau	310b909ba8	createNavigationContainer: rethrow the error instead of creating a new one (#4533 ) Creating a new error makes the stack unreadable in sentry, because the stack is stringified when the error is cast to string to create a new one. Is there another reason to do that ? Alternative possible solution would be to add a method to be able to handle the error ourselves ?	2018-06-20 13:03:02 -07:00
Eric Vicenti	aebe8a5c23	Fix isTransitioning on nested navigate (#4520 ) This bug wasnt apparent until we fixed the transitioner to fully respect isTransitioning. The router did not handle this properly until now. Enhanced a test to verify this in the future	2018-06-20 12:17:14 -07:00
Vladislav Shabanov	e1df2c6c4a	Make headers of non-standard heights work correctly in StackNavigator when header is null (Fixes #4208 ) (#4353 ) * Measure header height dynamically * Add comment * StacksOverTopTabs playground example	2018-06-15 08:10:43 -07:00
Ashoat Tevosyan	fa86718a24	Revert "Export getNavigationActionCreators (#4258 )" (#4495 ) This reverts commit `1e7d8d55c3`.	2018-06-14 11:34:38 -07:00
Ashoat Tevosyan	c8e5673183	[flow] Type getNavigation (#4505 ) Unrelated change in here: typing `tabBarOnPress`'s `defaultHandler`. Wasn't sure if I should make a separate PR for a single unrelated line, let me know if you'd prefer that going forward.	2018-06-14 11:33:50 -07:00
Ashoat Tevosyan	b312a5e307	[ReduxExample] Update to use react-navigation-redux-helpers@2.0.0 (#4504 )	2018-06-14 11:15:11 -07:00
Brent Vatne	ee6a6c53b1	Fix incorrect methods being called in createKeyboardAwareNavigator	2018-06-13 14:50:03 -07:00
Eric Vicenti	8edec88341	Export getNavigation as public API, test redux (#4489 ) This unblocks the fixing of react-navigation-redux-helpers to unbreak redux support in 2.3 https://github.com/react-navigation/react-navigation-redux-helpers/pull/37 All redux users will need to change their code to reflect the changes made here to `ReduxExample/AppNavigator`	2018-06-12 11:59:09 -07:00
Brent Vatne	b8d6d4253d	Release 2.3.1	2018-06-12 11:32:08 -07:00
Eric Vicenti	0adb1ba9f1	Export getNavigation as public API, test redux (#4488 ) This unblocks the fixing of react-navigation-redux-helpers to unbreak redux support in 2.3 https://github.com/react-navigation/react-navigation-redux-helpers/pull/37 All redux users will need to change their code to reflect the changes made here to `ReduxExample/AppNavigator`	2018-06-12 11:30:23 -07:00
Brent Vatne	d3ef3d1271	Release 2.3.0	2018-06-11 15:54:41 -07:00
k-murakami0609	89a24bdc12	fix broken link to Common mistakes (#4468 )	2018-06-10 10:41:18 -07:00
Brent Vatne	128a95b496	Release 2.3.0-beta.1	2018-06-09 14:18:09 -07:00
Brent Vatne	470eaf3b08	Make the actions available on the navigator navigation prop the same as its children (#4467 ) * Make the actions available on the navigator navigation prop the same as its children * Fix test and improve code clarity	2018-06-09 14:13:21 -07:00
Brent Vatne	c91e8206a5	Fix ScenesReducer test	2018-06-08 17:44:32 -07:00
Brent Vatne	da283915f8	Release 2.3.0-beta.0	2018-06-08 17:36:42 -07:00
Brent Vatne	3031e7bd80	Update header when screenProps change (Fixes #4271 )	2018-06-08 17:35:17 -07:00
Brent Vatne	98a4f26f26	Bump react-navigation-drawer. Fixes #4416	2018-06-08 16:27:36 -07:00
Brent Vatne	b7f5435c93	Fix withNavigation in non-floating headers	2018-06-08 15:48:21 -07:00
Brent Vatne	21ef4fcb82	Return result of dispatch from action helpers	2018-06-08 14:33:01 -07:00
Eric Vicenti	5f64a2a9cb	Refactor redo, child navigation to navigation prop (#4453 )	2018-06-08 14:20:07 -07:00
Brent Vatne	992d0fb267	Release 2.2.5	2018-06-08 09:40:39 -07:00
ensecoz	6f41379ed1	extract correct property for onTransitionEnd (#4459 )	2018-06-08 09:35:36 -07:00
Tom Klaver	267af01e72	throw readable error when wrong navigation prop is passed (#4455 ) * add warning when passing wrong navigation prop: https://github.com/react-navigation/react-navigation/issues/3598 * add test for throwing when passing wrong navigation prop * wrong nav prop error: update snapshots, throw => throw new, update docs reference url	2018-06-08 09:31:05 -07:00
Arthur Levoyer	b68c3a755d	Add missing tests about DeepLinking (#4451 ) * Fix #1950 (Deep link not working when nesting have more than two levels.) * Fix test	2018-06-07 11:37:57 -07:00
Brent Vatne	7345634493	Release 2.2.4	2018-06-07 11:33:14 -07:00
Brent Vatne	6517169119	Re-compute options when screenProps change	2018-06-07 11:31:31 -07:00