reactotron hello world

.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 repository as that is outside of the scope of React 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.
 

.release-it.json

@@ -1,15 +0,0 @@
-{
-  "increment": "conventional:angular",
-  "changelogCommand": "conventional-changelog -p angular | tail -n +3",
-  "safeBump": false,
-  "src": {
-    "commitMessage": "chore: release %s",
-    "tagName": "v%s"
-  },
-  "npm": {
-    "publish": true
-  },
-  "github": {
-    "release": true
-  }
-}

CHANGELOG.md

@@ -6,31 +6,79 @@ 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]
+### Changed
+- StackNavigator.replace method no longer requires a key param. If the key is left undefined, the last screen in the stack will be replaced.
 
-## [3.0.2] - [2018-11-27](https://github.com/react-navigation/react-navigation/releases/tag/3.0.2)
+## [2.6.2] - [2018-07-06](https://github.com/react-navigation/react-navigation/releases/tag/2.6.2)
+### Changed
+- Relax vertical padding warnings on header.
 
-## Fixes
+## [2.6.1] - [2018-07-05](https://github.com/react-navigation/react-navigation/releases/tag/2.6.1)
+### Added
+- Warn for more invalid headerStyle properties (padding, top/right/bottom/left, position).
 
-- Fix `drawerLockMode` on drawer navigator
+### Fixed
-- Fix RTL support in drawer navigator
+- Fixed missing header shadow on Android.
 
-## [3.0.1] - [2018-11-26](https://github.com/react-navigation/react-navigation/releases/tag/3.0.1)
+## [2.6.0] - [2018-07-04](https://github.com/react-navigation/react-navigation/releases/tag/2.6.0)
+### Added
+- [NavigationEvents](https://github.com/react-navigation/react-navigation/pull/4188) component as a declarative interface for subscribing to navigation focus events.
 
-## Fixes
+### Fixed
+- Fix stack router child router delegation priority (https://github.com/react-navigation/react-navigation/commit/e8c1833053e37d28f0ce505ff323565abf23b6a2)
+- Avoid crash when calling isFocused on old route (https://github.com/react-navigation/react-navigation/commit/0921889f7a3acfc6d6bcc4909d209eeeee985ba7)
+- Stack router no longer attempts to parse query params within path handling
+- Switch router now has exact same param treatment for URLs as stack router does
 
-- fix NavigationTestUtils.js deprecated file import.
+### Changed
-- Update `getParam` flow typings to check `key` and `fallback` arguments, as well as return the correct type automatically.
+- Internally we no longer need to special case PlatformHelpers by platform as react-native-web handles the APIs we mocked out with it now.
-- Fix regression in backgroundColor on cardStyle for stack navigator
 
-## [3.0.0] - [2018-11-17](https://github.com/react-navigation/react-navigation/releases/tag/3.0.0)
+## [2.5.5] - [2018-06-27](https://github.com/react-navigation/react-navigation/releases/tag/2.5.5)
+### Added
+- Throw error in development mode when header navigation option is set to a string - a common mistake that would otherwise result in a cryptic error message.
+- Throw error in development mode when title is not a string.
 
-- Changes between the latest 2.x release and 3.0.0 are listed on the blog at https://reactnavigation.org/blog/2018/11/17/react-navigation-3.0.html
+### Fixed
+- Delegate to child routers for more than just the top screen in the stack.
+- Update react-navigation-drawer to 0.4.3 to fix `initialRouteParams` option
 
-# [Previous major versions]
+## [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.x](https://github.com/react-navigation/react-navigation/blob/2.x/CHANGELOG.md)
+## [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)
 
-[Unreleased]: https://github.com/react-navigation/react-navigation/compare/3.0.2...HEAD
+## [2.5.2] - [2018-06-23](https://github.com/react-navigation/react-navigation/releases/tag/2.5.2)
-[3.0.2]: https://github.com/react-navigation/react-navigation/compare/3.0.1...3.0.2
+### Fixed
-[3.0.1]: https://github.com/react-navigation/react-navigation/compare/3.0.0...3.0.1
+- Update react-navigation-drawer to fix regression in toggleDrawer
-[3.0.0]: https://github.com/react-navigation/react-navigation/compare/2.x...3.0.0
+
+## [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.6.2...HEAD
+[2.6.2]: https://github.com/react-navigation/react-navigation/compare/2.6.1...2.6.2
+[2.6.1]: https://github.com/react-navigation/react-navigation/compare/2.6.0...2.6.1
+[2.6.0]: https://github.com/react-navigation/react-navigation/compare/2.5.5...2.6.0
+[2.5.5]: https://github.com/react-navigation/react-navigation/compare/2.5.4...2.5.5
+[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

NavigationTestUtils.js

@@ -1,7 +0,0 @@
-import { _TESTING_ONLY_reset_container_count } from '@react-navigation/native/src/createAppContainer';
-
-export default {
-  resetInternalState: () => {
-    _TESTING_ONLY_reset_container_count();
-  },
-};

README.md

@@ -1,6 +1,6 @@
 # React Navigation
 
-[![npm version](https://badge.fury.io/js/react-navigation.svg)](https://badge.fury.io/js/react-navigation) [![CircleCI badge](https://circleci.com/gh/react-navigation/react-navigation/tree/master.svg?style=shield)](https://circleci.com/gh/react-navigation/react-navigation/tree/master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactnavigation.org/docs/contributing.html)
+[![npm version](https://badge.fury.io/js/react-navigation.svg)](https://badge.fury.io/js/react-navigation) [![codecov](https://codecov.io/gh/react-navigation/react-navigation/branch/master/graph/badge.svg)](https://codecov.io/gh/react-navigation/react-navigation) [![CircleCI badge](https://circleci.com/gh/react-navigation/react-navigation/tree/master.svg?style=shield)](https://circleci.com/gh/react-navigation/react-navigation/tree/master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactnavigation.org/docs/contributing.html)
 
 React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution based on Javascript.
 

examples/NavigationPlayground/App.js

@@ -1,9 +1,2 @@
-import { Platform } from 'react-native';
-import { useScreens } from 'react-native-screens';
-
-if (Platform.OS === 'android') {
-  //  useScreens();
-}
-
 import App from './js/App';
 export default App;

examples/NavigationPlayground/app.json

@@ -11,7 +11,8 @@
     "splash": {
       "image": "./assets/icons/splash.png"
     },
-    "sdkVersion": "30.0.0",
+    "sdkVersion": "27.0.0",
+    "entryPoint": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
     "assetBundlePatterns": [
       "**/*"
     ],
@@ -23,4 +24,4 @@
       "package": "com.reactnavigation.example"
     }
   }
-}
+}

examples/NavigationPlayground/js/App.js

@@ -11,20 +11,15 @@ import {
   Platform,
   ScrollView,
   StyleSheet,
+  TouchableOpacity,
   Text,
   StatusBar,
   View,
 } from 'react-native';
-import {
+
-  RectButton,
+import Reactotron from 'reactotron-react-native';
-  NativeViewGestureHandler,
+
-} from 'react-native-gesture-handler';
+import { SafeAreaView, createStackNavigator } from 'react-navigation';
-import {
-  createAppContainer,
-  SafeAreaView,
-  createStackNavigator,
-} from 'react-navigation';
-import { Assets as StackAssets } from 'react-navigation-stack';
 
 import CustomTabs from './CustomTabs';
 import CustomTransitioner from './CustomTransitioner';
@@ -42,13 +37,15 @@ import SimpleStack from './SimpleStack';
 import StackWithHeaderPreset from './StackWithHeaderPreset';
 import StackWithTranslucentHeader from './StackWithTranslucentHeader';
 import SimpleTabs from './SimpleTabs';
-import CustomTabUI from './CustomTabUI';
 import SwitchWithStacks from './SwitchWithStacks';
 import TabsWithNavigationFocus from './TabsWithNavigationFocus';
 import TabsWithNavigationEvents from './TabsWithNavigationEvents';
 import KeyboardHandlingExample from './KeyboardHandlingExample';
 
-process.env.REACT_NAV_LOGGING = true;
+Reactotron.configure()
+  .useReactNative()
+  .connect();
+console.tron = Reactotron;
 
 const ExampleInfo = {
   SimpleStack: {
@@ -148,10 +145,6 @@ const ExampleInfo = {
     description:
       'Demo automatic handling of keyboard showing/hiding inside StackNavigator',
   },
-  CustomTabUI: {
-    name: 'Custom Tabs UI',
-    description: 'Render additional views around a Tab navigator',
-  },
 };
 
 const ExampleRoutes = {
@@ -176,7 +169,6 @@ const ExampleRoutes = {
   ModalStack: ModalStack,
   StacksWithKeys: StacksWithKeys,
   StacksInTabs: StacksInTabs,
-  CustomTabUI: CustomTabUI,
   StacksOverTabs: StacksOverTabs,
   StacksOverTopTabs: StacksOverTopTabs,
   LinkStack: {
@@ -203,7 +195,12 @@ class MainScreen extends React.Component<any, State> {
   };
 
   componentDidMount() {
-    Asset.loadAsync(StackAssets);
+    Asset.fromModule(
+      require('react-navigation/src/views/assets/back-icon-mask.png')
+    ).downloadAsync();
+    Asset.fromModule(
+      require('react-navigation/src/views/assets/back-icon.png')
+    ).downloadAsync();
   }
 
   render() {
@@ -245,72 +242,69 @@ class MainScreen extends React.Component<any, State> {
 
     return (
       <View style={{ flex: 1 }}>
-        <NativeViewGestureHandler>
+        <Animated.ScrollView
-          <Animated.ScrollView
+          style={{ flex: 1 }}
-            style={{ flex: 1, backgroundColor: '#eee' }}
+          scrollEventThrottle={1}
-            scrollEventThrottle={1}
+          onScroll={Animated.event(
-            onScroll={Animated.event(
+            [
-              [
+              {
-                {
+                nativeEvent: { contentOffset: { y: this.state.scrollY } },
-                  nativeEvent: { contentOffset: { y: this.state.scrollY } },
+              },
-                },
+            ],
-              ],
+            { useNativeDriver: true }
-              { useNativeDriver: true }
+          )}
-            )}
+        >
+          <Animated.View
+            style={[
+              styles.backgroundUnderlay,
+              {
+                transform: [
+                  { scale: backgroundScale },
+                  { translateY: backgroundTranslateY },
+                ],
+              },
+            ]}
+          />
+          <Animated.View
+            style={{ opacity, transform: [{ scale }, { translateY }] }}
           >
-            <Animated.View
-              style={[
-                styles.backgroundUnderlay,
-                {
-                  transform: [
-                    { scale: backgroundScale },
-                    { translateY: backgroundTranslateY },
-                  ],
-                },
-              ]}
-            />
-            <Animated.View
-              style={{ opacity, transform: [{ scale }, { translateY }] }}
-            >
-              <SafeAreaView
-                style={styles.bannerContainer}
-                forceInset={{ top: 'always', bottom: 'never' }}
-              >
-                <View style={styles.banner}>
-                  <Image
-                    source={require('./assets/NavLogo.png')}
-                    style={styles.bannerImage}
-                  />
-                  <Text style={styles.bannerTitle}>
-                    React Navigation Examples
-                  </Text>
-                </View>
-              </SafeAreaView>
-            </Animated.View>
-
             <SafeAreaView
-              forceInset={{ top: 'never', bottom: 'always' }}
+              style={styles.bannerContainer}
-              style={{ backgroundColor: '#eee' }}
+              forceInset={{ top: 'always', bottom: 'never' }}
             >
-              <View style={{ backgroundColor: '#fff' }}>
+              <View style={styles.banner}>
-                {Object.keys(ExampleRoutes).map((routeName: string) => (
+                <Image
-                  <RectButton
+                  source={require('./assets/NavLogo.png')}
-                    key={routeName}
+                  style={styles.bannerImage}
-                    underlayColor="#ccc"
+                />
-                    activeOpacity={0.3}
+                <Text style={styles.bannerTitle}>
-                    onPress={() => {
+                  React Navigation Examples
-                      let route = ExampleRoutes[routeName];
+                </Text>
-                      if (route.screen || route.path || route.params) {
+              </View>
-                        const { path, params, screen } = route;
+            </SafeAreaView>
-                        const { router } = screen;
+          </Animated.View>
-                        const action =
+
-                          path &&
+          <SafeAreaView forceInset={{ bottom: 'always', horizontal: 'never' }}>
-                          router.getActionForPathAndParams(path, params);
+            <View style={{ backgroundColor: '#fff' }}>
-                        navigation.navigate(routeName, {}, action);
+              {Object.keys(ExampleRoutes).map((routeName: string) => (
-                      } else {
+                <TouchableOpacity
-                        navigation.navigate(routeName);
+                  key={routeName}
-                      }
+                  onPress={() => {
-                    }}
+                    let route = ExampleRoutes[routeName];
+                    if (route.screen || route.path || route.params) {
+                      const { path, params, screen } = route;
+                      const { router } = screen;
+                      const action =
+                        path && router.getActionForPathAndParams(path, params);
+                      navigation.navigate(routeName, {}, action);
+                    } else {
+                      navigation.navigate(routeName);
+                    }
+                  }}
+                >
+                  <SafeAreaView
+                    style={styles.itemContainer}
+                    forceInset={{ veritcal: 'never', bottom: 'never' }}
                   >
                     <View style={styles.item}>
                       <Text style={styles.title}>
@@ -320,12 +314,12 @@ class MainScreen extends React.Component<any, State> {
                         {ExampleInfo[routeName].description}
                       </Text>
                     </View>
-                  </RectButton>
+                  </SafeAreaView>
-                ))}
+                </TouchableOpacity>
-              </View>
+              ))}
-            </SafeAreaView>
+            </View>
-          </Animated.ScrollView>
+          </SafeAreaView>
-        </NativeViewGestureHandler>
+        </Animated.ScrollView>
         <StatusBar barStyle="light-content" />
         <Animated.View
           style={[styles.statusBarUnderlay, { opacity: underlayOpacity }]}
@@ -335,37 +329,36 @@ class MainScreen extends React.Component<any, State> {
   }
 }
 
-const AppNavigator = createAppContainer(
+const AppNavigator = createStackNavigator(
-  createStackNavigator(
+  {
-    {
+    ...ExampleRoutes,
-      ...ExampleRoutes,
+    Index: {
-      Index: {
+      screen: MainScreen,
-        screen: MainScreen,
-      },
     },
-    {
+  },
-      initialRouteName: 'Index',
+  {
-      headerMode: 'none',
+    initialRouteName: 'Index',
+    headerMode: 'none',
 
-      /*
+    /*
-     * Use modal on iOS because the card mode comes from the right,
+   * Use modal on iOS because the card mode comes from the right,
-     * which conflicts with the drawer example gesture
+   * which conflicts with the drawer example gesture
-     */
+   */
-      mode: Platform.OS === 'ios' ? 'modal' : 'card',
+    mode: Platform.OS === 'ios' ? 'modal' : 'card',
-    }
+  }
-  )
 );
 
-export default class App extends React.Component {
+const App = () => <AppNavigator persistenceKey="yes" />;
-  render() {
+
-    return <AppNavigator /* persistenceKey="if-you-want-it" */ />;
+export default App;
-  }
-}
 
 const styles = StyleSheet.create({
   item: {
     paddingHorizontal: 16,
     paddingVertical: 12,
+  },
+  itemContainer: {
+    backgroundColor: '#fff',
     borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: '#ddd',
   },

examples/NavigationPlayground/js/CustomTabUI.js

@@ -1,129 +0,0 @@
-import React from 'react';
-import {
-  LayoutAnimation,
-  View,
-  StyleSheet,
-  StatusBar,
-  Text,
-} from 'react-native';
-import { SafeAreaView, createMaterialTopTabNavigator } from 'react-navigation';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import { Button } from './commonComponents/ButtonWithMargin';
-
-class MyHomeScreen extends React.Component {
-  static navigationOptions = {
-    tabBarLabel: 'Home',
-    tabBarIcon: ({ tintColor, focused, horizontal }) => (
-      <Ionicons
-        name={focused ? 'ios-home' : 'ios-home-outline'}
-        size={horizontal ? 20 : 26}
-        style={{ color: tintColor }}
-      />
-    ),
-  };
-  render() {
-    const { navigation } = this.props;
-    return (
-      <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
-        <Text>Home Screen</Text>
-        <Button
-          onPress={() => navigation.navigate('Home')}
-          title="Go to home tab"
-        />
-        <Button onPress={() => navigation.goBack(null)} title="Go back" />
-      </SafeAreaView>
-    );
-  }
-}
-
-class ReccomendedScreen extends React.Component {
-  static navigationOptions = {
-    tabBarLabel: 'Reccomended',
-    tabBarIcon: ({ tintColor, focused, horizontal }) => (
-      <Ionicons
-        name={focused ? 'ios-people' : 'ios-people-outline'}
-        size={horizontal ? 20 : 26}
-        style={{ color: tintColor }}
-      />
-    ),
-  };
-  render() {
-    const { navigation } = this.props;
-    return (
-      <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
-        <Text>Reccomended Screen</Text>
-        <Button
-          onPress={() => navigation.navigate('Home')}
-          title="Go to home tab"
-        />
-        <Button onPress={() => navigation.goBack(null)} title="Go back" />
-      </SafeAreaView>
-    );
-  }
-}
-
-class FeaturedScreen extends React.Component {
-  static navigationOptions = ({ navigation }) => ({
-    tabBarLabel: 'Featured',
-    tabBarIcon: ({ tintColor, focused, horizontal }) => (
-      <Ionicons
-        name={focused ? 'ios-star' : 'ios-star-outline'}
-        size={horizontal ? 20 : 26}
-        style={{ color: tintColor }}
-      />
-    ),
-  });
-  render() {
-    const { navigation } = this.props;
-    return (
-      <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
-        <Text>Featured Screen</Text>
-        <Button
-          onPress={() => navigation.navigate('Home')}
-          title="Go to home tab"
-        />
-        <Button onPress={() => navigation.goBack(null)} title="Go back" />
-      </SafeAreaView>
-    );
-  }
-}
-
-const SimpleTabs = createMaterialTopTabNavigator({
-  Home: MyHomeScreen,
-  Reccomended: ReccomendedScreen,
-  Featured: FeaturedScreen,
-});
-
-class TabNavigator extends React.Component {
-  static router = SimpleTabs.router;
-  componentWillUpdate() {
-    LayoutAnimation.easeInEaseOut();
-  }
-  render() {
-    const { navigation } = this.props;
-    const { routes, index } = navigation.state;
-    const activeRoute = routes[index];
-    let bottom = null;
-    if (activeRoute.routeName !== 'Home') {
-      bottom = (
-        <View style={{ height: 50, borderTopWidth: StyleSheet.hairlineWidth }}>
-          <Button title="Check out" onPress={() => {}} />
-        </View>
-      );
-    }
-    return (
-      <View style={{ flex: 1 }}>
-        <StatusBar barStyle="default" />
-        <SafeAreaView
-          style={{ flex: 1 }}
-          forceInset={{ horizontal: 'always', top: 'always' }}
-        >
-          <SimpleTabs navigation={navigation} />
-        </SafeAreaView>
-        {bottom}
-      </View>
-    );
-  }
-}
-
-export default TabNavigator;

examples/NavigationPlayground/js/CustomTabs.js

@@ -9,11 +9,15 @@ import {
   StyleSheet,
   StatusBar,
   Text,
+  TouchableOpacity,
   View,
 } from 'react-native';
-import { BorderlessButton } from 'react-native-gesture-handler';
+import {
-import { createNavigator, SafeAreaView, TabRouter } from 'react-navigation';
+  createNavigator,
-import { createAppContainer } from 'react-navigation';
+  createNavigationContainer,
+  SafeAreaView,
+  TabRouter,
+} from 'react-navigation';
 import SampleText from './SampleText';
 import { Button } from './commonComponents/ButtonWithMargin';
 
@@ -49,13 +53,13 @@ const CustomTabBar = ({ navigation }) => {
   return (
     <SafeAreaView style={styles.tabContainer}>
       {routes.map(route => (
-        <BorderlessButton
+        <TouchableOpacity
           onPress={() => navigation.navigate(route.routeName)}
           style={styles.tab}
           key={route.routeName}
         >
           <Text>{route.routeName}</Text>
-        </BorderlessButton>
+        </TouchableOpacity>
       ))}
     </SafeAreaView>
   );
@@ -94,7 +98,7 @@ const CustomTabRouter = TabRouter(
   }
 );
 
-const CustomTabs = createAppContainer(
+const CustomTabs = createNavigationContainer(
   createNavigator(CustomTabView, CustomTabRouter, {})
 );
 

examples/NavigationPlayground/js/CustomTransitioner.js

@@ -9,10 +9,10 @@ import {
   View,
 } from 'react-native';
 import {
-  createAppContainer,
   Transitioner,
   SafeAreaView,
   StackRouter,
+  createNavigationContainer,
   createNavigator,
 } from 'react-navigation';
 import SampleText from './SampleText';
@@ -100,7 +100,7 @@ const CustomRouter = StackRouter({
   Settings: { screen: MySettingsScreen },
 });
 
-const CustomTransitioner = createAppContainer(
+const CustomTransitioner = createNavigationContainer(
   createNavigator(CustomNavigationView, CustomRouter, {})
 );
 

examples/NavigationPlayground/js/Drawer.js

@@ -22,7 +22,7 @@ const MyNavScreen = ({ navigation, banner }) => (
         onPress={() => navigation.navigate('Email')}
         title="Open other screen"
       />
-      <Button onPress={() => navigation.navigate('Index')} title="Go back" />
+      <Button onPress={() => navigation.goBack(null)} title="Go back" />
     </SafeAreaView>
     <StatusBar barStyle="default" />
   </ScrollView>
@@ -46,39 +46,33 @@ DraftsScreen.navigationOptions = {
   headerTitle: 'Drafts',
 };
 
-const InboxStack = createStackNavigator(
+const InboxStack = createStackNavigator({
-  {
+  Inbox: { screen: InboxScreen },
-    Inbox: { screen: InboxScreen },
+  Email: { screen: EmailScreen },
-    Email: { screen: EmailScreen },
+});
-  },
-  {
-    navigationOptions: {
-      drawerLabel: 'Inbox',
-      drawerIcon: ({ tintColor }) => (
-        <MaterialIcons
-          name="move-to-inbox"
-          size={24}
-          style={{ color: tintColor }}
-        />
-      ),
-    },
-  }
-);
 
-const DraftsStack = createStackNavigator(
+InboxStack.navigationOptions = {
-  {
+  drawerLabel: 'Inbox',
-    Drafts: { screen: DraftsScreen },
+  drawerIcon: ({ tintColor }) => (
-    Email: { screen: EmailScreen },
+    <MaterialIcons
-  },
+      name="move-to-inbox"
-  {
+      size={24}
-    navigationOptions: {
+      style={{ color: tintColor }}
-      drawerLabel: 'Drafts',
+    />
-      drawerIcon: ({ tintColor }) => (
+  ),
-        <MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />
+};
-      ),
+
-    },
+const DraftsStack = createStackNavigator({
-  }
+  Drafts: { screen: DraftsScreen },
-);
+  Email: { screen: EmailScreen },
+});
+
+DraftsStack.navigationOptions = {
+  drawerLabel: 'Drafts',
+  drawerIcon: ({ tintColor }) => (
+    <MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />
+  ),
+};
 
 const DrawerExample = createDrawerNavigator(
   {
@@ -91,7 +85,6 @@ const DrawerExample = createDrawerNavigator(
       screen: DraftsStack,
     },
   },
-
   {
     initialRouteName: 'Drafts',
     contentOptions: {

examples/NavigationPlayground/js/ModalStack.js

@@ -70,7 +70,7 @@ const ProfileNavigator = createStackNavigator(
     },
   },
   {
-    defaultNavigationOptions: {
+    navigationOptions: {
       headerLeft: null,
     },
     mode: 'modal',
@@ -97,7 +97,7 @@ const ModalStack = createStackNavigator(
     HeaderTest: { screen: MyHeaderTestScreen },
   },
   {
-    defaultNavigationOptions: {
+    navigationOptions: {
       header: null,
     },
     mode: 'modal',

examples/NavigationPlayground/js/SimpleStack.js

@@ -10,7 +10,7 @@ import type {
 } from 'react-navigation';
 
 import * as React from 'react';
-import { Platform, ScrollView, StatusBar } from 'react-native';
+import { ScrollView, StatusBar } from 'react-native';
 import {
   createStackNavigator,
   SafeAreaView,
@@ -24,8 +24,6 @@ import SampleText from './SampleText';
 import { Button } from './commonComponents/ButtonWithMargin';
 import { HeaderButtons } from './commonComponents/HeaderButtons';
 
-const DEBUG = false;
-
 type MyNavScreenProps = {
   navigation: NavigationScreenProp<NavigationState>,
   banner: React.Node,
@@ -60,7 +58,7 @@ class MyNavScreen extends React.Component<MyNavScreenProps> {
       'missing action creators for StackNavigator'
     );
     return (
-      <SafeAreaView forceInset={{ top: 'never' }}>
+      <SafeAreaView>
         <SampleText>{banner}</SampleText>
         <Button
           onPress={() => push('Profile', { name: 'Jane' })}
@@ -135,16 +133,16 @@ class MyHomeScreen extends React.Component<MyHomeScreenProps> {
     this._s3.remove();
   }
   _onWF = a => {
-    DEBUG && console.log('_willFocus HomeScreen', a);
+    console.log('_willFocus HomeScreen', a);
   };
   _onDF = a => {
-    DEBUG && console.log('_didFocus HomeScreen', a);
+    console.log('_didFocus HomeScreen', a);
   };
   _onWB = a => {
-    DEBUG && console.log('_willBlur HomeScreen', a);
+    console.log('_willBlur HomeScreen', a);
   };
   _onDB = a => {
-    DEBUG && console.log('_didBlur HomeScreen', a);
+    console.log('_didBlur HomeScreen', a);
   };
 
   render() {
@@ -179,16 +177,16 @@ class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
     this._s3.remove();
   }
   _onWF = a => {
-    DEBUG && console.log('_willFocus PhotosScreen', a);
+    console.log('_willFocus PhotosScreen', a);
   };
   _onDF = a => {
-    DEBUG && console.log('_didFocus PhotosScreen', a);
+    console.log('_didFocus PhotosScreen', a);
   };
   _onWB = a => {
-    DEBUG && console.log('_willBlur PhotosScreen', a);
+    console.log('_willBlur PhotosScreen', a);
   };
   _onDB = a => {
-    DEBUG && console.log('_didBlur PhotosScreen', a);
+    console.log('_didBlur PhotosScreen', a);
   };
 
   render() {
@@ -233,23 +231,18 @@ MyProfileScreen.navigationOptions = props => {
   };
 };
 
-const SimpleStack = createStackNavigator(
+const SimpleStack = createStackNavigator({
-  {
+  Home: {
-    Home: {
+    screen: MyHomeScreen,
-      screen: MyHomeScreen,
-    },
-    Profile: {
-      path: 'people/:name',
-      screen: MyProfileScreen,
-    },
-    Photos: {
-      path: 'photos/:name',
-      screen: MyPhotosScreen,
-    },
   },
-  {
+  Profile: {
-    // headerLayoutPreset: 'center',
+    path: 'people/:name',
-  }
+    screen: MyProfileScreen,
-);
+  },
+  Photos: {
+    path: 'photos/:name',
+    screen: MyPhotosScreen,
+  },
+});
 
 export default SimpleStack;

examples/NavigationPlayground/js/SimpleTabs.js

@@ -8,57 +8,26 @@ import type {
 } from 'react-navigation';
 
 import React from 'react';
-import { Animated, Platform, Text, StatusBar, View } from 'react-native';
+import { Platform, ScrollView, StatusBar, View } from 'react-native';
-import {
+import { SafeAreaView, createBottomTabNavigator } from 'react-navigation';
-  ScrollView,
-  FlatList,
-  SafeAreaView,
-  createBottomTabNavigator,
-  withNavigation,
-} from 'react-navigation';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import SampleText from './SampleText';
 import { Button } from './commonComponents/ButtonWithMargin';
 
-const TEXT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a hendrerit dui, id consectetur nulla. Curabitur mattis sapien nunc, quis dignissim eros venenatis sit amet. Praesent rutrum dapibus diam quis eleifend. Donec vulputate quis purus sed vulputate. Fusce ipsum felis, cursus at congue vel, consectetur tincidunt purus. Pellentesque et fringilla lorem. In at augue malesuada, sollicitudin ex ut, convallis elit. Curabitur metus nibh, consequat vel libero sit amet, iaculis congue nisl. Maecenas eleifend sodales sapien, fringilla sagittis nisi ornare volutpat. Integer tellus enim, volutpat vitae nisl et, dignissim pharetra leo. Sed sit amet efficitur sapien, at tristique sapien. Aenean dignissim semper sagittis. Nullam sit amet volutpat mi.
-Curabitur auctor orci et justo molestie iaculis. Integer elementum tortor ac ipsum egestas pharetra. Etiam ultrices elementum pharetra. Maecenas lobortis ultrices risus dignissim luctus. Nunc malesuada cursus posuere. Vestibulum tristique lectus pretium pellentesque pellentesque. Nunc ac nisi lacus. Duis ultrices dui ac viverra ullamcorper. Morbi placerat laoreet lacus sit amet ullamcorper.
-Nulla convallis pulvinar hendrerit. Nulla mattis sem et aliquam ultrices. Nam egestas magna leo, nec luctus turpis sollicitudin ac. Sed id leo luctus, lobortis tortor ut, rhoncus ex. Aliquam gravida enim ac dapibus ultricies. Vestibulum at interdum est, et vehicula nibh. Phasellus dignissim iaculis rhoncus. Vestibulum tempus leo lectus, quis euismod metus ullamcorper quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut id ipsum at enim eleifend porttitor id quis metus. Proin bibendum ornare iaculis. Duis elementum lacus vel cursus efficitur. Nunc eu tortor sed risus lacinia scelerisque.
-Praesent lobortis elit sit amet mauris pulvinar, viverra condimentum massa pellentesque. Curabitur massa ex, dignissim eget neque at, fringilla consectetur justo. Cras sollicitudin vel ligula sed cursus. Aliquam porta sem hendrerit diam porta ultricies. Sed eu mi erat. Curabitur id justo vel tortor hendrerit vestibulum id eget est. Morbi eros magna, placerat id diam ut, varius sollicitudin mi. Curabitur pretium finibus accumsan.`;
 const MyNavScreen = ({ navigation, banner }) => (
-  <ScrollView navigation={navigation} style={{ flex: 1 }}>
+  <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
-    <SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
+    <SampleText>{banner}</SampleText>
-      <SampleText>{banner}</SampleText>
+    <Button
-      <Button
+      onPress={() => navigation.navigate('Home')}
-        onPress={() => navigation.navigate('Home')}
+      title="Go to home tab"
-        title="Go to home tab"
+    />
-      />
+    <Button
-      <Button
+      onPress={() => navigation.navigate('Settings')}
-        onPress={() => navigation.navigate('Settings')}
+      title="Go to settings tab"
-        title="Go to settings tab"
+    />
-      />
+    <Button onPress={() => navigation.goBack(null)} title="Go back" />
-      <Button onPress={() => navigation.goBack(null)} title="Go back" />
+    <StatusBar barStyle="default" />
-      {TEXT.split('\n').map((p, n) => (
+  </SafeAreaView>
-        <Text key={n} style={{ marginVertical: 10, marginHorizontal: 8 }}>
-          {p}
-        </Text>
-      ))}
-      <StatusBar barStyle="default" />
-    </SafeAreaView>
-  </ScrollView>
-);
-
-const MyListScreen = ({ navigation, data }) => (
-  <FlatList
-    navigation={navigation}
-    data={TEXT.split('\n')}
-    style={{ paddingTop: 10 }}
-    keyExtractor={(item, index) => index.toString()}
-    renderItem={({ item }) => (
-      <Text style={{ fontSize: 16, marginVertical: 10, marginHorizontal: 8 }}>
-        {item}
-      </Text>
-    )}
-  />
 );
 
 const MyHomeScreen = ({ navigation }) => (
@@ -71,15 +40,14 @@ MyHomeScreen.navigationOptions = {
     accessibilityLabel: 'TEST_ID_HOME_ACLBL',
   },
   tabBarLabel: 'Home',
-  tabBarIcon: ({ tintColor, focused, horizontal }) => (
+  tabBarIcon: ({ tintColor, focused }) => (
     <Ionicons
       name={focused ? 'ios-home' : 'ios-home-outline'}
-      size={horizontal ? 20 : 26}
+      size={26}
       style={{ color: tintColor }}
     />
   ),
 };
-MyListScreen.navigationOptions = MyHomeScreen.navigationOptions;
 
 type MyPeopleScreenProps = {
   navigation: NavigationScreenProp<*>,
@@ -92,25 +60,25 @@ class MyPeopleScreen extends React.Component<MyPeopleScreenProps> {
 
   static navigationOptions = {
     tabBarLabel: 'People',
-    tabBarIcon: ({ tintColor, focused, horizontal }) => (
+    tabBarIcon: ({ tintColor, focused }) => (
       <Ionicons
         name={focused ? 'ios-people' : 'ios-people-outline'}
-        size={horizontal ? 20 : 26}
+        size={26}
         style={{ color: tintColor }}
       />
     ),
   };
   componentDidMount() {
-    // this._s0 = this.props.navigation.addListener('willFocus', this._onEvent);
+    this._s0 = this.props.navigation.addListener('willFocus', this._onEvent);
-    // this._s1 = this.props.navigation.addListener('didFocus', this._onEvent);
+    this._s1 = this.props.navigation.addListener('didFocus', this._onEvent);
-    // this._s2 = this.props.navigation.addListener('willBlur', this._onEvent);
+    this._s2 = this.props.navigation.addListener('willBlur', this._onEvent);
-    // this._s3 = this.props.navigation.addListener('didBlur', this._onEvent);
+    this._s3 = this.props.navigation.addListener('didBlur', this._onEvent);
   }
   componentWillUnmount() {
-    // this._s0.remove();
+    this._s0.remove();
-    // this._s1.remove();
+    this._s1.remove();
-    // this._s2.remove();
+    this._s2.remove();
-    // this._s3.remove();
+    this._s3.remove();
   }
   _onEvent = a => {
     console.log('EVENT ON PEOPLE TAB', a.type, a);
@@ -132,25 +100,25 @@ class MyChatScreen extends React.Component<MyChatScreenProps> {
 
   static navigationOptions = {
     tabBarLabel: 'Chat',
-    tabBarIcon: ({ tintColor, focused, horizontal }) => (
+    tabBarIcon: ({ tintColor, focused }) => (
       <Ionicons
         name={focused ? 'ios-chatboxes' : 'ios-chatboxes-outline'}
-        size={horizontal ? 20 : 26}
+        size={26}
         style={{ color: tintColor }}
       />
     ),
   };
   componentDidMount() {
-    // this._s0 = this.props.navigation.addListener('willFocus', this._onEvent);
+    this._s0 = this.props.navigation.addListener('willFocus', this._onEvent);
-    // this._s1 = this.props.navigation.addListener('didFocus', this._onEvent);
+    this._s1 = this.props.navigation.addListener('didFocus', this._onEvent);
-    // this._s2 = this.props.navigation.addListener('willBlur', this._onEvent);
+    this._s2 = this.props.navigation.addListener('willBlur', this._onEvent);
-    // this._s3 = this.props.navigation.addListener('didBlur', this._onEvent);
+    this._s3 = this.props.navigation.addListener('didBlur', this._onEvent);
   }
   componentWillUnmount() {
-    // this._s0.remove();
+    this._s0.remove();
-    // this._s1.remove();
+    this._s1.remove();
-    // this._s2.remove();
+    this._s2.remove();
-    // this._s3.remove();
+    this._s3.remove();
   }
   _onEvent = a => {
     console.log('EVENT ON CHAT TAB', a.type, a);
@@ -167,10 +135,10 @@ const MySettingsScreen = ({ navigation }) => (
 
 MySettingsScreen.navigationOptions = {
   tabBarLabel: 'Settings',
-  tabBarIcon: ({ tintColor, focused, horizontal }) => (
+  tabBarIcon: ({ tintColor, focused }) => (
     <Ionicons
       name={focused ? 'ios-settings' : 'ios-settings-outline'}
-      size={horizontal ? 20 : 26}
+      size={26}
       style={{ color: tintColor }}
     />
   ),
@@ -179,7 +147,7 @@ MySettingsScreen.navigationOptions = {
 const SimpleTabs = createBottomTabNavigator(
   {
     Home: {
-      screen: MyListScreen,
+      screen: MyHomeScreen,
       path: '',
     },
     People: {
@@ -214,16 +182,16 @@ class SimpleTabsContainer extends React.Component<SimpleTabsContainerProps> {
   _s3: NavigationEventSubscription;
 
   componentDidMount() {
-    // this._s0 = this.props.navigation.addListener('willFocus', this._onAction);
+    this._s0 = this.props.navigation.addListener('willFocus', this._onAction);
-    // this._s1 = this.props.navigation.addListener('didFocus', this._onAction);
+    this._s1 = this.props.navigation.addListener('didFocus', this._onAction);
-    // this._s2 = this.props.navigation.addListener('willBlur', this._onAction);
+    this._s2 = this.props.navigation.addListener('willBlur', this._onAction);
-    // this._s3 = this.props.navigation.addListener('didBlur', this._onAction);
+    this._s3 = this.props.navigation.addListener('didBlur', this._onAction);
   }
   componentWillUnmount() {
-    // this._s0.remove();
+    this._s0.remove();
-    // this._s1.remove();
+    this._s1.remove();
-    // this._s2.remove();
+    this._s2.remove();
-    // this._s3.remove();
+    this._s3.remove();
   }
   _onAction = a => {
     console.log('TABS EVENT', a.type, a);

examples/NavigationPlayground/js/StackWithCustomHeaderBackImage.js

@@ -122,7 +122,7 @@ const StackWithCustomHeaderBackImage = createStackNavigator(
     },
   },
   {
-    defaultNavigationOptions: {
+    navigationOptions: {
       headerBackImage: MyCustomHeaderBackImage,
     },
   }

examples/NavigationPlayground/js/StackWithTranslucentHeader.js

@@ -16,14 +16,9 @@ import {
   Platform,
   ScrollView,
   StatusBar,
-  StyleSheet,
   View,
 } from 'react-native';
-import {
+import { Header, createStackNavigator } from 'react-navigation';
-  Header,
-  HeaderStyleInterpolator,
-  createStackNavigator,
-} from 'react-navigation';
 import invariant from 'invariant';
 
 import SampleText from './SampleText';
@@ -234,18 +229,8 @@ const StackWithTranslucentHeader = createStackNavigator(
   },
   {
     headerTransitionPreset: 'uikit',
-    // You can leave this out if you don't want the card shadow to
+    navigationOptions: {
-    // be visible through the header
-    transitionConfig: () => ({
-      headerBackgroundInterpolator:
-        HeaderStyleInterpolator.forBackgroundWithTranslation,
-    }),
-    defaultNavigationOptions: {
       headerTransparent: true,
-      headerStyle: {
-        borderBottomWidth: StyleSheet.hairlineWidth,
-        borderBottomColor: '#A7A7AA',
-      },
       headerBackground: Platform.select({
         ios: <BlurView style={{ flex: 1 }} intensity={98} />,
         android: (

examples/NavigationPlayground/js/StacksInTabs.js

@@ -3,59 +3,43 @@
  */
 
 import React from 'react';
-import { StatusBar, Text } from 'react-native';
+import { ScrollView, StatusBar } from 'react-native';
 import {
-  ScrollView,
   SafeAreaView,
   createStackNavigator,
   createBottomTabNavigator,
-  withNavigation,
 } from 'react-navigation';
 
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import SampleText from './SampleText';
 import { Button } from './commonComponents/ButtonWithMargin';
 
-const TEXT = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a hendrerit dui, id consectetur nulla. Curabitur mattis sapien nunc, quis dignissim eros venenatis sit amet. Praesent rutrum dapibus diam quis eleifend. Donec vulputate quis purus sed vulputate. Fusce ipsum felis, cursus at congue vel, consectetur tincidunt purus. Pellentesque et fringilla lorem. In at augue malesuada, sollicitudin ex ut, convallis elit. Curabitur metus nibh, consequat vel libero sit amet, iaculis congue nisl. Maecenas eleifend sodales sapien, fringilla sagittis nisi ornare volutpat. Integer tellus enim, volutpat vitae nisl et, dignissim pharetra leo. Sed sit amet efficitur sapien, at tristique sapien. Aenean dignissim semper sagittis. Nullam sit amet volutpat mi.
+const MyNavScreen = ({ navigation, banner }) => (
-Curabitur auctor orci et justo molestie iaculis. Integer elementum tortor ac ipsum egestas pharetra. Etiam ultrices elementum pharetra. Maecenas lobortis ultrices risus dignissim luctus. Nunc malesuada cursus posuere. Vestibulum tristique lectus pretium pellentesque pellentesque. Nunc ac nisi lacus. Duis ultrices dui ac viverra ullamcorper. Morbi placerat laoreet lacus sit amet ullamcorper.
+  <ScrollView>
-Nulla convallis pulvinar hendrerit. Nulla mattis sem et aliquam ultrices. Nam egestas magna leo, nec luctus turpis sollicitudin ac. Sed id leo luctus, lobortis tortor ut, rhoncus ex. Aliquam gravida enim ac dapibus ultricies. Vestibulum at interdum est, et vehicula nibh. Phasellus dignissim iaculis rhoncus. Vestibulum tempus leo lectus, quis euismod metus ullamcorper quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut id ipsum at enim eleifend porttitor id quis metus. Proin bibendum ornare iaculis. Duis elementum lacus vel cursus efficitur. Nunc eu tortor sed risus lacinia scelerisque.
+    <SafeAreaView forceInset={{ horizontal: 'always' }}>
-Praesent lobortis elit sit amet mauris pulvinar, viverra condimentum massa pellentesque. Curabitur massa ex, dignissim eget neque at, fringilla consectetur justo. Cras sollicitudin vel ligula sed cursus. Aliquam porta sem hendrerit diam porta ultricies. Sed eu mi erat. Curabitur id justo vel tortor hendrerit vestibulum id eget est. Morbi eros magna, placerat id diam ut, varius sollicitudin mi. Curabitur pretium finibus accumsan.`;
+      <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>
 
-class MyNavScreen extends React.Component {
+    <StatusBar barStyle="default" />
-  render() {
+  </ScrollView>
-    const { navigation } = this.props;
+);
-    const banner = navigation.getParam('banner');
 
-    return (
+const MyHomeScreen = ({ navigation }) => (
-      <ScrollView style={{ flex: 1 }}>
+  <MyNavScreen banner="Home Screen" navigation={navigation} />
-        <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" />
-
-          {TEXT.split('\n').map((p, n) => (
-            <Text key={n} style={{ marginVertical: 10, marginHorizontal: 8 }}>
-              {p}
-            </Text>
-          ))}
-        </SafeAreaView>
-
-        <StatusBar barStyle="default" />
-      </ScrollView>
-    );
-  }
-}
 
 const MyProfileScreen = ({ navigation }) => (
   <MyNavScreen
@@ -64,11 +48,18 @@ const MyProfileScreen = ({ navigation }) => (
   />
 );
 
+const MyNotificationsSettingsScreen = ({ navigation }) => (
+  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
+);
+
+const MySettingsScreen = ({ navigation }) => (
+  <MyNavScreen banner="Settings Screen" navigation={navigation} />
+);
+
 const MainTab = createStackNavigator({
   Home: {
-    screen: MyNavScreen,
+    screen: MyHomeScreen,
     path: '/',
-    params: { banner: 'Home Screen' },
     navigationOptions: {
       title: 'Welcome',
     },
@@ -84,16 +75,14 @@ const MainTab = createStackNavigator({
 
 const SettingsTab = createStackNavigator({
   Settings: {
-    screen: MyNavScreen,
+    screen: MySettingsScreen,
     path: '/',
-    params: { banner: 'Settings Screen' },
     navigationOptions: () => ({
       title: 'Settings',
     }),
   },
   NotifSettings: {
-    screen: MyNavScreen,
+    screen: MyNotificationsSettingsScreen,
-    params: { banner: 'Notifications Screen' },
     navigationOptions: {
       title: 'Notifications',
     },

examples/NavigationPlayground/js/StacksOverTabs.js

@@ -8,7 +8,6 @@ import {
   SafeAreaView,
   createStackNavigator,
   createBottomTabNavigator,
-  getActiveChildNavigationOptions,
 } from 'react-navigation';
 
 import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -17,7 +16,7 @@ import { Button } from './commonComponents/ButtonWithMargin';
 
 const MyNavScreen = ({ navigation, banner }) => (
   <ScrollView>
-    <SafeAreaView forceInset={{ horizontal: 'always', vertical: 'never' }}>
+    <SafeAreaView forceInset={{ horizontal: 'always' }}>
       <SampleText>{banner}</SampleText>
       <Button
         onPress={() => navigation.navigate('Profile', { name: 'Jordan' })}
@@ -95,10 +94,16 @@ const TabNav = createBottomTabNavigator(
   }
 );
 
-TabNav.navigationOptions = ({ navigation, screenProps }) => {
+TabNav.navigationOptions = ({ navigation }) => {
-  const childOptions = getActiveChildNavigationOptions(navigation, screenProps);
+  let { routeName } = navigation.state.routes[navigation.state.index];
+  let title;
+  if (routeName === 'SettingsTab') {
+    title = 'Settings';
+  } else if (routeName === 'MainTab') {
+    title = 'Home';
+  }
   return {
-    title: childOptions.title,
+    title,
   };
 };
 

examples/NavigationPlayground/js/StacksOverTopTabs.js

@@ -133,7 +133,7 @@ const StackNavigator = createStackNavigator(
     },
   },
   {
-    defaultNavigationOptions: {
+    navigationOptions: {
       headerStyle: styles.stackHeader,
     },
   }

examples/NavigationPlayground/js/TabsInDrawer.js

@@ -13,19 +13,31 @@ const TabsInDrawer = createDrawerNavigator({
   SimpleTabs: {
     screen: SimpleTabs,
     navigationOptions: {
-      drawerLabel: 'Simple tabs',
+      drawer: () => ({
-      drawerIcon: ({ tintColor }) => (
+        label: 'Simple Tabs',
-        <MaterialIcons name="filter-1" size={24} style={{ color: tintColor }} />
+        icon: ({ tintColor }) => (
-      ),
+          <MaterialIcons
+            name="filter-1"
+            size={24}
+            style={{ color: tintColor }}
+          />
+        ),
+      }),
     },
   },
   StacksOverTabs: {
     screen: StacksOverTabs,
     navigationOptions: {
-      drawerLabel: 'Stacks Over Tabs',
+      drawer: () => ({
-      drawerIcon: ({ tintColor }) => (
+        label: 'Stacks Over Tabs',
-        <MaterialIcons name="filter-2" size={24} style={{ color: tintColor }} />
+        icon: ({ tintColor }) => (
-      ),
+          <MaterialIcons
+            name="filter-2"
+            size={24}
+            style={{ color: tintColor }}
+          />
+        ),
+      }),
     },
   },
 });

examples/NavigationPlayground/js/commonComponents/Button.js

@@ -1,165 +0,0 @@
-import React from 'react';
-import { Platform, StyleSheet, Text, View } from 'react-native';
-import { BorderlessButton, RectButton } from 'react-native-gesture-handler';
-
-const invariant = require('fbjs/lib/invariant');
-
-type ButtonProps = $ReadOnly<{|
-  /**
-   * Text to display inside the button
-   */
-  title: string,
-
-  /**
-   * Handler to be called when the user taps the button
-   */
-  onPress: (event?: any) => mixed,
-
-  /**
-   * Color of the text (iOS), or background color of the button (Android)
-   */
-  color?: ?string,
-
-  /**
-   * TV preferred focus (see documentation for the View component).
-   */
-  hasTVPreferredFocus?: ?boolean,
-
-  /**
-   * Text to display for blindness accessibility features
-   */
-  accessibilityLabel?: ?string,
-
-  /**
-   * If true, disable all interactions for this component.
-   */
-  disabled?: ?boolean,
-
-  /**
-   * Used to locate this view in end-to-end tests.
-   */
-  testID?: ?string,
-|}>;
-
-/**
- * A basic button component that should render nicely on any platform. Supports
- * a minimal level of customization.
- *
- * <center><img src="img/buttonExample.png"></img></center>
- *
- * If this button doesn't look right for your app, you can build your own
- * button using [TouchableOpacity](docs/touchableopacity.html)
- * or [TouchableNativeFeedback](docs/touchablenativefeedback.html).
- * For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js).
- * Or, take a look at the [wide variety of button components built by the community](https://js.coach/react-native?search=button).
- *
- * Example usage:
- *
- * ```
- * import { Button } from 'react-native';
- * ...
- *
- * <Button
- *   onPress={onPressLearnMore}
- *   title="Learn More"
- *   color="#841584"
- *   accessibilityLabel="Learn more about this purple button"
- * />
- * ```
- *
- */
-
-export default class Button extends React.Component<ButtonProps> {
-  render() {
-    const {
-      accessibilityLabel,
-      color,
-      onPress,
-      title,
-      hasTVPreferredFocus,
-      disabled,
-      testID,
-    } = this.props;
-    const buttonStyles = [styles.button];
-    const textStyles = [styles.text];
-    if (color) {
-      if (Platform.OS === 'ios') {
-        textStyles.push({ color: color });
-      } else {
-        buttonStyles.push({ backgroundColor: color });
-      }
-    }
-    const accessibilityStates = [];
-    if (disabled) {
-      buttonStyles.push(styles.buttonDisabled);
-      textStyles.push(styles.textDisabled);
-      accessibilityStates.push('disabled');
-    }
-    invariant(
-      typeof title === 'string',
-      'The title prop of a Button must be a string'
-    );
-    const formattedTitle =
-      Platform.OS === 'android' ? title.toUpperCase() : title;
-    const Touchable = Platform.OS === 'android' ? RectButton : BorderlessButton;
-    return (
-      <Touchable
-        accessibilityLabel={accessibilityLabel}
-        accessibilityRole="button"
-        accessibilityStates={accessibilityStates}
-        hasTVPreferredFocus={hasTVPreferredFocus}
-        testID={testID}
-        disabled={disabled}
-        onPress={onPress}
-      >
-        <View style={buttonStyles}>
-          <Text style={textStyles} disabled={disabled}>
-            {formattedTitle}
-          </Text>
-        </View>
-      </Touchable>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  button: Platform.select({
-    ios: {},
-    android: {
-      elevation: 4,
-      // Material design blue from https://material.google.com/style/color.html#color-color-palette
-      backgroundColor: '#2196F3',
-      borderRadius: 2,
-    },
-  }),
-  text: {
-    textAlign: 'center',
-    padding: 8,
-    ...Platform.select({
-      ios: {
-        // iOS blue from https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/
-        color: '#007AFF',
-        fontSize: 18,
-      },
-      android: {
-        color: 'white',
-        fontWeight: '500',
-      },
-    }),
-  },
-  buttonDisabled: Platform.select({
-    ios: {},
-    android: {
-      elevation: 0,
-      backgroundColor: '#dfdfdf',
-    },
-  }),
-  textDisabled: Platform.select({
-    ios: {
-      color: '#cdcdcd',
-    },
-    android: {
-      color: '#a1a1a1',
-    },
-  }),
-});

examples/NavigationPlayground/js/commonComponents/ButtonWithMargin.js

@@ -1,10 +1,9 @@
-import { StyleSheet, View, Platform } from 'react-native';
+import { Button as RNButton, StyleSheet, View, Platform } from 'react-native';
-import BaseButton from './Button';
 import React from 'react';
 
 export const Button = props => (
   <View style={styles.margin}>
-    <BaseButton {...props} />
+    <RNButton {...props} />
   </View>
 );
 

examples/NavigationPlayground/package.json

@@ -2,33 +2,34 @@
   "name": "NavigationPlayground",
   "version": "0.1.0",
   "private": true,
-  "main": "node_modules/expo/AppEntry.js",
+  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
   "scripts": {
-    "postinstall": "rm -rf node_modules/react-native-screens && rm -rf node_modules/react-native-gesture-handler",
+    "start": "react-native-scripts start",
-    "start": "expo start",
+    "eject": "react-native-scripts eject",
-    "android": "expo start --android",
+    "android": "react-native-scripts android",
-    "ios": "expo start --ios",
+    "ios": "react-native-scripts ios",
     "test": "flow"
   },
   "dependencies": {
-    "expo": "^30.0.0",
+    "expo": "^27.0.0",
-    "hoist-non-react-statics": "^3.0.1",
     "invariant": "^2.2.4",
     "react": "16.3.1",
     "react-native": "^0.55.0",
     "react-native-iphone-x-helper": "^1.0.2",
-    "react-native-paper": "^2.1.3",
     "react-navigation": "link:../..",
     "react-navigation-header-buttons": "^0.0.4",
-    "react-navigation-material-bottom-tabs": "1.0.0"
+    "react-navigation-material-bottom-tabs": "0.1.3",
+    "react-navigation-tabs": "^0.5.1",
+    "reactotron-react-native": "^2.0.0"
   },
   "devDependencies": {
     "babel-jest": "^22.4.1",
     "babel-plugin-transform-remove-console": "^6.9.0",
     "flow-bin": "^0.67.0",
     "jest": "^22.1.3",
-    "jest-expo": "^28.0.0",
+    "jest-expo": "^26.0.0",
-    "react-test-renderer": "16.3.1"
+    "react-native-scripts": "^1.5.0",
+    "react-test-renderer": "16.3.0-alpha.1"
   },
   "jest": {
     "preset": "jest-expo",

examples/README.md

@@ -2,4 +2,4 @@
 
 ## Usage
 
-Please see the [Contributors Guide](https://reactnavigation.org/docs/en/contributing.html#run-the-example-app) for instructions.
+Please see the [Contributors Guide](https://reactnavigation.org/docs/contributing.html#run-the-example-app) for instructions on running these example apps.

examples/ReduxExample/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

examples/ReduxExample/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+.expo/
+npm-debug.*

examples/ReduxExample/.watchmanconfig

@@ -0,0 +1 @@
+{}

examples/ReduxExample/App.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { AppRegistry } from 'react-native';
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware } from 'redux';
+
+import AppReducer from './src/reducers';
+import { AppNavigator, middleware } from './src/navigators/AppNavigator';
+
+const store = createStore(AppReducer, applyMiddleware(middleware));
+
+class ReduxExampleApp extends React.Component {
+  render() {
+    return (
+      <Provider store={store}>
+        <AppNavigator />
+      </Provider>
+    );
+  }
+}
+
+AppRegistry.registerComponent('ReduxExample', () => ReduxExampleApp);
+
+export default ReduxExampleApp;

examples/ReduxExample/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import App from './App';
+
+import renderer from 'react-test-renderer';
+
+it('renders without crashing', () => {
+  const rendered = renderer.create(<App />).toJSON();
+  expect(rendered).toBeTruthy();
+});

examples/ReduxExample/README.md

@@ -0,0 +1,5 @@
+# Redux example
+
+## Usage
+
+Please see the [Contributors Guide](https://reactnavigation.org/docs/contributing.html#run-the-example-app) for instructions on running these example apps.

examples/ReduxExample/app.json

@@ -0,0 +1,24 @@
+{
+  "expo": {
+    "name": "ReduxExample",
+    "description": "Try out react-navigation with this awesome Redux example",
+    "version": "1.0.0",
+    "slug": "ReduxExample",
+    "privacy": "public",
+    "orientation": "portrait",
+    "primaryColor": "#cccccc",
+    "icon": "./assets/icons/react-navigation.png",
+    "loading": {
+      "icon": "./assets/icons/react-navigation.png",
+      "hideExponentText": false
+    },
+    "sdkVersion": "27.0.0",
+    "entryPoint": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
+    "packagerOpts": {
+      "assetExts": ["ttf", "mp4"]
+    },
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

examples/ReduxExample/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "ReduxExample",
+  "version": "0.0.1",
+  "private": true,
+  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
+  "scripts": {
+    "start": "react-native-scripts start",
+    "eject": "react-native-scripts eject",
+    "android": "react-native-scripts android",
+    "ios": "react-native-scripts ios",
+    "test": "node node_modules/jest/bin/jest.js"
+  },
+  "jest": {
+    "preset": "jest-expo",
+    "modulePathIgnorePatterns": [
+      "/node_modules/.*/react-native/",
+      "/node_modules/.*/react/"
+    ],
+    "transformIgnorePatterns": [
+      "/node_modules/(?!react-native|react-navigation)/"
+    ]
+  },
+  "dependencies": {
+    "expo": "^27.0.0",
+    "prop-types": "^15.5.10",
+    "react": "16.3.1",
+    "react-native": "^0.55.0",
+    "react-navigation": "link:../..",
+    "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",
+    "react-test-renderer": "16.0.0"
+  }
+}

examples/ReduxExample/rn-cli.config.js

@@ -0,0 +1,52 @@
+/**
+ * @noflow
+ */
+
+const fs = require('fs');
+const path = require('path');
+const blacklist = require('metro/src/blacklist');
+
+module.exports = {
+  getBlacklistRE() {
+    return blacklist([
+      /react\-navigation\/examples\/(?!ReduxExample).*/,
+      /react\-navigation\/node_modules\/react-native\/(.*)/,
+      /react\-navigation\/node_modules\/react\/(.*)/
+    ]);
+  },
+  extraNodeModules: getNodeModulesForDirectory(path.resolve('.')),
+};
+
+function getNodeModulesForDirectory(rootPath) {
+  const nodeModulePath = path.join(rootPath, 'node_modules');
+  const folders = fs.readdirSync(nodeModulePath);
+  return folders.reduce((modules, folderName) => {
+    const folderPath = path.join(nodeModulePath, folderName);
+    if (folderName.startsWith('@')) {
+      const scopedModuleFolders = fs.readdirSync(folderPath);
+      const scopedModules = scopedModuleFolders.reduce(
+        (scopedModules, scopedFolderName) => {
+          scopedModules[
+            `${folderName}/${scopedFolderName}`
+          ] = maybeResolveSymlink(path.join(folderPath, scopedFolderName));
+          return scopedModules;
+        },
+        {}
+      );
+      return Object.assign({}, modules, scopedModules);
+    }
+    modules[folderName] = maybeResolveSymlink(folderPath);
+    return modules;
+  }, {});
+}
+
+function maybeResolveSymlink(maybeSymlinkPath) {
+  if (fs.lstatSync(maybeSymlinkPath).isSymbolicLink()) {
+    const resolved = path.resolve(
+      path.dirname(maybeSymlinkPath),
+      fs.readlinkSync(maybeSymlinkPath)
+    );
+    return resolved;
+  }
+  return maybeSymlinkPath;
+}

examples/ReduxExample/src/components/AuthButton.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Button } from 'react-native';
+import { NavigationActions } from 'react-navigation';
+
+const AuthButton = ({ logout, loginScreen, isLoggedIn }) => (
+  <Button
+    title={isLoggedIn ? 'Log Out' : 'Open Login Screen'}
+    onPress={isLoggedIn ? logout : loginScreen}
+  />
+);
+
+AuthButton.propTypes = {
+  isLoggedIn: PropTypes.bool.isRequired,
+  logout: PropTypes.func.isRequired,
+  loginScreen: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = state => ({
+  isLoggedIn: state.auth.isLoggedIn,
+});
+
+const mapDispatchToProps = dispatch => ({
+  logout: () => dispatch({ type: 'Logout' }),
+  loginScreen: () =>
+    dispatch(NavigationActions.navigate({ routeName: 'Login' })),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(AuthButton);

examples/ReduxExample/src/components/LoginScreen.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, StyleSheet, Text, View } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  welcome: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  },
+});
+
+const LoginScreen = ({ navigation }) => (
+  <View style={styles.container}>
+    <Text style={styles.welcome}>
+      Screen A
+    </Text>
+    <Text style={styles.instructions}>
+      This is great
+    </Text>
+    <Button
+      onPress={() => navigation.dispatch({ type: 'Login' })}
+      title="Log in"
+    />
+  </View>
+);
+
+LoginScreen.propTypes = {
+  navigation: PropTypes.object.isRequired,
+};
+
+LoginScreen.navigationOptions = {
+  title: 'Log In',
+};
+
+export default LoginScreen;

examples/ReduxExample/src/components/LoginStatusMessage.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Button, StyleSheet, Text, View } from 'react-native';
+import { NavigationActions } from 'react-navigation';
+
+const styles = StyleSheet.create({
+  welcome: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  },
+});
+
+const LoginStatusMessage = ({ isLoggedIn, dispatch }) => {
+  if (!isLoggedIn) {
+    return <Text>Please log in</Text>;
+  }
+  return (
+    <View>
+      <Text style={styles.welcome}>
+        {'You are "logged in" right now'}
+      </Text>
+      <Button
+        onPress={() =>
+          dispatch(NavigationActions.navigate({ routeName: 'Profile' }))}
+        title="Profile"
+      />
+    </View>
+  );
+};
+
+LoginStatusMessage.propTypes = {
+  isLoggedIn: PropTypes.bool.isRequired,
+  dispatch: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = state => ({
+  isLoggedIn: state.auth.isLoggedIn,
+});
+
+export default connect(mapStateToProps)(LoginStatusMessage);

examples/ReduxExample/src/components/MainScreen.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import LoginStatusMessage from './LoginStatusMessage';
+import AuthButton from './AuthButton';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+});
+
+const MainScreen = () => (
+  <View style={styles.container}>
+    <LoginStatusMessage />
+    <AuthButton />
+  </View>
+);
+
+MainScreen.navigationOptions = {
+  title: 'Home Screen',
+};
+
+export default MainScreen;

examples/ReduxExample/src/components/ProfileScreen.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  welcome: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  },
+});
+
+const ProfileScreen = () => (
+  <View style={styles.container}>
+    <Text style={styles.welcome}>
+      Profile Screen
+    </Text>
+  </View>
+);
+
+ProfileScreen.navigationOptions = {
+  title: 'Profile',
+};
+
+export default ProfileScreen;

examples/ReduxExample/src/navigators/AppNavigator.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { createStackNavigator } from 'react-navigation';
+import {
+  reduxifyNavigator,
+  createReactNavigationReduxMiddleware,
+} from 'react-navigation-redux-helpers';
+
+import LoginScreen from '../components/LoginScreen';
+import MainScreen from '../components/MainScreen';
+import ProfileScreen from '../components/ProfileScreen';
+
+const middleware = createReactNavigationReduxMiddleware(
+  'root',
+  state => state.nav
+);
+
+const RootNavigator = createStackNavigator({
+  Login: { screen: LoginScreen },
+  Main: { screen: MainScreen },
+  Profile: { screen: ProfileScreen },
+});
+
+const AppWithNavigationState = reduxifyNavigator(RootNavigator, 'root');
+
+const mapStateToProps = state => ({
+  state: state.nav,
+});
+
+const AppNavigator = connect(mapStateToProps)(AppWithNavigationState);
+
+export { RootNavigator, AppNavigator, middleware };

examples/ReduxExample/src/reducers/index.js

@@ -0,0 +1,57 @@
+import { combineReducers } from 'redux';
+import { NavigationActions } from 'react-navigation';
+
+import { RootNavigator } from '../navigators/AppNavigator';
+
+// Start with two routes: The Main screen, with the Login screen on top.
+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
+);
+
+function nav(state = initialNavState, action) {
+  let nextState;
+  switch (action.type) {
+    case 'Login':
+      nextState = RootNavigator.router.getStateForAction(
+        NavigationActions.back(),
+        state
+      );
+      break;
+    case 'Logout':
+      nextState = RootNavigator.router.getStateForAction(
+        NavigationActions.navigate({ routeName: 'Login' }),
+        state
+      );
+      break;
+    default:
+      nextState = RootNavigator.router.getStateForAction(action, state);
+      break;
+  }
+
+  // Simply return the original `state` if `nextState` is null or undefined.
+  return nextState || state;
+}
+
+const initialAuthState = { isLoggedIn: false };
+
+function auth(state = initialAuthState, action) {
+  switch (action.type) {
+    case 'Login':
+      return { ...state, isLoggedIn: true };
+    case 'Logout':
+      return { ...state, isLoggedIn: false };
+    default:
+      return state;
+  }
+}
+
+const AppReducer = combineReducers({
+  nav,
+  auth,
+});
+
+export default AppReducer;

examples/SafeAreaExample/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

examples/SafeAreaExample/.gitignore

@@ -0,0 +1,3 @@
+node_modules/**/*
+.expo/*
+npm-debug.*

examples/SafeAreaExample/.watchmanconfig

@@ -0,0 +1 @@
+{}

examples/SafeAreaExample/App.js

@@ -0,0 +1,244 @@
+import React from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { StackNavigator, withNavigation } from 'react-navigation';
+import { Constants } from 'expo';
+import Touchable from 'react-native-platform-touchable';
+import TabsScreen from './screens/TabsScreen';
+import DrawerScreen from './screens/DrawerScreen';
+import createDumbStack from './screens/createDumbStack';
+import createDumbTabs from './screens/createDumbTabs';
+
+export default class App extends React.Component {
+  render() {
+    return <RootStack />;
+  }
+}
+
+@withNavigation
+class ExampleItem extends React.Component {
+  render() {
+    return (
+      <View
+        style={{
+          borderBottomColor: '#eee',
+          borderBottomWidth: 1,
+        }}>
+        <Touchable
+          onPress={this._handlePress}
+          style={{
+            height: 50,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: this.props.common ? '#fffcd3' : '#fff',
+          }}>
+          <Text style={{ fontSize: 15 }}>
+            {this.props.title} {this.props.common ? '(commonly used)' : null}
+          </Text>
+        </Touchable>
+      </View>
+    );
+  }
+
+  _handlePress = () => {
+    this.props.navigation.navigate(this.props.route);
+  };
+}
+
+class ExampleListScreen extends React.Component {
+  render() {
+    return (
+      <View style={{ flex: 1 }}>
+        <ScrollView
+          style={{ flex: 1 }}
+          contentContainerStyle={{ paddingTop: 50, backgroundColor: '#fff' }}>
+          <Text
+            style={{
+              fontSize: 25,
+              textAlign: 'center',
+              marginBottom: 20,
+              paddingBottom: 20,
+            }}>
+            SafeAreaView Examples
+          </Text>
+
+          <ExampleItem title="Basic Tabs" route="tabs" common />
+          {/* <ExampleItem title="Basic Drawer" route="drawer" /> */}
+          <ExampleItem title="Header height" route="headerHeight" common />
+          <ExampleItem title="Header padding" route="headerPadding" />
+          <ExampleItem
+            title="Header height and padding"
+            route="headerHeightAndPadding"
+          />
+          <ExampleItem
+            title="Header padding as percent"
+            route="headerPaddingPercent"
+          />
+          <ExampleItem title="Header with margin" route="headerMargin" />
+          <ExampleItem title="Tab bar height" route="tabBarHeight" common />
+          <ExampleItem title="Tab bar padding" route="tabBarPadding" common />
+          <ExampleItem
+            common
+            title="Tab bar height and padding"
+            route="tabBarHeightAndPadding"
+          />
+          <ExampleItem title="Tab bar margin" route="tabBarMargin" />
+        </ScrollView>
+        <View
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            height: Constants.statusBarHeight,
+            backgroundColor: '#fff',
+          }}
+        />
+      </View>
+    );
+  }
+}
+
+const StackWithHeaderHeight = createDumbStack({
+  title: 'height: 150',
+  headerStyle: { height: 150 },
+});
+const StackWithHeaderPadding = createDumbStack({
+  title: 'padding: 100',
+  headerStyle: { padding: 100 },
+});
+const StackWithHeaderHeightAndPadding = createDumbStack({
+  title: 'height: 150, padding: 100',
+  headerStyle: { height: 150, padding: 100 },
+});
+const StackWithHeaderPaddingPercent = createDumbStack({
+  title: 'padding: 60%',
+  headerStyle: { padding: '60%' },
+});
+const StackWithHeaderMargin = createDumbStack({
+  title: 'margin: 20 (but why? :/)',
+  headerStyle: { margin: 20 },
+});
+
+const TabBarWithHeight = createDumbTabs(
+  {
+    tabBarLabel: 'label!',
+    tabBarOptions: {
+      style: {
+        height: 100,
+      },
+    },
+  },
+  createDumbStack({
+    title: 'tabBar height 100',
+  })
+);
+
+const TabBarWithPadding = createDumbTabs(
+  {
+    tabBarLabel: 'label!',
+    tabBarOptions: {
+      style: {
+        padding: 20,
+      },
+    },
+  },
+  createDumbStack({
+    title: 'tabBar padding 20',
+  })
+);
+
+const TabBarWithHeightAndPadding = createDumbTabs(
+  {
+    tabBarLabel: 'label!',
+    tabBarOptions: {
+      style: {
+        padding: 20,
+        height: 100,
+      },
+    },
+  },
+  createDumbStack({
+    title: 'tabBar height 100 padding 20',
+  })
+);
+
+const TabBarWithMargin = createDumbTabs(
+  {
+    tabBarLabel: 'label!',
+    tabBarOptions: {
+      style: {
+        margin: 20,
+      },
+    },
+  },
+  createDumbStack({
+    title: 'tabBar margin 20',
+  })
+);
+
+const RootStack = StackNavigator(
+  {
+    exampleList: {
+      screen: ExampleListScreen,
+    },
+    tabs: {
+      screen: TabsScreen,
+    },
+    headerHeight: {
+      screen: StackWithHeaderHeight,
+    },
+    headerPadding: {
+      screen: StackWithHeaderPadding,
+    },
+    headerHeightAndPadding: {
+      screen: StackWithHeaderHeightAndPadding,
+    },
+    headerPaddingPercent: {
+      screen: StackWithHeaderPaddingPercent,
+    },
+    headerMargin: {
+      screen: StackWithHeaderMargin,
+    },
+    tabBarHeight: {
+      screen: TabBarWithHeight,
+    },
+    tabBarPadding: {
+      screen: TabBarWithPadding,
+    },
+    tabBarHeightAndPadding: {
+      screen: TabBarWithHeightAndPadding,
+    },
+    tabBarMargin: {
+      screen: TabBarWithMargin,
+    },
+  },
+  {
+    headerMode: 'none',
+    cardStyle: {
+      backgroundColor: '#fff',
+    },
+  }
+);
+
+// basic tabs (different navbar color, different tabbar color)
+// different header height
+// different header padding
+// different header height and padding
+// different header margin
+// different tabbar height
+// different tabbar padding
+// different tabbar height and padding
+// different tabbar margin
+// without navbar, without safeareaview in one tab and with safeareaview in another tab
+// all should be able to toggle between landscape and portrait
+
+// basic drawer (different navbar color, mess around with drawer options)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

examples/SafeAreaExample/app.json

@@ -0,0 +1,23 @@
+{
+  "expo": {
+    "name": "SafeAreaExample",
+    "description": "An empty new project",
+    "slug": "SafeAreaExample",
+    "privacy": "public",
+    "sdkVersion": "25.0.0",
+    "version": "1.0.0",
+    "primaryColor": "#cccccc",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "packagerOpts": {
+      "assetExts": ["ttf", "mp4"]
+    },
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

examples/SafeAreaExample/package.json

@@ -0,0 +1,15 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "private": true,
+  "dependencies": {
+    "expo": "^25.0.0",
+    "react": "16.2.0",
+    "react-native": "^0.52.0",
+    "react-native-platform-touchable": "^1.1.1",
+    "react-navigation": "link:../.."
+  },
+  "name": "SafeAreaExample",
+  "version": "0.0.0",
+  "description": "Hello Expo!",
+  "author": null
+}

examples/SafeAreaExample/rn-cli.config.js

@@ -0,0 +1,52 @@
+/**
+ * @noflow
+ */
+
+const fs = require('fs');
+const path = require('path');
+const blacklist = require('metro/src/blacklist');
+
+module.exports = {
+  getBlacklistRE() {
+    return blacklist([
+      /react\-navigation\/examples\/(?!SafeAreaExample).*/,
+      /react\-navigation\/node_modules\/react-native\/(.*)/,
+      /react\-navigation\/node_modules\/react\/(.*)/
+    ]);
+  },
+  extraNodeModules: getNodeModulesForDirectory(path.resolve('.')),
+};
+
+function getNodeModulesForDirectory(rootPath) {
+  const nodeModulePath = path.join(rootPath, 'node_modules');
+  const folders = fs.readdirSync(nodeModulePath);
+  return folders.reduce((modules, folderName) => {
+    const folderPath = path.join(nodeModulePath, folderName);
+    if (folderName.startsWith('@')) {
+      const scopedModuleFolders = fs.readdirSync(folderPath);
+      const scopedModules = scopedModuleFolders.reduce(
+        (scopedModules, scopedFolderName) => {
+          scopedModules[
+            `${folderName}/${scopedFolderName}`
+          ] = maybeResolveSymlink(path.join(folderPath, scopedFolderName));
+          return scopedModules;
+        },
+        {}
+      );
+      return Object.assign({}, modules, scopedModules);
+    }
+    modules[folderName] = maybeResolveSymlink(folderPath);
+    return modules;
+  }, {});
+}
+
+function maybeResolveSymlink(maybeSymlinkPath) {
+  if (fs.lstatSync(maybeSymlinkPath).isSymbolicLink()) {
+    const resolved = path.resolve(
+      path.dirname(maybeSymlinkPath),
+      fs.readlinkSync(maybeSymlinkPath)
+    );
+    return resolved;
+  }
+  return maybeSymlinkPath;
+}

examples/SafeAreaExample/screens/DumbStack.js

@@ -0,0 +1,3 @@
+import createDumbStack from './createDumbStack';
+
+export default createDumbStack();

examples/SafeAreaExample/screens/TabsScreen.js

@@ -0,0 +1,3 @@
+import createDumbTabs from './createDumbTabs';
+
+export default createDumbTabs();

examples/SafeAreaExample/screens/createDumbStack.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { StackNavigator } from 'react-navigation';
+import {
+  Dimensions,
+  Button,
+  Platform,
+  ScrollView,
+  Text,
+  View,
+  StatusBar,
+} from 'react-native';
+import { ScreenOrientation } from 'expo';
+
+const Separator = () => (
+  <View
+    style={{
+      width: Dimensions.get('window').width - 100,
+      height: 1,
+      backgroundColor: '#ccc',
+      marginHorizontal: 50,
+      marginTop: 15,
+      marginBottom: 15,
+    }}
+  />
+);
+
+const Spacer = () => (
+  <View
+    style={{
+      marginBottom: Platform.OS === 'android' ? 20 : 5,
+    }}
+  />
+);
+
+export default (navigationOptions = {}) => {
+  class DumbScreen extends React.Component {
+    static navigationOptions = {
+      title: 'Title!',
+      ...navigationOptions,
+      headerStyle: {
+        backgroundColor: '#6b52ae',
+        ...navigationOptions.headerStyle,
+      },
+      headerTitleStyle: {
+        color: '#fff',
+        ...navigationOptions.headerTitleStyle,
+      },
+    };
+
+    render() {
+      return (
+        <ScrollView style={{ flex: 1 }}>
+          <View
+            style={{
+              paddingTop: 30,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}>
+            <Button onPress={this._goBack} title="Go back" />
+            <Separator />
+            <Button onPress={this._setPortrait} title="Set portrait" />
+            <Spacer />
+            <Button onPress={this._setLandscape} title="Set landscape" />
+            <Separator />
+            <Button onPress={this._hideStatusBar} title="Hide status bar" />
+            <Spacer />
+            <Button onPress={this._showStatusBar} title="Show status bar" />
+          </View>
+        </ScrollView>
+      );
+    }
+
+    _goBack = () => {
+      this.props.navigation.goBack(null);
+    };
+
+    _setPortrait = () => {
+      ScreenOrientation.allow(ScreenOrientation.Orientation.PORTRAIT);
+    };
+
+    _setLandscape = () => {
+      ScreenOrientation.allow(ScreenOrientation.Orientation.LANDSCAPE);
+    };
+
+    _hideStatusBar = () => {
+      StatusBar.setHidden(true, 'slide');
+    };
+
+    _showStatusBar = () => {
+      StatusBar.setHidden(false, 'slide');
+    };
+  }
+
+  return StackNavigator({
+    dumb: {
+      screen: DumbScreen,
+    },
+  });
+};

examples/SafeAreaExample/screens/createDumbTabs.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Platform, View } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { TabNavigator, TabBarBottom } from 'react-navigation';
+import createDumbStack from './createDumbStack';
+
+export default (navigationOptions = {}, DumbStack = createDumbStack()) => {
+  return TabNavigator(
+    {
+      Home: {
+        screen: DumbStack,
+      },
+      Links: {
+        screen: DumbStack,
+      },
+      Settings: {
+        screen: DumbStack,
+      },
+    },
+    {
+      navigationOptions: ({ navigation }) => ({
+        ...navigationOptions,
+        tabBarIcon: ({ focused }) => {
+          const { routeName } = navigation.state;
+          let iconName;
+          switch (routeName) {
+            case 'Home':
+              iconName =
+                Platform.OS === 'ios'
+                  ? `ios-information-circle${focused ? '' : '-outline'}`
+                  : 'md-information-circle';
+              break;
+            case 'Links':
+              iconName =
+                Platform.OS === 'ios'
+                  ? `ios-link${focused ? '' : '-outline'}`
+                  : 'md-link';
+              break;
+            case 'Settings':
+              iconName =
+                Platform.OS === 'ios'
+                  ? `ios-options${focused ? '' : '-outline'}`
+                  : 'md-options';
+          }
+          return (
+            <Ionicons
+              name={iconName}
+              size={28}
+              style={{ marginBottom: -3 }}
+              color={focused ? '#6b52ae' : '#ccc'}
+            />
+          );
+        },
+      }),
+      tabBarOptions: {
+        activeTintColor: '#6b52ae',
+        ...navigationOptions.tabBarOptions,
+        style: {
+          backgroundColor: '#F5F1FF',
+          ...(navigationOptions.tabBarOptions ? navigationOptions.tabBarOptions.style : {}),
+        }
+      },
+      tabBarComponent: TabBarBottom,
+      tabBarPosition: 'bottom',
+      animationEnabled: false,
+      swipeEnabled: false,
+    }
+  );
+};

flow/react-navigation.js

@@ -143,14 +143,6 @@ declare module 'react-navigation' {
     +type: 'Navigation/TOGGLE_DRAWER',
     +key?: string,
   |};
-  declare export type NavigationDrawerOpenedAction = {|
-    +type: 'Navigation/DRAWER_OPENED',
-    +key?: string,
-  |};
-  declare export type NavigationDrawerClosedAction = {|
-    +type: 'Navigation/DRAWER_CLOSED',
-    +key?: string,
-  |};
 
   declare export type NavigationAction =
     | NavigationBackAction
@@ -165,9 +157,7 @@ declare module 'react-navigation' {
     | NavigationCompleteTransitionAction
     | NavigationOpenDrawerAction
     | NavigationCloseDrawerAction
-    | NavigationToggleDrawerAction
+    | NavigationToggleDrawerAction;
-    | NavigationDrawerOpenedAction
-    | NavigationDrawerClosedAction;
 
   /**
    * NavigationState is a tree of routes for a single navigator, where each
@@ -293,7 +283,7 @@ declare module 'react-navigation' {
 
   declare export type NavigationComponent =
     | NavigationScreenComponent<NavigationRoute, *, *>
-    | NavigationNavigator<*, *, *>;
+    | NavigationContainer<*, *, *>;
 
   declare interface withOptionalNavigationOptions<Options> {
     navigationOptions?: NavigationScreenConfig<Options>;
@@ -317,7 +307,7 @@ declare module 'react-navigation' {
     State: NavigationState,
     Options: {},
     Props: {}
-  > = React$StatelessFunctionalComponent<{
+  > = React$ComponentType<{
     ...Props,
     ...NavigationNavigatorProps<Options, State>,
   }> &
@@ -396,7 +386,7 @@ declare module 'react-navigation' {
     initialRouteName?: string,
     initialRouteParams?: NavigationParams,
     paths?: NavigationPathsConfig,
-    defaultNavigationOptions?: NavigationScreenConfig<*>,
+    navigationOptions?: NavigationScreenConfig<*>,
     initialRouteKey?: string,
   |};
 
@@ -404,18 +394,10 @@ declare module 'react-navigation' {
     mode?: 'card' | 'modal',
     headerMode?: HeaderMode,
     headerTransitionPreset?: 'fade-in-place' | 'uikit',
-    headerLayoutPreset?: 'left' | 'center',
-    headerBackTitleVisible?: boolean,
     cardStyle?: ViewStyleProp,
-    transitionConfig?: (
+    transitionConfig?: () => TransitionConfig,
-      transitionProps: NavigationTransitionProps,
-      prevTransitionProps: ?NavigationTransitionProps,
-      isModal: boolean
-    ) => TransitionConfig,
     onTransitionStart?: () => void,
     onTransitionEnd?: () => void,
-    transparentCard?: boolean,
-    disableKeyboardHandling?: boolean,
   |};
 
   declare export type StackNavigatorConfig = {|
@@ -431,7 +413,7 @@ declare module 'react-navigation' {
     initialRouteName?: string,
     initialRouteParams?: NavigationParams,
     paths?: NavigationPathsConfig,
-    defaultNavigationOptions?: NavigationScreenConfig<*>,
+    navigationOptions?: NavigationScreenConfig<*>,
     order?: Array<string>,
     backBehavior?: 'none' | 'initialRoute', // defaults to `'none'`
     resetOnBlur?: boolean, // defaults to `true`
@@ -445,7 +427,7 @@ declare module 'react-navigation' {
     initialRouteName?: string,
     initialRouteParams?: NavigationParams,
     paths?: NavigationPathsConfig,
-    defaultNavigationOptions?: NavigationScreenConfig<*>,
+    navigationOptions?: NavigationScreenConfig<*>,
     // todo: type these as the real route names rather than 'string'
     order?: Array<string>,
     // Does the back button cause the router to switch to the initial tab
@@ -533,29 +515,7 @@ declare module 'react-navigation' {
       eventName: string,
       callback: NavigationEventCallback
     ) => NavigationEventSubscription,
-    getParam: <ParamName: string>(
+    getParam: (paramName: string, fallback?: any) => any,
-      paramName: ParamName,
-      fallback?: $ElementType<
-        $PropertyType<
-          {|
-            ...{| params: {| [ParamName]: void |} |},
-            ...$Exact<S>,
-          |},
-          'params'
-        >,
-        ParamName
-      >
-    ) => $ElementType<
-      $PropertyType<
-        {|
-          ...{| params: {| [ParamName]: void |} |},
-          ...$Exact<S>,
-        |},
-        'params'
-      >,
-      ParamName
-    >,
-    dangerouslyGetParent: () => NavigationScreenProp<*>,
     isFocused: () => boolean,
     // Shared action creators that exist for all routers
     goBack: (routeKey?: ?string) => boolean,
@@ -761,9 +721,6 @@ declare module 'react-navigation' {
    * Now we type the actual exported module
    */
 
-  declare export function createAppContainer<S: NavigationState, O: {}>(
-    Component: NavigationNavigator<S, O, *>
-  ): NavigationContainer<S, O, *>;
   declare export function createNavigationContainer<S: NavigationState, O: {}>(
     Component: NavigationNavigator<S, O, *>
   ): NavigationContainer<S, O, *>;
@@ -842,7 +799,7 @@ declare module 'react-navigation' {
       actions: Array<NavigationNavigateAction>,
     }) => NavigationResetAction,
     replace: (payload: {
-      key?: string,
+      key: string,
       routeName: string,
       params?: NavigationParams,
       action?: NavigationNavigateAction,
@@ -856,8 +813,6 @@ declare module 'react-navigation' {
     OPEN_DRAWER: 'Navigation/OPEN_DRAWER',
     CLOSE_DRAWER: 'Navigation/CLOSE_DRAWER',
     TOGGLE_DRAWER: 'Navigation/TOGGLE_DRAWER',
-    DRAWER_OPENED: 'Navigation/DRAWER_OPENED',
-    DRAWER_CLOSED: 'Navigation/DRAWER_CLOSED',
 
     openDrawer: (payload: {
       key?: string,
@@ -895,11 +850,11 @@ declare module 'react-navigation' {
   declare export function StackNavigator(
     routeConfigMap: NavigationRouteConfigMap,
     stackConfig?: StackNavigatorConfig
-  ): NavigationNavigator<*, *, *>;
+  ): NavigationContainer<*, *, *>;
   declare export function createStackNavigator(
     routeConfigMap: NavigationRouteConfigMap,
     stackConfig?: StackNavigatorConfig
-  ): NavigationNavigator<*, *, *>;
+  ): NavigationContainer<*, *, *>;
 
   declare type _TabViewConfig = {|
     tabBarComponent?: React$ElementType,
@@ -923,31 +878,31 @@ declare module 'react-navigation' {
   declare export function TabNavigator(
     routeConfigs: NavigationRouteConfigMap,
     config?: _TabNavigatorConfig
-  ): NavigationNavigator<*, *, *>;
+  ): NavigationContainer<*, *, *>;
   declare export function createTabNavigator(
     routeConfigs: NavigationRouteConfigMap,
     config?: _TabNavigatorConfig
-  ): NavigationNavigator<*, *, *>;
+  ): NavigationContainer<*, *, *>;
   /* TODO: fix the config for each of these tab navigator types */
   declare export function createBottomTabNavigator(
     routeConfigs: NavigationRouteConfigMap,
     config?: _TabNavigatorConfig
-  ): NavigationNavigator<*, *, *>;
+  ): NavigationContainer<*, *, *>;
   declare export function createMaterialTopTabNavigator(
     routeConfigs: NavigationRouteConfigMap,
     config?: _TabNavigatorConfig
-  ): NavigationNavigator<*, *, *>;
+  ): NavigationContainer<*, *, *>;
   declare type _SwitchNavigatorConfig = {|
     ...NavigationSwitchRouterConfig,
   |};
   declare export function SwitchNavigator(
     routeConfigs: NavigationRouteConfigMap,
     config?: _SwitchNavigatorConfig
-  ): NavigationNavigator<*, *, *>;
+  ): NavigationContainer<*, *, *>;
   declare export function createSwitchNavigator(
     routeConfigs: NavigationRouteConfigMap,
     config?: _SwitchNavigatorConfig
-  ): NavigationNavigator<*, *, *>;
+  ): NavigationContainer<*, *, *>;
 
   declare type _DrawerViewConfig = {|
     drawerLockMode?: 'unlocked' | 'locked-closed' | 'locked-open',
@@ -968,11 +923,11 @@ declare module 'react-navigation' {
   declare export function DrawerNavigator(
     routeConfigs: NavigationRouteConfigMap,
     config?: _DrawerNavigatorConfig
-  ): NavigationNavigator<*, *, *>;
+  ): NavigationContainer<*, *, *>;
   declare export function createDrawerNavigator(
     routeConfigs: NavigationRouteConfigMap,
     config?: _DrawerNavigatorConfig
-  ): NavigationNavigator<*, *, *>;
+  ): NavigationContainer<*, *, *>;
 
   declare export function StackRouter(
     routeConfigs: NavigationRouteConfigMap,
@@ -1228,6 +1183,6 @@ declare module 'react-navigation' {
     dispatch: NavigationDispatch,
     actionSubscribers: Set<NavigationEventCallback>,
     getScreenProps: () => {},
-    getCurrentNavigation: () => ?NavigationScreenProp<State>
+    getCurrentNavigation: () => NavigationScreenProp<State>
   ): NavigationScreenProp<State>;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "3.0.2",
+  "version": "2.6.2",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "repository": {
@@ -19,26 +19,26 @@
     "test-update-snapshot": "jest --updateSnapshot",
     "lint": "eslint .",
     "format": "eslint --fix .",
-    "precommit": "lint-staged",
+    "precommit": "lint-staged"
-    "release": "release-it"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
   },
   "files": [
-    "src",
+    "src"
-    "NavigationTestUtils.js"
   ],
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "dependencies": {
-    "@react-navigation/core": "^3.0.0",
+    "clamp": "^1.0.1",
-    "@react-navigation/native": "^3.0.1",
+    "create-react-context": "^0.2.1",
-    "react-navigation-drawer": "^1.0.3",
+    "hoist-non-react-statics": "^2.2.0",
-    "react-navigation-stack": "^1.0.2",
+    "path-to-regexp": "^1.7.0",
-    "react-navigation-tabs": "^1.0.0"
+    "query-string": "^6.1.0",
+    "react-lifecycles-compat": "^3",
+    "react-native-safe-area-view": "^0.8.0",
+    "react-navigation-deprecated-tab-navigator": "1.3.0",
+    "react-navigation-drawer": "0.4.3",
+    "react-navigation-tabs": "0.5.1"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
@@ -47,7 +47,6 @@
     "babel-jest": "^22.4.1",
     "babel-preset-react-native": "^2.1.0",
     "codecov": "^2.2.0",
-    "conventional-changelog-cli": "^2.0.5",
     "eslint": "^4.2.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-import": "^2.7.0",
@@ -63,8 +62,7 @@
     "react": "16.2.0",
     "react-native": "^0.52.0",
     "react-native-vector-icons": "^4.2.0",
-    "react-test-renderer": "^16.0.0",
+    "react-test-renderer": "^16.0.0"
-    "release-it": "^7.6.1"
   },
   "jest": {
     "notify": true,
@@ -91,7 +89,7 @@
       "<rootDir>/examples/"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|react-navigation-stack|@react-navigation/core|@react-navigation/native)"
+      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator)"
     ]
   },
   "lint-staged": {

src/NavigationActions.js

@@ -0,0 +1,57 @@
+const BACK = 'Navigation/BACK';
+const INIT = 'Navigation/INIT';
+const NAVIGATE = 'Navigation/NAVIGATE';
+const SET_PARAMS = 'Navigation/SET_PARAMS';
+
+const back = (payload = {}) => ({
+  type: BACK,
+  key: payload.key,
+  immediate: payload.immediate,
+});
+
+const init = (payload = {}) => {
+  const action = {
+    type: INIT,
+  };
+  if (payload.params) {
+    action.params = payload.params;
+  }
+  return action;
+};
+
+const navigate = payload => {
+  const action = {
+    type: NAVIGATE,
+    routeName: payload.routeName,
+  };
+  if (payload.params) {
+    action.params = payload.params;
+  }
+  if (payload.action) {
+    action.action = payload.action;
+  }
+  if (payload.key) {
+    action.key = payload.key;
+  }
+  return action;
+};
+
+const setParams = payload => ({
+  type: SET_PARAMS,
+  key: payload.key,
+  params: payload.params,
+});
+
+export default {
+  // Action constants
+  BACK,
+  INIT,
+  NAVIGATE,
+  SET_PARAMS,
+
+  // Action creators
+  back,
+  init,
+  navigate,
+  setParams,
+};

src/StateUtils.js

@@ -0,0 +1,204 @@
+import invariant from './utils/invariant';
+
+/**
+ * Utilities to perform atomic operation with navigate state and routes.
+ *
+ * ```javascript
+ * const state1 = {key: 'screen 1'};
+ * const state2 = NavigationStateUtils.push(state1, {key: 'screen 2'});
+ * ```
+ */
+const StateUtils = {
+  /**
+   * Gets a route by key. If the route isn't found, returns `null`.
+   */
+  get(state, key) {
+    return state.routes.find(route => route.key === key) || null;
+  },
+
+  /**
+   * Returns the first index at which a given route's key can be found in the
+   * routes of the navigation state, or -1 if it is not present.
+   */
+  indexOf(state, key) {
+    return state.routes.findIndex(route => route.key === key);
+  },
+
+  /**
+   * Returns `true` at which a given route's key can be found in the
+   * routes of the navigation state.
+   */
+  has(state, key) {
+    return !!state.routes.some(route => route.key === key);
+  },
+
+  /**
+   * Pushes a new route into the navigation state.
+   * Note that this moves the index to the positon to where the last route in the
+   * stack is at.
+   */
+  push(state, route) {
+    invariant(
+      StateUtils.indexOf(state, route.key) === -1,
+      'should not push route with duplicated key %s',
+      route.key
+    );
+
+    const routes = state.routes.slice();
+    routes.push(route);
+
+    return {
+      ...state,
+      index: routes.length - 1,
+      routes,
+    };
+  },
+
+  /**
+   * Pops out a route from the navigation state.
+   * Note that this moves the index to the positon to where the last route in the
+   * stack is at.
+   */
+  pop(state) {
+    if (state.index <= 0) {
+      // [Note]: Over-popping does not throw error. Instead, it will be no-op.
+      return state;
+    }
+    const routes = state.routes.slice(0, -1);
+    return {
+      ...state,
+      index: routes.length - 1,
+      routes,
+    };
+  },
+
+  /**
+   * Sets the focused route of the navigation state by index.
+   */
+  jumpToIndex(state, index) {
+    if (index === state.index) {
+      return state;
+    }
+
+    invariant(!!state.routes[index], 'invalid index %s to jump to', index);
+
+    return {
+      ...state,
+      index,
+    };
+  },
+
+  /**
+   * Sets the focused route of the navigation state by key.
+   */
+  jumpTo(state, key) {
+    const index = StateUtils.indexOf(state, key);
+    return StateUtils.jumpToIndex(state, index);
+  },
+
+  /**
+   * Sets the focused route to the previous route.
+   */
+  back(state) {
+    const index = state.index - 1;
+    const route = state.routes[index];
+    return route ? StateUtils.jumpToIndex(state, index) : state;
+  },
+
+  /**
+   * Sets the focused route to the next route.
+   */
+  forward(state) {
+    const index = state.index + 1;
+    const route = state.routes[index];
+    return route ? StateUtils.jumpToIndex(state, index) : state;
+  },
+
+  /**
+   * Replace a route by a key.
+   * Note that this moves the index to the position to where the new route in the
+   * stack is at and updates the routes array accordingly.
+   */
+  replaceAndPrune(state, key, route) {
+    const index = StateUtils.indexOf(state, key);
+    const replaced = StateUtils.replaceAtIndex(state, index, route);
+
+    return {
+      ...replaced,
+      routes: replaced.routes.slice(0, index + 1),
+    };
+  },
+
+  /**
+   * Replace a route by a key.
+   * Note that this moves the index to the position to where the new route in the
+   * stack is at. Does not prune the routes.
+   * If preserveIndex is true then replacing the route does not cause the index
+   * to change to the index of that route.
+   */
+  replaceAt(state, key, route, preserveIndex = false) {
+    const index = StateUtils.indexOf(state, key);
+    const nextIndex = preserveIndex ? state.index : index;
+    let nextState = StateUtils.replaceAtIndex(state, index, route);
+    nextState.index = nextIndex;
+    return nextState;
+  },
+
+  /**
+   * Replace a route by a index.
+   * Note that this moves the index to the positon to where the new route in the
+   * stack is at.
+   */
+  replaceAtIndex(state, index, route) {
+    invariant(
+      !!state.routes[index],
+      'invalid index %s for replacing route %s',
+      index,
+      route.key
+    );
+
+    if (state.routes[index] === route && index === state.index) {
+      return state;
+    }
+
+    const routes = state.routes.slice();
+    routes[index] = route;
+
+    return {
+      ...state,
+      index,
+      routes,
+    };
+  },
+
+  /**
+   * Resets all routes.
+   * Note that this moves the index to the position to where the last route in the
+   * stack is at if the param `index` isn't provided.
+   */
+  reset(state, routes, index) {
+    invariant(
+      routes.length && Array.isArray(routes),
+      'invalid routes to replace'
+    );
+
+    const nextIndex = index === undefined ? routes.length - 1 : index;
+
+    if (state.routes.length === routes.length && state.index === nextIndex) {
+      const compare = (route, ii) => routes[ii] === route;
+      if (state.routes.every(compare)) {
+        return state;
+      }
+    }
+
+    invariant(!!routes[nextIndex], 'invalid index %s to reset', nextIndex);
+
+    return {
+      ...state,
+      index: nextIndex,
+      routes,
+    };
+  },
+};
+
+export default StateUtils;

src/__tests__/NavigationActions-test.js

@@ -0,0 +1,57 @@
+import NavigationActions from '../NavigationActions';
+
+describe('generic navigation actions', () => {
+  const params = { foo: 'bar' };
+  const navigateAction = NavigationActions.navigate({ routeName: 'another' });
+
+  it('exports back action and type', () => {
+    expect(NavigationActions.back()).toEqual({ type: NavigationActions.BACK });
+    expect(NavigationActions.back({ key: 'test' })).toEqual({
+      type: NavigationActions.BACK,
+      key: 'test',
+    });
+  });
+
+  it('exports init action and type', () => {
+    expect(NavigationActions.init()).toEqual({ type: NavigationActions.INIT });
+    expect(NavigationActions.init({ params })).toEqual({
+      type: NavigationActions.INIT,
+      params,
+    });
+  });
+
+  it('exports navigate action and type', () => {
+    expect(NavigationActions.navigate({ routeName: 'test' })).toEqual({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'test',
+    });
+    expect(
+      NavigationActions.navigate({
+        routeName: 'test',
+        params,
+        action: navigateAction,
+      })
+    ).toEqual({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'test',
+      params,
+      action: {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'another',
+      },
+    });
+  });
+
+  it('exports setParams action and type', () => {
+    expect(
+      NavigationActions.setParams({
+        key: 'test',
+        params,
+      })
+    ).toEqual({
+      type: NavigationActions.SET_PARAMS,
+      key: 'test',
+      params,
+    });
+  });
+});

src/__tests__/NavigationContainer-test.js

@@ -0,0 +1,265 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import renderer from 'react-test-renderer';
+
+import NavigationActions from '../NavigationActions';
+import createStackNavigator from '../navigators/createStackNavigator';
+import createNavigationContainer, {
+  _TESTING_ONLY_reset_container_count,
+} from '../createNavigationContainer';
+
+describe('NavigationContainer', () => {
+  jest.useFakeTimers();
+  beforeEach(() => {
+    _TESTING_ONLY_reset_container_count();
+  });
+
+  const FooScreen = () => <div />;
+  const BarScreen = () => <div />;
+  const BazScreen = () => <div />;
+  const CarScreen = () => <div />;
+  const DogScreen = () => <div />;
+  const ElkScreen = () => <div />;
+  const Stack = createStackNavigator(
+    {
+      foo: {
+        screen: FooScreen,
+      },
+      bar: {
+        screen: BarScreen,
+      },
+      baz: {
+        screen: BazScreen,
+      },
+      car: {
+        screen: CarScreen,
+      },
+      dog: {
+        screen: DogScreen,
+      },
+      elk: {
+        screen: ElkScreen,
+      },
+    },
+    {
+      initialRouteName: 'foo',
+    }
+  );
+  const NavigationContainer = createNavigationContainer(Stack);
+
+  describe('state.nav', () => {
+    it("should be preloaded with the router's initial state", () => {
+      const navigationContainer = renderer
+        .create(<NavigationContainer />)
+        .getInstance();
+      expect(navigationContainer.state.nav).toMatchObject({ index: 0 });
+      expect(navigationContainer.state.nav.routes).toBeInstanceOf(Array);
+      expect(navigationContainer.state.nav.routes.length).toBe(1);
+      expect(navigationContainer.state.nav.routes[0]).toMatchObject({
+        routeName: 'foo',
+      });
+    });
+  });
+
+  describe('dispatch', () => {
+    it('returns true when given a valid action', () => {
+      const navigationContainer = renderer
+        .create(<NavigationContainer />)
+        .getInstance();
+      jest.runOnlyPendingTimers();
+      expect(
+        navigationContainer.dispatch(
+          NavigationActions.navigate({ routeName: 'bar' })
+        )
+      ).toEqual(true);
+    });
+
+    it('returns false when given an invalid action', () => {
+      const navigationContainer = renderer
+        .create(<NavigationContainer />)
+        .getInstance();
+      jest.runOnlyPendingTimers();
+      expect(navigationContainer.dispatch(NavigationActions.back())).toEqual(
+        false
+      );
+    });
+
+    it('updates state.nav with an action by the next tick', () => {
+      const navigationContainer = renderer
+        .create(<NavigationContainer />)
+        .getInstance();
+
+      expect(
+        navigationContainer.dispatch(
+          NavigationActions.navigate({ routeName: 'bar' })
+        )
+      ).toEqual(true);
+
+      // Fake the passing of a tick
+      jest.runOnlyPendingTimers();
+
+      expect(navigationContainer.state.nav).toMatchObject({
+        index: 1,
+        routes: [{ routeName: 'foo' }, { routeName: 'bar' }],
+      });
+    });
+
+    it('does not discard actions when called twice in one tick', () => {
+      const navigationContainer = renderer
+        .create(<NavigationContainer />)
+        .getInstance();
+      const initialState = JSON.parse(
+        JSON.stringify(navigationContainer.state.nav)
+      );
+
+      // First dispatch
+      expect(
+        navigationContainer.dispatch(
+          NavigationActions.navigate({ routeName: 'bar' })
+        )
+      ).toEqual(true);
+
+      // Make sure that the test runner has NOT synchronously applied setState before the tick
+      expect(navigationContainer.state.nav).toMatchObject(initialState);
+
+      // Second dispatch
+      expect(
+        navigationContainer.dispatch(
+          NavigationActions.navigate({ routeName: 'baz' })
+        )
+      ).toEqual(true);
+
+      // Fake the passing of a tick
+      jest.runOnlyPendingTimers();
+
+      expect(navigationContainer.state.nav).toMatchObject({
+        index: 2,
+        routes: [
+          { routeName: 'foo' },
+          { routeName: 'bar' },
+          { routeName: 'baz' },
+        ],
+      });
+    });
+
+    it('does not discard actions when called more than 2 times in one tick', () => {
+      const navigationContainer = renderer
+        .create(<NavigationContainer />)
+        .getInstance();
+      const initialState = JSON.parse(
+        JSON.stringify(navigationContainer.state.nav)
+      );
+
+      // First dispatch
+      expect(
+        navigationContainer.dispatch(
+          NavigationActions.navigate({ routeName: 'bar' })
+        )
+      ).toEqual(true);
+
+      // Make sure that the test runner has NOT synchronously applied setState before the tick
+      expect(navigationContainer.state.nav).toMatchObject(initialState);
+
+      // Second dispatch
+      expect(
+        navigationContainer.dispatch(
+          NavigationActions.navigate({ routeName: 'baz' })
+        )
+      ).toEqual(true);
+
+      // Third dispatch
+      expect(
+        navigationContainer.dispatch(
+          NavigationActions.navigate({ routeName: 'car' })
+        )
+      ).toEqual(true);
+
+      // Fourth dispatch
+      expect(
+        navigationContainer.dispatch(
+          NavigationActions.navigate({ routeName: 'dog' })
+        )
+      ).toEqual(true);
+
+      // Fifth dispatch
+      expect(
+        navigationContainer.dispatch(
+          NavigationActions.navigate({ routeName: 'elk' })
+        )
+      ).toEqual(true);
+
+      // Fake the passing of a tick
+      jest.runOnlyPendingTimers();
+
+      expect(navigationContainer.state.nav).toMatchObject({
+        index: 5,
+        routes: [
+          { routeName: 'foo' },
+          { routeName: 'bar' },
+          { routeName: 'baz' },
+          { routeName: 'car' },
+          { routeName: 'dog' },
+          { routeName: 'elk' },
+        ],
+      });
+    });
+  });
+
+  describe('warnings', () => {
+    function spyConsole() {
+      let spy = {};
+
+      beforeEach(() => {
+        spy.console = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      });
+
+      afterEach(() => {
+        spy.console.mockRestore();
+      });
+
+      return spy;
+    }
+
+    describe('detached navigators', () => {
+      beforeEach(() => {
+        _TESTING_ONLY_reset_container_count();
+      });
+
+      let spy = spyConsole();
+
+      it('warns when you render more than one container explicitly', () => {
+        class BlankScreen extends React.Component {
+          render() {
+            return <View />;
+          }
+        }
+
+        class RootScreen extends React.Component {
+          render() {
+            return (
+              <View>
+                <ChildNavigator />
+              </View>
+            );
+          }
+        }
+
+        const ChildNavigator = createNavigationContainer(
+          createStackNavigator({
+            Child: BlankScreen,
+          })
+        );
+
+        const RootStack = createNavigationContainer(
+          createStackNavigator({
+            Root: RootScreen,
+          })
+        );
+
+        renderer.create(<RootStack />).toJSON();
+        expect(spy).toMatchSnapshot();
+      });
+    });
+  });
+});

src/__tests__/NavigationStateUtils-test.js

@@ -0,0 +1,267 @@
+import NavigationStateUtils from '../StateUtils';
+
+const routeName = 'Anything';
+
+describe('StateUtils', () => {
+  // Getters
+  it('gets route', () => {
+    const state = {
+      index: 0,
+      routes: [{ key: 'a', routeName }],
+      isTransitioning: false,
+    };
+    expect(NavigationStateUtils.get(state, 'a')).toEqual({
+      key: 'a',
+      routeName,
+    });
+    expect(NavigationStateUtils.get(state, 'b')).toBe(null);
+  });
+
+  it('gets route index', () => {
+    const state = {
+      index: 1,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    expect(NavigationStateUtils.indexOf(state, 'a')).toBe(0);
+    expect(NavigationStateUtils.indexOf(state, 'b')).toBe(1);
+    expect(NavigationStateUtils.indexOf(state, 'c')).toBe(-1);
+  });
+
+  it('has a route', () => {
+    const state = {
+      index: 0,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    expect(NavigationStateUtils.has(state, 'b')).toBe(true);
+    expect(NavigationStateUtils.has(state, 'c')).toBe(false);
+  });
+
+  // Push
+  it('pushes a route', () => {
+    const state = {
+      index: 0,
+      routes: [{ key: 'a', routeName }],
+      isTransitioning: false,
+    };
+    const newState = {
+      index: 1,
+      isTransitioning: false,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+    };
+    expect(NavigationStateUtils.push(state, { key: 'b', routeName })).toEqual(
+      newState
+    );
+  });
+
+  it('does not push duplicated route', () => {
+    const state = {
+      index: 0,
+      routes: [{ key: 'a', routeName }],
+      isTransitioning: false,
+    };
+    expect(() =>
+      NavigationStateUtils.push(state, { key: 'a', routeName })
+    ).toThrow();
+  });
+
+  // Pop
+  it('pops route', () => {
+    const state = {
+      index: 1,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    const newState = {
+      index: 0,
+      routes: [{ key: 'a', routeName }],
+      isTransitioning: false,
+    };
+    expect(NavigationStateUtils.pop(state)).toEqual(newState);
+  });
+
+  it('does not pop route if not applicable', () => {
+    const state = {
+      index: 0,
+      routes: [{ key: 'a', routeName }],
+      isTransitioning: false,
+    };
+    expect(NavigationStateUtils.pop(state)).toBe(state);
+  });
+
+  // Jump
+  it('jumps to new index', () => {
+    const state = {
+      index: 0,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    const newState = {
+      index: 1,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    expect(NavigationStateUtils.jumpToIndex(state, 0)).toBe(state);
+    expect(NavigationStateUtils.jumpToIndex(state, 1)).toEqual(newState);
+  });
+
+  it('throws if jumps to invalid index', () => {
+    const state = {
+      index: 0,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    expect(() => NavigationStateUtils.jumpToIndex(state, 2)).toThrow();
+  });
+
+  it('jumps to new key', () => {
+    const state = {
+      index: 0,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    const newState = {
+      index: 1,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    expect(NavigationStateUtils.jumpTo(state, 'a')).toBe(state);
+    expect(NavigationStateUtils.jumpTo(state, 'b')).toEqual(newState);
+  });
+
+  it('throws if jumps to invalid key', () => {
+    const state = {
+      index: 0,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    expect(() => NavigationStateUtils.jumpTo(state, 'c')).toThrow();
+  });
+
+  it('move backwards', () => {
+    const state = {
+      index: 1,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    const newState = {
+      index: 0,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    expect(NavigationStateUtils.back(state)).toEqual(newState);
+    expect(NavigationStateUtils.back(newState)).toBe(newState);
+  });
+
+  it('move forwards', () => {
+    const state = {
+      index: 0,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    const newState = {
+      index: 1,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    expect(NavigationStateUtils.forward(state)).toEqual(newState);
+    expect(NavigationStateUtils.forward(newState)).toBe(newState);
+  });
+
+  // Replace
+  it('Replaces by key', () => {
+    const state = {
+      index: 0,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    const newState = {
+      index: 1,
+      routes: [{ key: 'a', routeName }, { key: 'c', routeName }],
+      isTransitioning: false,
+    };
+    expect(
+      NavigationStateUtils.replaceAt(state, 'b', { key: 'c', routeName })
+    ).toEqual(newState);
+  });
+
+  it('Replaces by index', () => {
+    const state = {
+      index: 0,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    const newState = {
+      index: 1,
+      routes: [{ key: 'a', routeName }, { key: 'c', routeName }],
+      isTransitioning: false,
+    };
+    expect(
+      NavigationStateUtils.replaceAtIndex(state, 1, { key: 'c', routeName })
+    ).toEqual(newState);
+  });
+
+  it('Returns the state with updated index if route is unchanged but index changes', () => {
+    const state = {
+      index: 0,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    expect(
+      NavigationStateUtils.replaceAtIndex(state, 1, state.routes[1])
+    ).toEqual({ ...state, index: 1 });
+  });
+
+  // Reset
+  it('Resets routes', () => {
+    const state = {
+      index: 0,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    const newState = {
+      index: 1,
+      routes: [{ key: 'x', routeName }, { key: 'y', routeName }],
+      isTransitioning: false,
+    };
+    expect(
+      NavigationStateUtils.reset(state, [
+        { key: 'x', routeName },
+        { key: 'y', routeName },
+      ])
+    ).toEqual(newState);
+
+    expect(() => {
+      NavigationStateUtils.reset(state, []);
+    }).toThrow();
+  });
+
+  it('Resets routes with index', () => {
+    const state = {
+      index: 0,
+      routes: [{ key: 'a', routeName }, { key: 'b', routeName }],
+      isTransitioning: false,
+    };
+    const newState = {
+      index: 0,
+      routes: [{ key: 'x', routeName }, { key: 'y', routeName }],
+      isTransitioning: false,
+    };
+    expect(
+      NavigationStateUtils.reset(
+        state,
+        [{ key: 'x', routeName }, { key: 'y', routeName }],
+        0
+      )
+    ).toEqual(newState);
+
+    expect(() => {
+      NavigationStateUtils.reset(
+        state,
+        [{ key: 'x', routeName }, { key: 'y', routeName }],
+        100
+      );
+    }).toThrow();
+  });
+});

src/__tests__/__snapshots__/NavigationContainer-test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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://reactnavigation.org/docs/common-mistakes.html#explicitly-rendering-more-than-one-navigator",
+      ],
+    ],
+  },
+}
+`;

src/__tests__/getChildEventSubscriber-test.js

@@ -0,0 +1,460 @@
+import getChildEventSubscriber from '../getChildEventSubscriber';
+
+test('child action events only flow when focused', () => {
+  const parentSubscriber = jest.fn();
+  const emitParentAction = payload => {
+    parentSubscriber.mock.calls.forEach(subs => {
+      if (subs[0] === payload.type) {
+        subs[1](payload);
+      }
+    });
+  };
+  const subscriptionRemove = () => {};
+  parentSubscriber.mockReturnValueOnce({ remove: subscriptionRemove });
+  const childEventSubscriber = getChildEventSubscriber(parentSubscriber, 'key1')
+    .addListener;
+  const testState = {
+    key: 'foo',
+    routeName: 'FooRoute',
+    routes: [{ key: 'key0' }, { key: 'key1' }],
+    index: 0,
+    isTransitioning: false,
+  };
+  const focusedTestState = {
+    ...testState,
+    index: 1,
+  };
+  const childActionHandler = jest.fn();
+  const childWillFocusHandler = jest.fn();
+  const childDidFocusHandler = jest.fn();
+  childEventSubscriber('action', childActionHandler);
+  childEventSubscriber('willFocus', childWillFocusHandler);
+  childEventSubscriber('didFocus', childDidFocusHandler);
+  emitParentAction({
+    type: 'action',
+    state: focusedTestState,
+    lastState: testState,
+    action: { type: 'FooAction' },
+  });
+  expect(childActionHandler.mock.calls.length).toBe(0);
+  expect(childWillFocusHandler.mock.calls.length).toBe(1);
+  expect(childDidFocusHandler.mock.calls.length).toBe(1);
+  emitParentAction({
+    type: 'action',
+    state: focusedTestState,
+    lastState: focusedTestState,
+    action: { type: 'FooAction' },
+  });
+  expect(childActionHandler.mock.calls.length).toBe(1);
+  expect(childWillFocusHandler.mock.calls.length).toBe(1);
+  expect(childDidFocusHandler.mock.calls.length).toBe(1);
+});
+
+test('grandchildren subscription', () => {
+  const grandParentSubscriber = jest.fn();
+  const emitGrandParentAction = payload => {
+    grandParentSubscriber.mock.calls.forEach(subs => {
+      if (subs[0] === payload.type) {
+        subs[1](payload);
+      }
+    });
+  };
+  const subscriptionRemove = () => {};
+  grandParentSubscriber.mockReturnValueOnce({ remove: subscriptionRemove });
+  const parentSubscriber = getChildEventSubscriber(
+    grandParentSubscriber,
+    'parent'
+  ).addListener;
+  const childEventSubscriber = getChildEventSubscriber(parentSubscriber, 'key1')
+    .addListener;
+  const parentBlurState = {
+    key: 'foo',
+    routeName: 'FooRoute',
+    routes: [
+      { key: 'aunt' },
+      {
+        key: 'parent',
+        routes: [{ key: 'key0' }, { key: 'key1' }],
+        index: 1,
+        isTransitioning: false,
+      },
+    ],
+    index: 0,
+    isTransitioning: false,
+  };
+  const parentTransitionState = {
+    ...parentBlurState,
+    index: 1,
+    isTransitioning: true,
+  };
+  const parentFocusState = {
+    ...parentTransitionState,
+    isTransitioning: false,
+  };
+  const childActionHandler = jest.fn();
+  const childWillFocusHandler = jest.fn();
+  const childDidFocusHandler = jest.fn();
+  childEventSubscriber('action', childActionHandler);
+  childEventSubscriber('willFocus', childWillFocusHandler);
+  childEventSubscriber('didFocus', childDidFocusHandler);
+  emitGrandParentAction({
+    type: 'action',
+    state: parentTransitionState,
+    lastState: parentBlurState,
+    action: { type: 'FooAction' },
+  });
+  expect(childActionHandler.mock.calls.length).toBe(0);
+  expect(childWillFocusHandler.mock.calls.length).toBe(1);
+  expect(childDidFocusHandler.mock.calls.length).toBe(0);
+  emitGrandParentAction({
+    type: 'action',
+    state: parentFocusState,
+    lastState: parentTransitionState,
+    action: { type: 'FooAction' },
+  });
+  expect(childActionHandler.mock.calls.length).toBe(0);
+  expect(childWillFocusHandler.mock.calls.length).toBe(1);
+  expect(childDidFocusHandler.mock.calls.length).toBe(1);
+});
+
+test('grandchildren transitions', () => {
+  const grandParentSubscriber = jest.fn();
+  const emitGrandParentAction = payload => {
+    grandParentSubscriber.mock.calls.forEach(subs => {
+      if (subs[0] === payload.type) {
+        subs[1](payload);
+      }
+    });
+  };
+  const subscriptionRemove = () => {};
+  grandParentSubscriber.mockReturnValueOnce({ remove: subscriptionRemove });
+  const parentSubscriber = getChildEventSubscriber(
+    grandParentSubscriber,
+    'parent'
+  ).addListener;
+  const childEventSubscriber = getChildEventSubscriber(parentSubscriber, 'key1')
+    .addListener;
+  const makeFakeState = (childIndex, childIsTransitioning) => ({
+    index: 1,
+    isTransitioning: false,
+    routes: [
+      { key: 'nothing' },
+      {
+        key: 'parent',
+        index: childIndex,
+        isTransitioning: childIsTransitioning,
+        routes: [{ key: 'key0' }, { key: 'key1' }, { key: 'key2' }],
+      },
+    ],
+  });
+  const blurredState = makeFakeState(0, false);
+  const transitionState = makeFakeState(1, true);
+  const focusState = makeFakeState(1, false);
+  const transition2State = makeFakeState(2, true);
+  const blurred2State = makeFakeState(2, false);
+
+  const childActionHandler = jest.fn();
+  const childWillFocusHandler = jest.fn();
+  const childDidFocusHandler = jest.fn();
+  const childWillBlurHandler = jest.fn();
+  const childDidBlurHandler = jest.fn();
+  childEventSubscriber('action', childActionHandler);
+  childEventSubscriber('willFocus', childWillFocusHandler);
+  childEventSubscriber('didFocus', childDidFocusHandler);
+  childEventSubscriber('willBlur', childWillBlurHandler);
+  childEventSubscriber('didBlur', childDidBlurHandler);
+  emitGrandParentAction({
+    type: 'action',
+    state: transitionState,
+    lastState: blurredState,
+    action: { type: 'FooAction' },
+  });
+  expect(childActionHandler.mock.calls.length).toBe(0);
+  expect(childWillFocusHandler.mock.calls.length).toBe(1);
+  expect(childDidFocusHandler.mock.calls.length).toBe(0);
+  emitGrandParentAction({
+    type: 'action',
+    state: focusState,
+    lastState: transitionState,
+    action: { type: 'FooAction' },
+  });
+  expect(childActionHandler.mock.calls.length).toBe(0);
+  expect(childWillFocusHandler.mock.calls.length).toBe(1);
+  expect(childDidFocusHandler.mock.calls.length).toBe(1);
+  emitGrandParentAction({
+    type: 'action',
+    state: focusState,
+    lastState: focusState,
+    action: { type: 'TestAction' },
+  });
+  expect(childWillFocusHandler.mock.calls.length).toBe(1);
+  expect(childDidFocusHandler.mock.calls.length).toBe(1);
+  expect(childActionHandler.mock.calls.length).toBe(1);
+  emitGrandParentAction({
+    type: 'action',
+    state: transition2State,
+    lastState: focusState,
+    action: { type: 'CauseWillBlurAction' },
+  });
+  expect(childWillBlurHandler.mock.calls.length).toBe(1);
+  expect(childDidBlurHandler.mock.calls.length).toBe(0);
+  expect(childActionHandler.mock.calls.length).toBe(1);
+  emitGrandParentAction({
+    type: 'action',
+    state: blurred2State,
+    lastState: transition2State,
+    action: { type: 'CauseDidBlurAction' },
+  });
+  expect(childWillBlurHandler.mock.calls.length).toBe(1);
+  expect(childDidBlurHandler.mock.calls.length).toBe(1);
+  expect(childActionHandler.mock.calls.length).toBe(1);
+});
+
+test('grandchildren pass through transitions', () => {
+  const grandParentSubscriber = jest.fn();
+  const emitGrandParentAction = payload => {
+    grandParentSubscriber.mock.calls.forEach(subs => {
+      if (subs[0] === payload.type) {
+        subs[1](payload);
+      }
+    });
+  };
+  const subscriptionRemove = () => {};
+  grandParentSubscriber.mockReturnValueOnce({ remove: subscriptionRemove });
+  const parentSubscriber = getChildEventSubscriber(
+    grandParentSubscriber,
+    'parent'
+  ).addListener;
+  const childEventSubscriber = getChildEventSubscriber(parentSubscriber, 'key1')
+    .addListener;
+  const makeFakeState = (childIndex, childIsTransitioning) => ({
+    index: childIndex,
+    isTransitioning: childIsTransitioning,
+    routes: [
+      { key: 'nothing' },
+      {
+        key: 'parent',
+        index: 1,
+        isTransitioning: false,
+        routes: [{ key: 'key0' }, { key: 'key1' }, { key: 'key2' }],
+      },
+    ].slice(0, childIndex + 1),
+  });
+  const blurredState = makeFakeState(0, false);
+  const transitionState = makeFakeState(1, true);
+  const focusState = makeFakeState(1, false);
+  const transition2State = makeFakeState(0, true);
+  const blurred2State = makeFakeState(0, false);
+
+  const childActionHandler = jest.fn();
+  const childWillFocusHandler = jest.fn();
+  const childDidFocusHandler = jest.fn();
+  const childWillBlurHandler = jest.fn();
+  const childDidBlurHandler = jest.fn();
+  childEventSubscriber('action', childActionHandler);
+  childEventSubscriber('willFocus', childWillFocusHandler);
+  childEventSubscriber('didFocus', childDidFocusHandler);
+  childEventSubscriber('willBlur', childWillBlurHandler);
+  childEventSubscriber('didBlur', childDidBlurHandler);
+  emitGrandParentAction({
+    type: 'action',
+    state: transitionState,
+    lastState: blurredState,
+    action: { type: 'FooAction' },
+  });
+  expect(childActionHandler.mock.calls.length).toBe(0);
+  expect(childWillFocusHandler.mock.calls.length).toBe(1);
+  expect(childDidFocusHandler.mock.calls.length).toBe(0);
+  emitGrandParentAction({
+    type: 'action',
+    state: focusState,
+    lastState: transitionState,
+    action: { type: 'FooAction' },
+  });
+  expect(childActionHandler.mock.calls.length).toBe(0);
+  expect(childWillFocusHandler.mock.calls.length).toBe(1);
+  expect(childDidFocusHandler.mock.calls.length).toBe(1);
+  emitGrandParentAction({
+    type: 'action',
+    state: focusState,
+    lastState: focusState,
+    action: { type: 'TestAction' },
+  });
+  expect(childWillFocusHandler.mock.calls.length).toBe(1);
+  expect(childDidFocusHandler.mock.calls.length).toBe(1);
+  expect(childActionHandler.mock.calls.length).toBe(1);
+  emitGrandParentAction({
+    type: 'action',
+    state: transition2State,
+    lastState: focusState,
+    action: { type: 'CauseWillBlurAction' },
+  });
+  expect(childWillBlurHandler.mock.calls.length).toBe(1);
+  expect(childDidBlurHandler.mock.calls.length).toBe(0);
+  expect(childActionHandler.mock.calls.length).toBe(1);
+  emitGrandParentAction({
+    type: 'action',
+    state: blurred2State,
+    lastState: transition2State,
+    action: { type: 'CauseDidBlurAction' },
+  });
+  expect(childWillBlurHandler.mock.calls.length).toBe(1);
+  expect(childDidBlurHandler.mock.calls.length).toBe(1);
+  expect(childActionHandler.mock.calls.length).toBe(1);
+});
+
+test('child focus with transition', () => {
+  const parentSubscriber = jest.fn();
+  const emitParentAction = payload => {
+    parentSubscriber.mock.calls.forEach(subs => {
+      if (subs[0] === payload.type) {
+        subs[1](payload);
+      }
+    });
+  };
+  const subscriptionRemove = () => {};
+  parentSubscriber.mockReturnValueOnce({ remove: subscriptionRemove });
+  const childEventSubscriber = getChildEventSubscriber(parentSubscriber, 'key1')
+    .addListener;
+  const randomAction = { type: 'FooAction' };
+  const testState = {
+    key: 'foo',
+    routeName: 'FooRoute',
+    routes: [{ key: 'key0' }, { key: 'key1' }],
+    index: 0,
+    isTransitioning: false,
+  };
+  const childWillFocusHandler = jest.fn();
+  const childDidFocusHandler = jest.fn();
+  const childWillBlurHandler = jest.fn();
+  const childDidBlurHandler = jest.fn();
+  childEventSubscriber('willFocus', childWillFocusHandler);
+  childEventSubscriber('didFocus', childDidFocusHandler);
+  childEventSubscriber('willBlur', childWillBlurHandler);
+  childEventSubscriber('didBlur', childDidBlurHandler);
+  emitParentAction({
+    type: 'didFocus',
+    action: randomAction,
+    lastState: testState,
+    state: testState,
+  });
+  emitParentAction({
+    type: 'action',
+    action: randomAction,
+    lastState: testState,
+    state: {
+      ...testState,
+      index: 1,
+      isTransitioning: true,
+    },
+  });
+  expect(childWillFocusHandler.mock.calls.length).toBe(1);
+  emitParentAction({
+    type: 'action',
+    action: randomAction,
+    lastState: {
+      ...testState,
+      index: 1,
+      isTransitioning: true,
+    },
+    state: {
+      ...testState,
+      index: 1,
+      isTransitioning: false,
+    },
+  });
+  expect(childDidFocusHandler.mock.calls.length).toBe(1);
+  emitParentAction({
+    type: 'action',
+    action: randomAction,
+    lastState: {
+      ...testState,
+      index: 1,
+      isTransitioning: false,
+    },
+    state: {
+      ...testState,
+      index: 0,
+      isTransitioning: true,
+    },
+  });
+  expect(childWillBlurHandler.mock.calls.length).toBe(1);
+  emitParentAction({
+    type: 'action',
+    action: randomAction,
+    lastState: {
+      ...testState,
+      index: 0,
+      isTransitioning: true,
+    },
+    state: {
+      ...testState,
+      index: 0,
+      isTransitioning: false,
+    },
+  });
+  expect(childDidBlurHandler.mock.calls.length).toBe(1);
+});
+
+test('child focus with immediate transition', () => {
+  const parentSubscriber = jest.fn();
+  const emitParentAction = payload => {
+    parentSubscriber.mock.calls.forEach(subs => {
+      if (subs[0] === payload.type) {
+        subs[1](payload);
+      }
+    });
+  };
+  const subscriptionRemove = () => {};
+  parentSubscriber.mockReturnValueOnce({ remove: subscriptionRemove });
+  const childEventSubscriber = getChildEventSubscriber(parentSubscriber, 'key1')
+    .addListener;
+  const randomAction = { type: 'FooAction' };
+  const testState = {
+    key: 'foo',
+    routeName: 'FooRoute',
+    routes: [{ key: 'key0' }, { key: 'key1' }],
+    index: 0,
+    isTransitioning: false,
+  };
+  const childWillFocusHandler = jest.fn();
+  const childDidFocusHandler = jest.fn();
+  const childWillBlurHandler = jest.fn();
+  const childDidBlurHandler = jest.fn();
+  childEventSubscriber('willFocus', childWillFocusHandler);
+  childEventSubscriber('didFocus', childDidFocusHandler);
+  childEventSubscriber('willBlur', childWillBlurHandler);
+  childEventSubscriber('didBlur', childDidBlurHandler);
+  emitParentAction({
+    type: 'didFocus',
+    action: randomAction,
+    lastState: testState,
+    state: testState,
+  });
+  emitParentAction({
+    type: 'action',
+    action: randomAction,
+    lastState: testState,
+    state: {
+      ...testState,
+      index: 1,
+    },
+  });
+  expect(childWillFocusHandler.mock.calls.length).toBe(1);
+  expect(childDidFocusHandler.mock.calls.length).toBe(1);
+
+  emitParentAction({
+    type: 'action',
+    action: randomAction,
+    lastState: {
+      ...testState,
+      index: 1,
+    },
+    state: {
+      ...testState,
+      index: 0,
+    },
+  });
+  expect(childWillBlurHandler.mock.calls.length).toBe(1);
+  expect(childDidBlurHandler.mock.calls.length).toBe(1);
+});

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);
+});

src/createNavigationContainer.js

@@ -0,0 +1,391 @@
+import React from 'react';
+import { AsyncStorage, Linking, Platform, BackHandler } from 'react-native';
+import { polyfill } from 'react-lifecycles-compat';
+
+import NavigationActions from './NavigationActions';
+import getNavigation from './getNavigation';
+import invariant from './utils/invariant';
+import docsUrl from './utils/docsUrl';
+import { urlToPathAndParams } from './routers/pathUtils';
+
+function isStateful(props) {
+  return !props.navigation;
+}
+
+function validateProps(props) {
+  if (isStateful(props)) {
+    return;
+  }
+
+  const { navigation, screenProps, ...containerProps } = props;
+
+  const keys = Object.keys(containerProps);
+
+  if (keys.length !== 0) {
+    throw new Error(
+      'This navigator has both navigation and container props, so it is ' +
+        `unclear if it should own its own state. Remove props: "${keys.join(
+          ', '
+        )}" ` +
+        'if the navigator should get its state from the navigation prop. If the ' +
+        'navigator should maintain its own state, do not pass a navigation prop.'
+    );
+  }
+}
+
+// Track the number of stateful container instances. Warn if >0 and not using the
+// detached prop to explicitly acknowledge the behavior. We should deprecated implicit
+// stateful navigation containers in a future release and require a provider style pattern
+// instead in order to eliminate confusion entirely.
+let _statefulContainerCount = 0;
+export function _TESTING_ONLY_reset_container_count() {
+  _statefulContainerCount = 0;
+}
+
+// We keep a global flag to catch errors during the state persistence hydrating scenario.
+// The innermost navigator who catches the error will dispatch a new init action.
+let _reactNavigationIsHydratingState = false;
+// Unfortunate to use global state here, but it seems necessesary for the time
+// being. There seems to be some problems with cascading componentDidCatch
+// handlers. Ideally the inner non-stateful navigator catches the error and
+// re-throws it, to be caught by the top-level stateful navigator.
+
+/**
+ * Create an HOC that injects the navigation and manages the navigation state
+ * in case it's not passed from above.
+ * This allows to use e.g. the StackNavigator and TabNavigator as root-level
+ * components.
+ */
+export default function createNavigationContainer(Component) {
+  class NavigationContainer extends React.Component {
+    subs = null;
+
+    static router = Component.router;
+    static navigationOptions = null;
+
+    static getDerivedStateFromProps(nextProps, prevState) {
+      validateProps(nextProps);
+      return null;
+    }
+
+    _actionEventSubscribers = new Set();
+
+    constructor(props) {
+      super(props);
+
+      validateProps(props);
+
+      this._initialAction = NavigationActions.init();
+
+      if (this._isStateful()) {
+        this.subs = BackHandler.addEventListener('hardwareBackPress', () => {
+          if (!this._isMounted) {
+            this.subs && this.subs.remove();
+          } else {
+            // dispatch returns true if the action results in a state change,
+            // and false otherwise. This maps well to what BackHandler expects
+            // from a callback -- true if handled, false if not handled
+            return this.dispatch(NavigationActions.back());
+          }
+        });
+      }
+
+      this.state = {
+        nav:
+          this._isStateful() && !props.persistenceKey
+            ? Component.router.getStateForAction(this._initialAction)
+            : null,
+      };
+    }
+
+    _renderLoading() {
+      return this.props.renderLoadingExperimental
+        ? this.props.renderLoadingExperimental()
+        : null;
+    }
+
+    _isStateful() {
+      return isStateful(this.props);
+    }
+
+    _validateProps(props) {
+      if (this._isStateful()) {
+        return;
+      }
+
+      const { navigation, screenProps, ...containerProps } = props;
+
+      const keys = Object.keys(containerProps);
+
+      if (keys.length !== 0) {
+        throw new Error(
+          'This navigator has both navigation and container props, so it is ' +
+            `unclear if it should own its own state. Remove props: "${keys.join(
+              ', '
+            )}" ` +
+            'if the navigator should get its state from the navigation prop. If the ' +
+            'navigator should maintain its own state, do not pass a navigation prop.'
+        );
+      }
+    }
+
+    _handleOpenURL = ({ url }) => {
+      const { enableURLHandling, uriPrefix } = this.props;
+      if (enableURLHandling === false) {
+        return;
+      }
+      const parsedUrl = urlToPathAndParams(url, uriPrefix);
+      if (parsedUrl) {
+        const { path, params } = parsedUrl;
+        const action = Component.router.getActionForPathAndParams(path, params);
+        if (action) {
+          this.dispatch(action);
+        }
+      }
+    };
+
+    _onNavigationStateChange(prevNav, nav, action) {
+      if (
+        typeof this.props.onNavigationStateChange === 'undefined' &&
+        this._isStateful() &&
+        !!process.env.REACT_NAV_LOGGING
+      ) {
+        /* eslint-disable no-console */
+        if (console.group) {
+          console.group('Navigation Dispatch: ');
+          console.log('Action: ', action);
+          console.log('New State: ', nav);
+          console.log('Last State: ', prevNav);
+          console.groupEnd();
+        } else {
+          console.log('Navigation Dispatch: ', {
+            action,
+            newState: nav,
+            lastState: prevNav,
+          });
+        }
+        /* eslint-enable no-console */
+        return;
+      }
+
+      if (typeof this.props.onNavigationStateChange === 'function') {
+        this.props.onNavigationStateChange(prevNav, nav, action);
+      }
+    }
+
+    componentDidUpdate() {
+      // Clear cached _navState every tick
+      if (this._navState === this.state.nav) {
+        this._navState = null;
+      }
+    }
+
+    async componentDidMount() {
+      this._isMounted = true;
+      if (!this._isStateful()) {
+        return;
+      }
+
+      if (__DEV__ && !this.props.detached) {
+        if (_statefulContainerCount > 0) {
+          // Temporarily only show this on iOS due to this issue:
+          // https://github.com/react-navigation/react-navigation/issues/4196#issuecomment-390827829
+          if (Platform.OS === 'ios') {
+            console.warn(
+              `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: ${docsUrl(
+                'common-mistakes.html#explicitly-rendering-more-than-one-navigator'
+              )}`
+            );
+          }
+        }
+      }
+      _statefulContainerCount++;
+      Linking.addEventListener('url', this._handleOpenURL);
+
+      // Pull out anything that can impact state
+      const { persistenceKey, uriPrefix, enableURLHandling } = this.props;
+      let parsedUrl = null;
+      let startupStateJSON = null;
+      if (enableURLHandling !== false) {
+        startupStateJSON =
+          persistenceKey && (await AsyncStorage.getItem(persistenceKey));
+        const url = await Linking.getInitialURL();
+        parsedUrl = url && urlToPathAndParams(url, uriPrefix);
+      }
+
+      // Initialize state. This must be done *after* any async code
+      // so we don't end up with a different value for this.state.nav
+      // due to changes while async function was resolving
+      let action = this._initialAction;
+      let startupState = this.state.nav;
+      if (!startupState) {
+        !!process.env.REACT_NAV_LOGGING &&
+          console.log('Init new Navigation State');
+        startupState = Component.router.getStateForAction(action);
+      }
+
+      // Pull persisted state from AsyncStorage
+      if (startupStateJSON) {
+        try {
+          startupState = JSON.parse(startupStateJSON);
+          _reactNavigationIsHydratingState = true;
+        } catch (e) {}
+      }
+
+      // Pull state out of URL
+      if (parsedUrl) {
+        const { path, params } = parsedUrl;
+        const urlAction = Component.router.getActionForPathAndParams(
+          path,
+          params
+        );
+        if (urlAction) {
+          !!process.env.REACT_NAV_LOGGING &&
+            console.log('Applying Navigation Action for Initial URL:', url);
+          action = urlAction;
+          startupState = Component.router.getStateForAction(
+            urlAction,
+            startupState
+          );
+        }
+      }
+
+      const dispatchActions = () =>
+        this._actionEventSubscribers.forEach(subscriber =>
+          subscriber({
+            type: 'action',
+            action,
+            state: this.state.nav,
+            lastState: null,
+          })
+        );
+
+      if (startupState === this.state.nav) {
+        dispatchActions();
+        return;
+      }
+
+      console.tron &&
+        console.tron.display({
+          name: 'Navigation',
+          preview: 'Initial State',
+          value: {
+            initialState: startupState,
+            initialAction: this._initialAction,
+          },
+        });
+
+      this.setState({ nav: startupState }, () => {
+        _reactNavigationIsHydratingState = false;
+        dispatchActions();
+      });
+    }
+
+    componentDidCatch(e, errorInfo) {
+      if (_reactNavigationIsHydratingState) {
+        _reactNavigationIsHydratingState = false;
+        console.warn(
+          'Uncaught exception while starting app from persisted navigation state! Trying to render again with a fresh navigation state..'
+        );
+        this.dispatch(NavigationActions.init());
+      } else {
+        throw e;
+      }
+    }
+
+    _persistNavigationState = async nav => {
+      const { persistenceKey } = this.props;
+      if (!persistenceKey) {
+        return;
+      }
+      await AsyncStorage.setItem(persistenceKey, JSON.stringify(nav));
+    };
+
+    componentWillUnmount() {
+      this._isMounted = false;
+      Linking.removeEventListener('url', this._handleOpenURL);
+      this.subs && this.subs.remove();
+
+      if (this._isStateful()) {
+        _statefulContainerCount--;
+      }
+    }
+
+    // Per-tick temporary storage for state.nav
+
+    dispatch = action => {
+      if (this.props.navigation) {
+        return this.props.navigation.dispatch(action);
+      }
+
+      // navState will have the most up-to-date value, because setState sometimes behaves asyncronously
+      this._navState = this._navState || this.state.nav;
+      const lastNavState = this._navState;
+      invariant(lastNavState, 'should be set in constructor if stateful');
+      const reducedState = Component.router.getStateForAction(
+        action,
+        lastNavState
+      );
+      const navState = reducedState === null ? lastNavState : reducedState;
+
+      const dispatchActionEvents = () => {
+        this._actionEventSubscribers.forEach(subscriber =>
+          subscriber({
+            type: 'action',
+            action,
+            state: navState,
+            lastState: lastNavState,
+          })
+        );
+      };
+
+      if (reducedState === null) {
+        // The router will return null when action has been handled and the state hasn't changed.
+        // dispatch returns true when something has been handled.
+        dispatchActionEvents();
+        return true;
+      }
+
+      if (navState !== lastNavState) {
+        // Cache updates to state.nav during the tick to ensure that subsequent calls will not discard this change
+        this._navState = navState;
+        this.setState({ nav: navState }, () => {
+          this._onNavigationStateChange(lastNavState, navState, action);
+          dispatchActionEvents();
+          this._persistNavigationState(navState);
+        });
+        return true;
+      }
+
+      dispatchActionEvents();
+      return false;
+    };
+
+    _getScreenProps = () => this.props.screenProps;
+
+    render() {
+      let navigation = this.props.navigation;
+      if (this._isStateful()) {
+        const navState = this.state.nav;
+        if (!navState) {
+          return this._renderLoading();
+        }
+        if (!this._navigation || this._navigation.state !== navState) {
+          this._navigation = getNavigation(
+            Component.router,
+            navState,
+            this.dispatch,
+            this._actionEventSubscribers,
+            this._getScreenProps,
+            () => this._navigation
+          );
+        }
+        navigation = this._navigation;
+      }
+      invariant(navigation, 'failed to get navigation');
+      return <Component {...this.props} navigation={navigation} />;
+    }
+  }
+
+  return polyfill(NavigationContainer);
+}

src/getChildEventSubscriber.js

@@ -0,0 +1,161 @@
+/*
+ * This is used to extract one children's worth of events from a stream of navigation action events
+ *
+ * Based on the 'action' events that get fired for this navigation state, this utility will fire
+ * focus and blur events for this child
+ */
+export default function getChildEventSubscriber(addListener, key) {
+  const actionSubscribers = new Set();
+  const willFocusSubscribers = new Set();
+  const didFocusSubscribers = new Set();
+  const willBlurSubscribers = new Set();
+  const didBlurSubscribers = new Set();
+
+  const removeAll = () => {
+    [
+      actionSubscribers,
+      willFocusSubscribers,
+      didFocusSubscribers,
+      willBlurSubscribers,
+      didBlurSubscribers,
+    ].forEach(set => set.clear());
+
+    upstreamSubscribers.forEach(subs => subs && subs.remove());
+  };
+
+  const getChildSubscribers = evtName => {
+    switch (evtName) {
+      case 'action':
+        return actionSubscribers;
+      case 'willFocus':
+        return willFocusSubscribers;
+      case 'didFocus':
+        return didFocusSubscribers;
+      case 'willBlur':
+        return willBlurSubscribers;
+      case 'didBlur':
+        return didBlurSubscribers;
+      default:
+        return null;
+    }
+  };
+
+  const emit = (type, payload) => {
+    const payloadWithType = { ...payload, type };
+    const subscribers = getChildSubscribers(type);
+    subscribers &&
+      subscribers.forEach(subs => {
+        subs(payloadWithType);
+      });
+  };
+
+  // lastEmittedEvent keeps track of focus state for one route. First we assume
+  // we are blurred. If we are focused on initialization, the first 'action'
+  // event will cause onFocus+willFocus events because we had previously been
+  // considered blurred
+  let lastEmittedEvent = 'didBlur';
+
+  const upstreamEvents = [
+    'willFocus',
+    'didFocus',
+    'willBlur',
+    'didBlur',
+    'action',
+  ];
+
+  const upstreamSubscribers = upstreamEvents.map(eventName =>
+    addListener(eventName, payload => {
+      const { state, lastState, action } = payload;
+      const lastRoutes = lastState && lastState.routes;
+      const routes = state && state.routes;
+
+      const lastFocusKey =
+        lastState && lastState.routes && lastState.routes[lastState.index].key;
+      const focusKey = routes && routes[state.index].key;
+
+      const isChildFocused = focusKey === key;
+      const lastRoute =
+        lastRoutes && lastRoutes.find(route => route.key === key);
+      const newRoute = routes && routes.find(route => route.key === key);
+      const childPayload = {
+        context: `${key}:${action.type}_${payload.context || 'Root'}`,
+        state: newRoute,
+        lastState: lastRoute,
+        action,
+        type: eventName,
+      };
+      const isTransitioning = !!state && state.isTransitioning;
+
+      const previouslyLastEmittedEvent = lastEmittedEvent;
+
+      if (lastEmittedEvent === 'didBlur') {
+        // The child is currently blurred. Look for willFocus conditions
+        if (eventName === 'willFocus' && isChildFocused) {
+          emit((lastEmittedEvent = 'willFocus'), childPayload);
+        } else if (eventName === 'action' && isChildFocused) {
+          emit((lastEmittedEvent = 'willFocus'), childPayload);
+        }
+      }
+      if (lastEmittedEvent === 'willFocus') {
+        // We are currently mid-focus. Look for didFocus conditions.
+        // If state.isTransitioning is false, this child event happens immediately after willFocus
+        if (eventName === 'didFocus' && isChildFocused && !isTransitioning) {
+          emit((lastEmittedEvent = 'didFocus'), childPayload);
+        } else if (
+          eventName === 'action' &&
+          isChildFocused &&
+          !isTransitioning
+        ) {
+          emit((lastEmittedEvent = 'didFocus'), childPayload);
+        }
+      }
+
+      if (lastEmittedEvent === 'didFocus') {
+        // The child is currently focused. Look for blurring events
+        if (!isChildFocused) {
+          // The child is no longer focused within this navigation state
+          emit((lastEmittedEvent = 'willBlur'), childPayload);
+        } else if (eventName === 'willBlur') {
+          // The parent is getting a willBlur event
+          emit((lastEmittedEvent = 'willBlur'), childPayload);
+        } else if (
+          eventName === 'action' &&
+          previouslyLastEmittedEvent === 'didFocus'
+        ) {
+          // While focused, pass action events to children for grandchildren focus
+          emit('action', childPayload);
+        }
+      }
+
+      if (lastEmittedEvent === 'willBlur') {
+        // The child is mid-blur. Wait for transition to end
+        if (eventName === 'action' && !isChildFocused && !isTransitioning) {
+          // The child is done blurring because transitioning is over, or isTransitioning
+          // never began and didBlur fires immediately after willBlur
+          emit((lastEmittedEvent = 'didBlur'), childPayload);
+        } else if (eventName === 'didBlur') {
+          // Pass through the parent didBlur event if it happens
+          emit((lastEmittedEvent = 'didBlur'), childPayload);
+        }
+      }
+
+      if (lastEmittedEvent === 'didBlur' && !newRoute) {
+        removeAll();
+      }
+    })
+  );
+
+  return {
+    addListener(eventName, eventHandler) {
+      const subscribers = getChildSubscribers(eventName);
+      if (!subscribers) {
+        throw new Error(`Invalid event name "${eventName}"`);
+      }
+      subscribers.add(eventHandler);
+      const remove = () => {
+        subscribers.delete(eventHandler);
+      };
+      return { remove };
+    },
+  };
+}

src/getChildNavigation.js

@@ -0,0 +1,113 @@
+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 (!childRoute) {
+    return null;
+  }
+
+  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, () => {
+        const nav = getCurrentParentNavigation();
+        return nav && nav.getChildNavigation(childKey);
+      }),
+
+    isFocused: () => {
+      const currentNavigation = getCurrentParentNavigation();
+      if (!currentNavigation) {
+        return false;
+      }
+      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;

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;
+}

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;
+}

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();
+  });
+});

src/navigators/__tests__/StackNavigator-test.js

@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import { StyleSheet, View } from 'react-native';
+import renderer from 'react-test-renderer';
+
+import StackNavigator from '../createContainedStackNavigator';
+import withNavigation from '../../views/withNavigation';
+import { _TESTING_ONLY_reset_container_count } from '../../createNavigationContainer';
+
+const styles = StyleSheet.create({
+  header: {
+    opacity: 0.5,
+  },
+});
+
+class HomeScreen extends Component {
+  static navigationOptions = ({ navigation }) => ({
+    title: `Welcome ${
+      navigation.state.params ? navigation.state.params.user : 'anonymous'
+    }`,
+    gesturesEnabled: true,
+    headerStyle: [{ backgroundColor: 'red' }, styles.header],
+  });
+
+  render() {
+    return null;
+  }
+}
+
+const routeConfig = {
+  Home: {
+    screen: HomeScreen,
+  },
+};
+
+describe('StackNavigator', () => {
+  beforeEach(() => {
+    _TESTING_ONLY_reset_container_count();
+  });
+
+  it('renders successfully', () => {
+    const MyStackNavigator = StackNavigator(routeConfig);
+    const rendered = renderer.create(<MyStackNavigator />).toJSON();
+
+    expect(rendered).toMatchSnapshot();
+  });
+
+  it('applies correct values when headerRight is present', () => {
+    const MyStackNavigator = StackNavigator({
+      Home: {
+        screen: HomeScreen,
+        navigationOptions: {
+          headerRight: <View />,
+        },
+      },
+    });
+    const rendered = renderer.create(<MyStackNavigator />).toJSON();
+
+    expect(rendered).toMatchSnapshot();
+  });
+
+  it('passes navigation to headerRight when wrapped in withNavigation', () => {
+    const spy = jest.fn();
+
+    class TestComponent extends React.Component {
+      render() {
+        return <View>{this.props.onPress(this.props.navigation)}</View>;
+      }
+    }
+
+    const TestComponentWithNavigation = withNavigation(TestComponent);
+
+    class A extends React.Component {
+      static navigationOptions = {
+        headerRight: <TestComponentWithNavigation onPress={spy} />,
+      };
+
+      render() {
+        return <View />;
+      }
+    }
+
+    const Nav = StackNavigator({ A: { screen: A } });
+
+    renderer.create(<Nav />);
+
+    expect(spy).toBeCalledWith(
+      expect.objectContaining({
+        navigate: expect.any(Function),
+        addListener: expect.any(Function),
+      })
+    );
+  });
+});

src/navigators/__tests__/SwitchNavigator-test.js

@@ -1,9 +1,8 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { View } from 'react-native';
 import renderer from 'react-test-renderer';
 
-import { createSwitchNavigator } from '@react-navigation/core';
+import SwitchNavigator from '../createContainedSwitchNavigator';
-import { createAppContainer } from '@react-navigation/native';
 
 const A = () => <View />;
 const B = () => <View />;
@@ -11,9 +10,8 @@ const routeConfig = { A, B };
 
 describe('SwitchNavigator', () => {
   it('renders successfully', () => {
-    const MySwitchNavigator = createSwitchNavigator(routeConfig);
+    const MySwitchNavigator = SwitchNavigator(routeConfig);
-    const App = createAppContainer(MySwitchNavigator);
+    const rendered = renderer.create(<MySwitchNavigator />).toJSON();
-    const rendered = renderer.create(<App />).toJSON();
 
     expect(rendered).toMatchSnapshot();
   });

src/navigators/__tests__/TabNavigator-test.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import renderer from 'react-test-renderer';
+
+const {
+  createTabNavigator,
+} = require('react-navigation-deprecated-tab-navigator');
+
+class HomeScreen extends Component {
+  static navigationOptions = ({ navigation }) => ({
+    title: `Welcome ${
+      navigation.state.params ? navigation.state.params.user : 'anonymous'
+    }`,
+    gesturesEnabled: true,
+  });
+
+  render() {
+    return null;
+  }
+}
+
+const routeConfig = {
+  Home: {
+    screen: HomeScreen,
+  },
+};
+
+describe('TabNavigator', () => {
+  it('renders successfully', () => {
+    const MyTabNavigator = createTabNavigator(routeConfig);
+    const rendered = renderer.create(<MyTabNavigator />).toJSON();
+
+    expect(rendered).toMatchSnapshot();
+  });
+});

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"`;

src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap

@@ -0,0 +1,395 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StackNavigator applies correct values when headerRight is present 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>
+    <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": "red",
+              "borderBottomColor": "#A7A7AA",
+              "borderBottomWidth": 0.5,
+              "height": 64,
+              "opacity": 0.5,
+              "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": 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>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`StackNavigator renders successfully 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>
+    <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": "red",
+              "borderBottomColor": "#A7A7AA",
+              "borderBottomWidth": 0.5,
+              "height": 64,
+              "opacity": 0.5,
+              "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",
+                    }
+                  }
+                >
+                  Welcome anonymous
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;

src/navigators/__tests__/__snapshots__/TabNavigator-test.js.snap

@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TabNavigator renders successfully 1`] = `
+<View
+  collapsable={false}
+  style={
+    Array [
+      Object {
+        "flex": 1,
+        "overflow": "hidden",
+      },
+      Object {
+        "flex": 1,
+      },
+    ]
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <View
+      collapsable={undefined}
+      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={
+        Object {
+          "alignItems": "stretch",
+          "flex": 1,
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+        testID={undefined}
+      >
+        <View
+          collapsable={false}
+          removeClippedSubviews={false}
+          style={
+            Object {
+              "flex": 1,
+              "overflow": "hidden",
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    collapsable={undefined}
+    style={undefined}
+  >
+    <View
+      collapsable={undefined}
+      onLayout={[Function]}
+      pointerEvents="box-none"
+      style={
+        Object {
+          "backgroundColor": "#F7F7F7",
+          "borderTopColor": "rgba(0, 0, 0, .3)",
+          "borderTopWidth": 0.5,
+          "flexDirection": "row",
+          "height": 49,
+          "paddingBottom": 0,
+          "paddingLeft": 0,
+          "paddingRight": 0,
+          "paddingTop": 0,
+        }
+      }
+    >
+      <View
+        accessibilityComponentType={undefined}
+        accessibilityLabel={undefined}
+        accessibilityTraits={undefined}
+        accessible={true}
+        collapsable={undefined}
+        hitSlop={undefined}
+        nativeID={undefined}
+        onLayout={undefined}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "rgba(0, 0, 0, 0)",
+            "flex": 1,
+          }
+        }
+        testID={undefined}
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "flex": 1,
+              },
+              Object {
+                "flexDirection": "column",
+                "justifyContent": "flex-end",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "height": 29,
+                },
+                false,
+                Object {
+                  "flex": 1,
+                },
+              ]
+            }
+          >
+            <View
+              collapsable={undefined}
+              style={
+                Object {
+                  "alignItems": "center",
+                  "alignSelf": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "minWidth": 30,
+                  "opacity": 1,
+                  "position": "absolute",
+                  "width": "100%",
+                }
+              }
+            />
+            <View
+              collapsable={undefined}
+              style={
+                Object {
+                  "alignItems": "center",
+                  "alignSelf": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "minWidth": 30,
+                  "opacity": 0,
+                  "position": "absolute",
+                  "width": "100%",
+                }
+              }
+            />
+          </View>
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            collapsable={undefined}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              Object {
+                "backgroundColor": "transparent",
+                "color": "rgba(52, 120, 246, 1)",
+                "fontSize": 10,
+                "marginBottom": 1.5,
+                "textAlign": "center",
+              }
+            }
+          >
+            Welcome anonymous
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;

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;

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;

src/navigators/createKeyboardAwareNavigator.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { TextInput } from 'react-native';
+
+export default Navigator =>
+  class KeyboardAwareNavigator extends React.Component {
+    static router = Navigator.router;
+    _previouslyFocusedTextInput = null;
+
+    render() {
+      return (
+        <Navigator
+          {...this.props}
+          onGestureBegin={this._handleGestureBegin}
+          onGestureCanceled={this._handleGestureCanceled}
+          onGestureFinish={this._handleGestureFinish}
+          onTransitionStart={this._handleTransitionStart}
+        />
+      );
+    }
+
+    _handleGestureBegin = () => {
+      this._previouslyFocusedTextInput = TextInput.State.currentlyFocusedField();
+      if (this._previouslyFocusedTextInput) {
+        TextInput.State.blurTextInput(this._previouslyFocusedTextInput);
+      }
+      this.props.onGestureBegin && this.props.onGestureBegin();
+    };
+
+    _handleGestureCanceled = () => {
+      if (this._previouslyFocusedTextInput) {
+        TextInput.State.focusTextInput(this._previouslyFocusedTextInput);
+      }
+      this.props.onGestureCanceled && this.props.onGestureCanceled();
+    };
+
+    _handleGestureFinish = () => {
+      this._previouslyFocusedTextInput = null;
+      this.props.onGestureFinish && this.props.onGestureFinish();
+    };
+
+    _handleTransitionStart = (transitionProps, prevTransitionProps) => {
+      // TODO: We should not even have received the transition start event
+      // in the case where the index did not change, I believe. We
+      // should revisit this after 2.0 release.
+      if (transitionProps.index !== prevTransitionProps.index) {
+        const currentField = TextInput.State.currentlyFocusedField();
+        if (currentField) {
+          TextInput.State.blurTextInput(currentField);
+        }
+      }
+
+      this.props.onTransitionStart &&
+        this.props.onTransitionStart(transitionProps, prevTransitionProps);
+    };
+  };

src/navigators/createNavigator.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { polyfill } from 'react-lifecycles-compat';
+
+import getChildEventSubscriber from '../getChildEventSubscriber';
+
+function createNavigator(NavigatorView, router, navigationConfig) {
+  class Navigator extends React.Component {
+    static router = router;
+    static navigationOptions = null;
+
+    state = {
+      descriptors: {},
+      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 };
+
+      routes.forEach(route => {
+        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, screenProps };
+    }
+
+    render() {
+      return (
+        <NavigatorView
+          {...this.props}
+          screenProps={this.state.screenProps}
+          navigation={this.props.navigation}
+          navigationConfig={navigationConfig}
+          descriptors={this.state.descriptors}
+        />
+      );
+    }
+  }
+
+  return polyfill(Navigator);
+}
+
+export default createNavigator;

src/navigators/createStackNavigator.js

@@ -0,0 +1,37 @@
+import createKeyboardAwareNavigator from './createKeyboardAwareNavigator';
+import createNavigator from './createNavigator';
+import StackView from '../views/StackView/StackView';
+import StackRouter from '../routers/StackRouter';
+
+function createStackNavigator(routeConfigMap, stackConfig = {}) {
+  const {
+    initialRouteKey,
+    initialRouteName,
+    initialRouteParams,
+    paths,
+    navigationOptions,
+    disableKeyboardHandling,
+    getCustomActionCreators,
+  } = stackConfig;
+
+  const stackRouterConfig = {
+    initialRouteKey,
+    initialRouteName,
+    initialRouteParams,
+    paths,
+    navigationOptions,
+    getCustomActionCreators,
+  };
+
+  const router = StackRouter(routeConfigMap, stackRouterConfig);
+
+  // Create a navigator with StackView as the view
+  let Navigator = createNavigator(StackView, router, stackConfig);
+  if (!disableKeyboardHandling) {
+    Navigator = createKeyboardAwareNavigator(Navigator);
+  }
+
+  return Navigator;
+}
+
+export default createStackNavigator;

src/navigators/createSwitchNavigator.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import createNavigator from '../navigators/createNavigator';
+import SwitchRouter from '../routers/SwitchRouter';
+import SwitchView from '../views/SwitchView/SwitchView';
+
+function createSwitchNavigator(routeConfigMap, switchConfig = {}) {
+  const router = SwitchRouter(routeConfigMap, switchConfig);
+  const Navigator = createNavigator(SwitchView, router, switchConfig);
+  return Navigator;
+}
+
+export default createSwitchNavigator;

src/react-navigation.js

@@ -1,115 +1,62 @@
 /* eslint global-require: 0 */
 
 module.exports = {
-  // Native
-  get createAppContainer() {
-    return require('@react-navigation/native').createAppContainer;
-  },
-  get createNavigationContainer() {
-    console.warn(
-      '`createNavigationContainer()` has been deprecated, please use `createAppContainer()` instead. You can also import createAppContainer directly from @react-navigation/native'
-    );
-    return require('@react-navigation/native').createAppContainer;
-  },
-  get createKeyboardAwareNavigator() {
-    return require('@react-navigation/native').createKeyboardAwareNavigator;
-  },
-  get createNavigationAwareScrollable() {
-    return require('@react-navigation/native').createNavigationAwareScrollable;
-  },
-  get ScrollView() {
-    return require('@react-navigation/native').ScrollView;
-  },
-  get FlatList() {
-    return require('@react-navigation/native').FlatList;
-  },
-  get SectionList() {
-    return require('@react-navigation/native').SectionList;
-  },
-  get ResourceSavingSceneView() {
-    return require('@react-navigation/native').ResourceSavingSceneView;
-  },
-  get SafeAreaView() {
-    return require('@react-navigation/native').SafeAreaView;
-  },
-  get withOrientation() {
-    return require('@react-navigation/native').withOrientation;
-  },
-
   // Core
-  get createNavigator() {
+  get createNavigationContainer() {
-    return require('@react-navigation/core').createNavigator;
+    return require('./createNavigationContainer').default;
   },
   get StateUtils() {
-    return require('@react-navigation/core').StateUtils;
+    return require('./StateUtils').default;
   },
   get getNavigation() {
-    return require('@react-navigation/core').getNavigation;
+    return require('./getNavigation').default;
-  },
-  get NavigationContext() {
-    return require('@react-navigation/core').NavigationContext;
-  },
-  get NavigationProvider() {
-    return require('@react-navigation/core').NavigationProvider;
-  },
-  get NavigationConsumer() {
-    return require('@react-navigation/core').NavigationConsumer;
-  },
-  get NavigationActions() {
-    return require('@react-navigation/core').NavigationActions;
-  },
-  get StackActions() {
-    return require('@react-navigation/core').StackActions;
-  },
-  get StackRouter() {
-    return require('@react-navigation/core').StackRouter;
-  },
-  get TabRouter() {
-    return require('@react-navigation/core').TabRouter;
-  },
-  get SwitchRouter() {
-    return require('@react-navigation/core').SwitchRouter;
-  },
-  get createConfigGetter() {
-    return require('@react-navigation/core').StackAcreateConfigGetterctions;
-  },
-  get getScreenForRouteName() {
-    return require('@react-navigation/core').getScreenForRouteName;
-  },
-  get validateRouteConfigMap() {
-    return require('@react-navigation/core').validateRouteConfigMap;
-  },
-  get getActiveChildNavigationOptions() {
-    return require('@react-navigation/core').getActiveChildNavigationOptions;
-  },
-  get pathUtils() {
-    return require('@react-navigation/core').pathUtils;
-  },
-  get SceneView() {
-    return require('@react-navigation/core').SceneView;
-  },
-  get SwitchView() {
-    return require('@react-navigation/core').SwitchView;
-  },
-  get NavigationEvents() {
-    return require('@react-navigation/core').NavigationEvents;
-  },
-  get withNavigation() {
-    return require('@react-navigation/core').withNavigation;
-  },
-  get withNavigationFocus() {
-    return require('@react-navigation/core').withNavigationFocus;
   },
 
   // Navigators
-
+  get createNavigator() {
+    return require('./navigators/createNavigator').default;
+  },
   get createStackNavigator() {
-    return require('react-navigation-stack').createStackNavigator;
+    return require('./navigators/createContainedStackNavigator').default;
+  },
+  get StackNavigator() {
+    console.warn(
+      'The StackNavigator function name is deprecated, please use createStackNavigator instead'
+    );
+    return require('./navigators/createContainedStackNavigator').default;
   },
   get createSwitchNavigator() {
-    return require('@react-navigation/core').createSwitchNavigator;
+    return require('./navigators/createContainedSwitchNavigator').default;
+  },
+  get SwitchNavigator() {
+    console.warn(
+      'The SwitchNavigator function name is deprecated, please use createSwitchNavigator instead'
+    );
+    return require('./navigators/createContainedSwitchNavigator').default;
+  },
+  get createDrawerNavigator() {
+    return require('react-navigation-drawer').createDrawerNavigator;
+  },
+  get DrawerNavigator() {
+    console.warn(
+      'The DrawerNavigator function name is deprecated, please use createDrawerNavigator instead'
+    );
+    return require('react-navigation-drawer').createDrawerNavigator;
+  },
+  get createTabNavigator() {
+    console.warn(
+      'createTabNavigator is deprecated. Please use the createBottomTabNavigator or createMaterialTopTabNavigator instead.'
+    );
+    return require('react-navigation-deprecated-tab-navigator')
+      .createTabNavigator;
+  },
+  get TabNavigator() {
+    console.warn(
+      'TabNavigator is deprecated. Please use the createBottomTabNavigator or createMaterialTopTabNavigator instead.'
+    );
+    return require('react-navigation-deprecated-tab-navigator')
+      .createTabNavigator;
   },
-
   get createBottomTabNavigator() {
     return require('react-navigation-tabs').createBottomTabNavigator;
   },
@@ -117,48 +64,60 @@ module.exports = {
     return require('react-navigation-tabs').createMaterialTopTabNavigator;
   },
 
-  get createDrawerNavigator() {
+  // Actions
-    return require('react-navigation-drawer').createDrawerNavigator;
+  get NavigationActions() {
+    return require('./NavigationActions').default;
   },
-
+  get StackActions() {
-  // Routers and Actions
+    return require('./routers/StackActions').default;
-
-  get DrawerRouter() {
-    return require('react-navigation-drawer').DrawerRouter;
   },
   get DrawerActions() {
     return require('react-navigation-drawer').DrawerActions;
   },
 
+  // Routers
+  get StackRouter() {
+    return require('./routers/StackRouter').default;
+  },
+  get TabRouter() {
+    return require('./routers/TabRouter').default;
+  },
+  get DrawerRouter() {
+    return require('react-navigation-drawer').DrawerRouter;
+  },
+  get SwitchRouter() {
+    return require('./routers/SwitchRouter').default;
+  },
+
   // Views
   get Transitioner() {
-    console.warn(
+    return require('./views/Transitioner').default;
-      'Importing the stack Transitioner directly from react-navigation is now deprecated. Instead, import { Transitioner } from "react-navigation-stack";'
-    );
-    return require('react-navigation-stack').Transitioner;
   },
   get StackView() {
-    return require('react-navigation-stack').StackView;
+    return require('./views/StackView/StackView').default;
   },
   get StackViewCard() {
-    return require('react-navigation-stack').StackViewCard;
+    return require('./views/StackView/StackViewCard').default;
   },
-  get StackViewTransitionConfigs() {
+  get SafeAreaView() {
-    return require('react-navigation-stack').StackViewTransitionConfigs;
+    return require('react-native-safe-area-view').default;
+  },
+  get SceneView() {
+    return require('./views/SceneView').default;
+  },
+  get ResourceSavingSceneView() {
+    return require('./views/ResourceSavingSceneView').default;
   },
 
   // Header
   get Header() {
-    return require('react-navigation-stack').Header;
+    return require('./views/Header/Header').default;
   },
   get HeaderTitle() {
-    return require('react-navigation-stack').HeaderTitle;
+    return require('./views/Header/HeaderTitle').default;
   },
   get HeaderBackButton() {
-    return require('react-navigation-stack').HeaderBackButton;
+    return require('./views/Header/HeaderBackButton').default;
-  },
-  get HeaderStyleInterpolator() {
-    return require('react-navigation-stack').HeaderStyleInterpolator;
   },
 
   // DrawerView
@@ -172,11 +131,44 @@ module.exports = {
     return require('react-navigation-drawer').DrawerSidebar;
   },
 
-  // Tabs
+  // TabView
-  get BottomTabBar() {
+  get TabView() {
-    return require('react-navigation-tabs').BottomTabBar;
+    console.warn(
+      'TabView is deprecated. Please use the react-navigation-tabs package instead: https://github.com/react-navigation/react-navigation-tabs'
+    );
+    return require('react-navigation-deprecated-tab-navigator').TabView;
   },
-  get MaterialTopTabBar() {
+  get TabBarTop() {
-    return require('react-navigation-tabs').MaterialTopTabBar;
+    console.warn(
+      'TabBarTop is deprecated. Please use the react-navigation-tabs package instead: https://github.com/react-navigation/react-navigation-tabs'
+    );
+    return require('react-navigation-deprecated-tab-navigator').TabBarTop;
+  },
+  get TabBarBottom() {
+    console.warn(
+      'TabBarBottom is deprecated. Please use the react-navigation-tabs package instead: https://github.com/react-navigation/react-navigation-tabs'
+    );
+    return require('react-navigation-deprecated-tab-navigator').TabBarBottom;
+  },
+
+  // SwitchView
+  get SwitchView() {
+    return require('./views/SwitchView/SwitchView').default;
+  },
+
+  // NavigationEvents
+  get NavigationEvents() {
+    return require('./views/NavigationEvents').default;
+  },
+
+  // HOCs
+  get withNavigation() {
+    return require('./views/withNavigation').default;
+  },
+  get withNavigationFocus() {
+    return require('./views/withNavigationFocus').default;
+  },
+  get withOrientation() {
+    return require('./views/withOrientation').default;
   },
 };

src/react-navigation.web.js

@@ -0,0 +1,57 @@
+/* eslint global-require: 0 */
+
+module.exports = {
+  // Core
+  get createNavigationContainer() {
+    return require('./createNavigationContainer').default;
+  },
+  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() {
+    return require('./NavigationActions').default;
+  },
+  get StackActions() {
+    return require('./routers/StackActions').default;
+  },
+  get DrawerActions() {
+    return require('./routers/DrawerActions').default;
+  },
+
+  // Routers
+  get StackRouter() {
+    return require('./routers/StackRouter').default;
+  },
+  get TabRouter() {
+    return require('./routers/TabRouter').default;
+  },
+  get SwitchRouter() {
+    return require('./routers/SwitchRouter').default;
+  },
+
+  // NavigationEvents
+  get NavigationEvents() {
+    return require('./views/NavigationEvents').default;
+  },
+
+  // HOCs
+  get withNavigation() {
+    return require('./views/withNavigation').default;
+  },
+  get withNavigationFocus() {
+    return require('./views/withNavigationFocus').default;
+  },
+};

src/routers/KeyGenerator.js

@@ -0,0 +1,11 @@
+let uniqueBaseId = `id-${Date.now()}`;
+let uuidCount = 0;
+
+export function _TESTING_ONLY_normalize_keys() {
+  uniqueBaseId = 'id';
+  uuidCount = 0;
+}
+
+export function generateKey() {
+  return `${uniqueBaseId}-${uuidCount++}`;
+}

src/routers/StackActions.js

@@ -0,0 +1,52 @@
+const POP = 'Navigation/POP';
+const POP_TO_TOP = 'Navigation/POP_TO_TOP';
+const PUSH = 'Navigation/PUSH';
+const RESET = 'Navigation/RESET';
+const REPLACE = 'Navigation/REPLACE';
+const COMPLETE_TRANSITION = 'Navigation/COMPLETE_TRANSITION';
+
+const pop = payload => ({
+  type: POP,
+  ...payload,
+});
+
+const popToTop = payload => ({
+  type: POP_TO_TOP,
+  ...payload,
+});
+
+const push = payload => ({
+  type: PUSH,
+  ...payload,
+});
+
+const reset = payload => ({
+  type: RESET,
+  ...payload,
+});
+
+const replace = payload => ({
+  type: REPLACE,
+  ...payload,
+});
+
+const completeTransition = payload => ({
+  type: COMPLETE_TRANSITION,
+  ...payload,
+});
+
+export default {
+  POP,
+  POP_TO_TOP,
+  PUSH,
+  RESET,
+  REPLACE,
+  COMPLETE_TRANSITION,
+
+  pop,
+  popToTop,
+  push,
+  reset,
+  replace,
+  completeTransition,
+};

src/routers/StackRouter.js

@@ -0,0 +1,576 @@
+import NavigationActions from '../NavigationActions';
+import StackActions from './StackActions';
+import createConfigGetter from './createConfigGetter';
+import getScreenForRouteName from './getScreenForRouteName';
+import StateUtils from '../StateUtils';
+import validateRouteConfigMap from './validateRouteConfigMap';
+import invariant from '../utils/invariant';
+import { generateKey } from './KeyGenerator';
+import { createPathParser } from './pathUtils';
+
+function behavesLikePushAction(action) {
+  return (
+    action.type === NavigationActions.NAVIGATE ||
+    action.type === StackActions.PUSH
+  );
+}
+
+const defaultActionCreators = (route, navStateKey) => ({});
+
+function isResetToRootStack(action) {
+  return action.type === StackActions.RESET && action.key === null;
+}
+
+export default (routeConfigs, stackConfig = {}) => {
+  // Fail fast on invalid route definitions
+  validateRouteConfigMap(routeConfigs);
+
+  const childRouters = {};
+  const routeNames = Object.keys(routeConfigs);
+
+  // Loop through routes and find child routers
+  routeNames.forEach(routeName => {
+    const screen = getScreenForRouteName(routeConfigs, routeName);
+    if (screen && screen.router) {
+      // If it has a router it's a navigator.
+      childRouters[routeName] = screen.router;
+    } else {
+      // If it doesn't have router it's an ordinary React component.
+      childRouters[routeName] = null;
+    }
+  });
+
+  const { initialRouteParams } = stackConfig;
+  const getCustomActionCreators =
+    stackConfig.getCustomActionCreators || defaultActionCreators;
+
+  const initialRouteName = stackConfig.initialRouteName || routeNames[0];
+
+  const initialChildRouter = childRouters[initialRouteName];
+
+  function getInitialState(action) {
+    let route = {};
+    const childRouter = childRouters[action.routeName];
+
+    // This is a push-like action, and childRouter will be a router or null if we are responsible for this routeName
+    if (behavesLikePushAction(action) && childRouter !== undefined) {
+      let childState = {};
+      // The router is null for normal leaf routes
+      if (childRouter !== null) {
+        const childAction =
+          action.action || NavigationActions.init({ params: action.params });
+        childState = childRouter.getStateForAction(childAction);
+      }
+      return {
+        key: 'StackRouterRoot',
+        isTransitioning: false,
+        index: 0,
+        routes: [
+          {
+            params: action.params,
+            ...childState,
+            key: action.key || generateKey(),
+            routeName: action.routeName,
+          },
+        ],
+      };
+    }
+
+    if (initialChildRouter) {
+      route = initialChildRouter.getStateForAction(
+        NavigationActions.navigate({
+          routeName: initialRouteName,
+          params: initialRouteParams,
+        })
+      );
+    }
+    const params = (route.params || action.params || initialRouteParams) && {
+      ...(route.params || {}),
+      ...(action.params || {}),
+      ...(initialRouteParams || {}),
+    };
+    const { initialRouteKey } = stackConfig;
+    route = {
+      ...route,
+      ...(params ? { params } : {}),
+      routeName: initialRouteName,
+      key: action.key || (initialRouteKey || generateKey()),
+    };
+    return {
+      key: 'StackRouterRoot',
+      isTransitioning: false,
+      index: 0,
+      routes: [route],
+    };
+  }
+
+  const {
+    getPathAndParamsForRoute,
+    getActionForPathAndParams,
+  } = createPathParser(
+    childRouters,
+    routeConfigs,
+    stackConfig.paths,
+    initialRouteName,
+    initialRouteParams
+  );
+
+  return {
+    childRouters,
+
+    getComponentForState(state) {
+      const activeChildRoute = state.routes[state.index];
+      const { routeName } = activeChildRoute;
+      if (childRouters[routeName]) {
+        return childRouters[routeName].getComponentForState(activeChildRoute);
+      }
+      return getScreenForRouteName(routeConfigs, routeName);
+    },
+
+    getComponentForRouteName(routeName) {
+      return getScreenForRouteName(routeConfigs, routeName);
+    },
+
+    getActionCreators(route, navStateKey) {
+      return {
+        ...getCustomActionCreators(route, navStateKey),
+        pop: (n, params) =>
+          StackActions.pop({
+            n,
+            ...params,
+          }),
+        popToTop: params => StackActions.popToTop(params),
+        push: (routeName, params, action) =>
+          StackActions.push({
+            routeName,
+            params,
+            action,
+          }),
+        replace: (replaceWith, params, action, newKey) => {
+          if (typeof replaceWith === 'string') {
+            return StackActions.replace({
+              routeName: replaceWith,
+              params,
+              action,
+              key: route.key,
+              newKey,
+            });
+          }
+          invariant(
+            typeof replaceWith === 'object',
+            'Must replaceWith an object or a string'
+          );
+          invariant(
+            params == null,
+            'Params must not be provided to .replace() when specifying an object'
+          );
+          invariant(
+            action == null,
+            'Child action must not be provided to .replace() when specifying an object'
+          );
+          invariant(
+            newKey == null,
+            'Child action must not be provided to .replace() when specifying an object'
+          );
+          return StackActions.replace(replaceWith);
+        },
+        reset: (actions, index) =>
+          StackActions.reset({
+            actions,
+            index: index == null ? actions.length - 1 : index,
+            key: navStateKey,
+          }),
+        dismiss: () =>
+          NavigationActions.back({
+            key: navStateKey,
+          }),
+      };
+    },
+
+    getStateForAction(action, state) {
+      // Set up the initial state if needed
+      if (!state) {
+        return getInitialState(action);
+      }
+
+      const activeChildRoute = state.routes[state.index];
+
+      if (
+        !isResetToRootStack(action) &&
+        action.type !== NavigationActions.NAVIGATE
+      ) {
+        // Let the active child router handle the action
+        const activeChildRouter = childRouters[activeChildRoute.routeName];
+        if (activeChildRouter) {
+          const route = activeChildRouter.getStateForAction(
+            action,
+            activeChildRoute
+          );
+          if (route !== null && route !== activeChildRoute) {
+            return StateUtils.replaceAt(
+              state,
+              activeChildRoute.key,
+              route,
+              // the following tells replaceAt to NOT change the index to this route for the setParam action, because people don't expect param-setting actions to switch the active route
+              action.type === NavigationActions.SET_PARAMS
+            );
+          }
+        }
+      } else if (action.type === NavigationActions.NAVIGATE) {
+        // Traverse routes from the top of the stack to the bottom, so the
+        // active route has the first opportunity, then the one before it, etc.
+        for (let childRoute of state.routes.slice().reverse()) {
+          let childRouter = childRouters[childRoute.routeName];
+          let childAction =
+            action.routeName === childRoute.routeName && action.action
+              ? action.action
+              : action;
+
+          if (childRouter) {
+            const nextRouteState = childRouter.getStateForAction(
+              childAction,
+              childRoute
+            );
+
+            if (nextRouteState === null || nextRouteState !== childRoute) {
+              const newState = StateUtils.replaceAndPrune(
+                state,
+                nextRouteState ? nextRouteState.key : childRoute.key,
+                nextRouteState ? nextRouteState : childRoute
+              );
+              return {
+                ...newState,
+                isTransitioning:
+                  state.index !== newState.index
+                    ? action.immediate !== true
+                    : state.isTransitioning,
+              };
+            }
+          }
+        }
+      }
+
+      // Handle explicit push navigation action. This must happen after the
+      // focused child router has had a chance to handle the action.
+      if (
+        behavesLikePushAction(action) &&
+        childRouters[action.routeName] !== undefined
+      ) {
+        const childRouter = childRouters[action.routeName];
+        let route;
+
+        invariant(
+          action.type !== StackActions.PUSH || action.key == null,
+          'StackRouter does not support key on the push action'
+        );
+
+        // Before pushing a new route we first try to find one in the existing route stack
+        // More information on this: https://github.com/react-navigation/rfcs/blob/master/text/0004-less-pushy-navigate.md
+        const lastRouteIndex = state.routes.findIndex(r => {
+          if (action.key) {
+            return r.key === action.key;
+          } else {
+            return r.routeName === action.routeName;
+          }
+        });
+
+        if (action.type !== StackActions.PUSH && lastRouteIndex !== -1) {
+          // If index is unchanged and params are not being set, leave state identity intact
+          if (state.index === lastRouteIndex && !action.params) {
+            return null;
+          }
+
+          // Remove the now unused routes at the tail of the routes array
+          const routes = state.routes.slice(0, lastRouteIndex + 1);
+
+          // Apply params if provided, otherwise leave route identity intact
+          if (action.params) {
+            const route = state.routes[lastRouteIndex];
+            routes[lastRouteIndex] = {
+              ...route,
+              params: {
+                ...route.params,
+                ...action.params,
+              },
+            };
+          }
+          // Return state with new index. Change isTransitioning only if index has changed
+          return {
+            ...state,
+            isTransitioning:
+              state.index !== lastRouteIndex
+                ? action.immediate !== true
+                : state.isTransitioning,
+            index: lastRouteIndex,
+            routes,
+          };
+        }
+
+        if (childRouter) {
+          const childAction =
+            action.action || NavigationActions.init({ params: action.params });
+          route = {
+            params: action.params,
+            // merge the child state in this order to allow params override
+            ...childRouter.getStateForAction(childAction),
+            routeName: action.routeName,
+            key: action.key || generateKey(),
+          };
+        } else {
+          route = {
+            params: action.params,
+            routeName: action.routeName,
+            key: action.key || generateKey(),
+          };
+        }
+        return {
+          ...StateUtils.push(state, route),
+          isTransitioning: action.immediate !== true,
+        };
+      } else if (
+        action.type === StackActions.PUSH &&
+        childRouters[action.routeName] === undefined
+      ) {
+        // Return the state identity to bubble the action up
+        return state;
+      }
+
+      // Handle navigation to other child routers that are not yet pushed
+      if (behavesLikePushAction(action)) {
+        const childRouterNames = Object.keys(childRouters);
+        for (let i = 0; i < childRouterNames.length; i++) {
+          const childRouterName = childRouterNames[i];
+          const childRouter = childRouters[childRouterName];
+          if (childRouter) {
+            // For each child router, start with a blank state
+            const initChildRoute = childRouter.getStateForAction(
+              NavigationActions.init()
+            );
+            // Then check to see if the router handles our navigate action
+            const navigatedChildRoute = childRouter.getStateForAction(
+              action,
+              initChildRoute
+            );
+            let routeToPush = null;
+            if (navigatedChildRoute === null) {
+              // Push the route if the router has 'handled' the action and returned null
+              routeToPush = initChildRoute;
+            } else if (navigatedChildRoute !== initChildRoute) {
+              // Push the route if the state has changed in response to this navigation
+              routeToPush = navigatedChildRoute;
+            }
+            if (routeToPush) {
+              const route = {
+                ...routeToPush,
+                routeName: childRouterName,
+                key: action.key || generateKey(),
+              };
+              return {
+                ...StateUtils.push(state, route),
+                isTransitioning: action.immediate !== true,
+              };
+            }
+          }
+        }
+      }
+
+      // Handle pop-to-top behavior. Make sure this happens after children have had a chance to handle the action, so that the inner stack pops to top first.
+      if (action.type === StackActions.POP_TO_TOP) {
+        // Refuse to handle pop to top if a key is given that doesn't correspond
+        // to this router
+        if (action.key && state.key !== action.key) {
+          return state;
+        }
+
+        // If we're already at the top, then we return the state with a new
+        // identity so that the action is handled by this router.
+        if (state.index > 0) {
+          return {
+            ...state,
+            isTransitioning: action.immediate !== true,
+            index: 0,
+            routes: [state.routes[0]],
+          };
+        }
+        return state;
+      }
+
+      // Handle replace action
+      if (action.type === StackActions.REPLACE) {
+        let routeIndex;
+
+        // If the key param is undefined, set the index to the last route in the stack
+        if (action.key === undefined && state.routes.length) {
+          routeIndex = state.routes.length - 1;
+        } else {
+          routeIndex = state.routes.findIndex(r => r.key === action.key);
+        }
+
+        // Only replace if the key matches one of our routes
+        if (routeIndex !== -1) {
+          const childRouter = childRouters[action.routeName];
+          let childState = {};
+          if (childRouter) {
+            const childAction =
+              action.action ||
+              NavigationActions.init({ params: action.params });
+            childState = childRouter.getStateForAction(childAction);
+          }
+          const routes = [...state.routes];
+          routes[routeIndex] = {
+            params: action.params,
+            // merge the child state in this order to allow params override
+            ...childState,
+            routeName: action.routeName,
+            key: action.newKey || generateKey(),
+          };
+          return { ...state, routes };
+        }
+      }
+
+      // Update transitioning state
+      if (
+        action.type === StackActions.COMPLETE_TRANSITION &&
+        (action.key == null || action.key === state.key) &&
+        state.isTransitioning
+      ) {
+        return {
+          ...state,
+          isTransitioning: false,
+        };
+      }
+
+      if (action.type === NavigationActions.SET_PARAMS) {
+        const key = action.key;
+        const lastRoute = state.routes.find(route => route.key === key);
+        if (lastRoute) {
+          const params = {
+            ...lastRoute.params,
+            ...action.params,
+          };
+          const routes = [...state.routes];
+          routes[state.routes.indexOf(lastRoute)] = {
+            ...lastRoute,
+            params,
+          };
+          return {
+            ...state,
+            routes,
+          };
+        }
+      }
+
+      if (action.type === StackActions.RESET) {
+        // Only handle reset actions that are unspecified or match this state key
+        if (action.key != null && action.key != state.key) {
+          // Deliberately use != instead of !== so we can match null with
+          // undefined on either the state or the action
+          return state;
+        }
+        const newStackActions = action.actions;
+
+        return {
+          ...state,
+          routes: newStackActions.map(newStackAction => {
+            const router = childRouters[newStackAction.routeName];
+
+            let childState = {};
+
+            if (router) {
+              const childAction =
+                newStackAction.action ||
+                NavigationActions.init({ params: newStackAction.params });
+
+              childState = router.getStateForAction(childAction);
+            }
+
+            return {
+              params: newStackAction.params,
+              ...childState,
+              routeName: newStackAction.routeName,
+              key: newStackAction.key || generateKey(),
+            };
+          }),
+          index: action.index,
+        };
+      }
+
+      if (
+        action.type === NavigationActions.BACK ||
+        action.type === StackActions.POP
+      ) {
+        const { key, n, immediate } = action;
+        let backRouteIndex = state.index;
+        if (action.type === StackActions.POP && n != null) {
+          // determine the index to go back *from*. In this case, n=1 means to go
+          // back from state.index, as if it were a normal "BACK" action
+          backRouteIndex = Math.max(1, state.index - n + 1);
+        } else if (key) {
+          const backRoute = state.routes.find(route => route.key === key);
+          backRouteIndex = state.routes.indexOf(backRoute);
+        }
+
+        if (backRouteIndex > 0) {
+          return {
+            ...state,
+            routes: state.routes.slice(0, backRouteIndex),
+            index: backRouteIndex - 1,
+            isTransitioning: immediate !== true,
+          };
+        }
+      }
+
+      // By this point in the router's state handling logic, we have handled the behavior of the active route, and handled any stack actions.
+      // If we haven't returned by now, we should allow non-active child routers to handle this action, and switch to that index if the child state (route) does change..
+
+      const keyIndex = action.key ? StateUtils.indexOf(state, action.key) : -1;
+
+      // Traverse routes from the top of the stack to the bottom, so the
+      // active route has the first opportunity, then the one before it, etc.
+      for (let childRoute of state.routes.slice().reverse()) {
+        if (childRoute.key === activeChildRoute.key) {
+          // skip over the active child because we let it attempt to handle the action earlier
+          continue;
+        }
+        // If a key is provided and in routes state then let's use that
+        // knowledge to skip extra getStateForAction calls on other child
+        // routers
+        if (keyIndex >= 0 && childRoute.key !== action.key) {
+          continue;
+        }
+        let childRouter = childRouters[childRoute.routeName];
+        if (childRouter) {
+          const route = childRouter.getStateForAction(action, childRoute);
+
+          if (route === null) {
+            return state;
+          } else if (route && route !== childRoute) {
+            return StateUtils.replaceAt(
+              state,
+              childRoute.key,
+              route,
+              // the following tells replaceAt to NOT change the index to this route for the setParam action, because people don't expect param-setting actions to switch the active route
+              action.type === NavigationActions.SET_PARAMS
+            );
+          }
+        }
+      }
+
+      return state;
+    },
+
+    getPathAndParamsForState(state) {
+      const route = state.routes[state.index];
+      return getPathAndParamsForRoute(route);
+    },
+
+    getActionForPathAndParams(path, params) {
+      return getActionForPathAndParams(path, params);
+    },
+
+    getScreenOptions: createConfigGetter(
+      routeConfigs,
+      stackConfig.navigationOptions
+    ),
+  };
+};

src/routers/SwitchRouter.js

@@ -0,0 +1,333 @@
+import invariant from '../utils/invariant';
+import getScreenForRouteName from './getScreenForRouteName';
+import createConfigGetter from './createConfigGetter';
+
+import NavigationActions from '../NavigationActions';
+import StackActions from './StackActions';
+import validateRouteConfigMap from './validateRouteConfigMap';
+import { createPathParser } from './pathUtils';
+
+const defaultActionCreators = (route, navStateKey) => ({});
+
+function childrenUpdateWithoutSwitchingIndex(actionType) {
+  return [
+    NavigationActions.SET_PARAMS,
+    // Todo: make SwitchRouter not depend on StackActions..
+    StackActions.COMPLETE_TRANSITION,
+  ].includes(actionType);
+}
+
+export default (routeConfigs, config = {}) => {
+  // Fail fast on invalid route definitions
+  validateRouteConfigMap(routeConfigs);
+
+  const order = config.order || Object.keys(routeConfigs);
+
+  const getCustomActionCreators =
+    config.getCustomActionCreators || defaultActionCreators;
+
+  const initialRouteParams = config.initialRouteParams;
+  const initialRouteName = config.initialRouteName || order[0];
+  const backBehavior = config.backBehavior || 'none';
+  const shouldBackNavigateToInitialRoute = backBehavior === 'initialRoute';
+  const resetOnBlur = config.hasOwnProperty('resetOnBlur')
+    ? config.resetOnBlur
+    : true;
+  const initialRouteIndex = order.indexOf(initialRouteName);
+  const childRouters = {};
+  order.forEach(routeName => {
+    const routeConfig = routeConfigs[routeName];
+    childRouters[routeName] = null;
+    const screen = getScreenForRouteName(routeConfigs, routeName);
+    if (screen.router) {
+      childRouters[routeName] = screen.router;
+    }
+  });
+
+  const {
+    getPathAndParamsForRoute,
+    getActionForPathAndParams,
+  } = createPathParser(
+    childRouters,
+    routeConfigs,
+    config.paths,
+    initialRouteName,
+    initialRouteParams
+  );
+
+  if (initialRouteIndex === -1) {
+    throw new Error(
+      `Invalid initialRouteName '${initialRouteName}'.` +
+        `Should be one of ${order.map(n => `"${n}"`).join(', ')}`
+    );
+  }
+
+  function resetChildRoute(routeName) {
+    const params =
+      routeName === initialRouteName ? initialRouteParams : undefined;
+    const childRouter = childRouters[routeName];
+    if (childRouter) {
+      const childAction = NavigationActions.init();
+      return {
+        ...childRouter.getStateForAction(childAction),
+        key: routeName,
+        routeName,
+        params,
+      };
+    }
+    return {
+      key: routeName,
+      routeName,
+      params,
+    };
+  }
+
+  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 {
+        ...possibleNextState,
+        routes: nextRoutes,
+      };
+    } else {
+      nextState = possibleNextState;
+    }
+
+    return nextState;
+  }
+
+  function getInitialState() {
+    const routes = order.map(resetChildRoute);
+    return {
+      routes,
+      index: initialRouteIndex,
+      isTransitioning: false,
+    };
+  }
+
+  return {
+    childRouters,
+
+    getActionCreators(route, stateKey) {
+      return getCustomActionCreators(route, stateKey);
+    },
+
+    getStateForAction(action, inputState) {
+      let prevState = inputState ? { ...inputState } : inputState;
+      let state = inputState || getInitialState();
+      let activeChildIndex = state.index;
+
+      if (action.type === NavigationActions.INIT) {
+        // NOTE(brentvatne): this seems weird... why are we merging these
+        // params into child routes?
+        // ---------------------------------------------------------------
+        // Merge any params from the action into all the child routes
+        const { params } = action;
+        if (params) {
+          state.routes = state.routes.map(route => ({
+            ...route,
+            params: {
+              ...route.params,
+              ...params,
+              ...(route.routeName === initialRouteName
+                ? initialRouteParams
+                : null),
+            },
+          }));
+        }
+      }
+
+      // Let the current child handle it
+      const activeChildLastState = state.routes[state.index];
+      const activeChildRouter = childRouters[order[state.index]];
+      if (activeChildRouter) {
+        const activeChildState = activeChildRouter.getStateForAction(
+          action,
+          activeChildLastState
+        );
+        if (!activeChildState && inputState) {
+          return null;
+        }
+        if (activeChildState && activeChildState !== activeChildLastState) {
+          const routes = [...state.routes];
+          routes[state.index] = activeChildState;
+          return getNextState(prevState, {
+            ...state,
+            routes,
+          });
+        }
+      }
+
+      // Handle tab changing. Do this after letting the current tab try to
+      // handle the action, to allow inner children to change first
+      const isBackEligible =
+        action.key == null || action.key === activeChildLastState.key;
+      if (action.type === NavigationActions.BACK) {
+        if (isBackEligible && shouldBackNavigateToInitialRoute) {
+          activeChildIndex = initialRouteIndex;
+        } else {
+          return state;
+        }
+      }
+
+      let didNavigate = false;
+      if (action.type === NavigationActions.NAVIGATE) {
+        didNavigate = !!order.find((childId, i) => {
+          if (childId === action.routeName) {
+            activeChildIndex = i;
+            return true;
+          }
+          return false;
+        });
+        if (didNavigate) {
+          const childState = state.routes[activeChildIndex];
+          const childRouter = childRouters[action.routeName];
+          let newChildState;
+
+          if (action.action) {
+            newChildState = childRouter
+              ? childRouter.getStateForAction(action.action, childState)
+              : null;
+          } else if (!action.action && action.params) {
+            newChildState = {
+              ...childState,
+              params: {
+                ...(childState.params || {}),
+                ...action.params,
+              },
+            };
+          }
+
+          if (newChildState && newChildState !== childState) {
+            const routes = [...state.routes];
+            routes[activeChildIndex] = newChildState;
+            return getNextState(prevState, {
+              ...state,
+              routes,
+              index: activeChildIndex,
+            });
+          } else if (
+            !newChildState &&
+            state.index === activeChildIndex &&
+            prevState
+          ) {
+            return null;
+          }
+        }
+      }
+
+      if (action.type === NavigationActions.SET_PARAMS) {
+        const key = action.key;
+        const lastRoute = state.routes.find(route => route.key === key);
+        if (lastRoute) {
+          const params = {
+            ...lastRoute.params,
+            ...action.params,
+          };
+          const routes = [...state.routes];
+          routes[state.routes.indexOf(lastRoute)] = {
+            ...lastRoute,
+            params,
+          };
+          return getNextState(prevState, {
+            ...state,
+            routes,
+          });
+        }
+      }
+
+      if (activeChildIndex !== state.index) {
+        return getNextState(prevState, {
+          ...state,
+          index: activeChildIndex,
+        });
+      } else if (didNavigate && !inputState) {
+        return state;
+      } else if (didNavigate) {
+        return { ...state };
+      }
+
+      // Let other children handle it and switch to the first child that returns a new state
+      let index = state.index;
+      let routes = state.routes;
+      order.find((childId, i) => {
+        const childRouter = childRouters[childId];
+        if (i === index) {
+          return false;
+        }
+        let childState = routes[i];
+        if (childRouter) {
+          childState = childRouter.getStateForAction(action, childState);
+        }
+        if (!childState) {
+          index = i;
+          return true;
+        }
+        if (childState !== routes[i]) {
+          routes = [...routes];
+          routes[i] = childState;
+          index = i;
+          return true;
+        }
+        return false;
+      });
+
+      // Nested routers can be updated after switching children with actions such as SET_PARAMS
+      // and COMPLETE_TRANSITION.
+      // NOTE: This may be problematic with custom routers because we whitelist the actions
+      // that can be handled by child routers without automatically changing index.
+      if (childrenUpdateWithoutSwitchingIndex(action.type)) {
+        index = state.index;
+      }
+
+      if (index !== state.index || routes !== state.routes) {
+        return getNextState(prevState, {
+          ...state,
+          index,
+          routes,
+        });
+      }
+      return state;
+    },
+
+    getComponentForState(state) {
+      const routeName = state.routes[state.index].routeName;
+      invariant(
+        routeName,
+        `There is no route defined for index ${state.index}. Check that
+        that you passed in a navigation state with a valid tab/screen index.`
+      );
+      const childRouter = childRouters[routeName];
+      if (childRouter) {
+        return childRouter.getComponentForState(state.routes[state.index]);
+      }
+      return getScreenForRouteName(routeConfigs, routeName);
+    },
+
+    getComponentForRouteName(routeName) {
+      return getScreenForRouteName(routeConfigs, routeName);
+    },
+
+    getPathAndParamsForState(state) {
+      const route = state.routes[state.index];
+      return getPathAndParamsForRoute(route);
+    },
+
+    getActionForPathAndParams(path, params) {
+      return getActionForPathAndParams(path, params);
+    },
+
+    getScreenOptions: createConfigGetter(
+      routeConfigs,
+      config.navigationOptions
+    ),
+  };
+};

src/routers/TabRouter.js

@@ -0,0 +1,11 @@
+import SwitchRouter from './SwitchRouter';
+import withDefaultValue from '../utils/withDefaultValue';
+
+export default (routeConfigs, config = {}) => {
+  config = { ...config };
+  config = withDefaultValue(config, 'resetOnBlur', false);
+  config = withDefaultValue(config, 'backBehavior', 'initialRoute');
+
+  const switchRouter = SwitchRouter(routeConfigs, config);
+  return switchRouter;
+};

src/routers/__tests__/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "../../../.eslintrc",
+  "env": {
+    "jest": true
+  },
+}

src/routers/__tests__/PathHandling-test.js

@@ -0,0 +1,299 @@
+/* eslint no-shadow:0, react/no-multi-comp:0, react/display-name:0 */
+
+import React from 'react';
+
+import SwitchRouter from '../SwitchRouter';
+import StackRouter from '../StackRouter';
+import StackActions from '../StackActions';
+import NavigationActions from '../../NavigationActions';
+import { urlToPathAndParams } from '../pathUtils';
+import { _TESTING_ONLY_normalize_keys } from '../KeyGenerator';
+
+beforeEach(() => {
+  _TESTING_ONLY_normalize_keys();
+});
+
+const ListScreen = () => <div />;
+
+const ProfileNavigator = () => <div />;
+ProfileNavigator.router = StackRouter({
+  list: {
+    path: 'list/:id',
+    screen: ListScreen,
+  },
+});
+
+const MainNavigator = () => <div />;
+MainNavigator.router = StackRouter({
+  profile: {
+    path: 'p/:id',
+    screen: ProfileNavigator,
+  },
+});
+
+const LoginScreen = () => <div />;
+
+const AuthNavigator = () => <div />;
+AuthNavigator.router = StackRouter({
+  login: {
+    screen: LoginScreen,
+  },
+});
+
+const BarScreen = () => <div />;
+
+class FooNavigator extends React.Component {
+  static router = StackRouter({
+    bar: {
+      path: 'b/:barThing',
+      screen: BarScreen,
+    },
+  });
+  render() {
+    return <div />;
+  }
+}
+
+const PersonScreen = () => <div />;
+
+const performRouterTest = createTestRouter => {
+  const testRouter = createTestRouter({
+    main: {
+      screen: MainNavigator,
+    },
+    baz: {
+      path: null,
+      screen: FooNavigator,
+    },
+    auth: {
+      screen: AuthNavigator,
+    },
+    person: {
+      path: 'people/:id',
+      screen: PersonScreen,
+    },
+    foo: {
+      path: 'fo/:fooThing',
+      screen: FooNavigator,
+    },
+  });
+
+  test('Handles empty URIs', () => {
+    const router = createTestRouter(
+      {
+        Foo: {
+          screen: () => <div />,
+        },
+        Bar: {
+          screen: () => <div />,
+        },
+      },
+      { initialRouteName: 'Bar', initialRouteParams: { foo: 42 } }
+    );
+    const action = router.getActionForPathAndParams('');
+    expect(action).toEqual({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Bar',
+      params: { foo: 42 },
+    });
+    const state = router.getStateForAction(action);
+    expect(state.routes[state.index]).toEqual(
+      expect.objectContaining({
+        routeName: 'Bar',
+        params: { foo: 42 },
+      })
+    );
+  });
+
+  test('Gets deep path with pure wildcard match', () => {
+    const ScreenA = () => <div />;
+    const ScreenB = () => <div />;
+    const ScreenC = () => <div />;
+    ScreenA.router = createTestRouter({
+      Boo: { path: 'boo', screen: ScreenC },
+      Baz: { path: 'baz/:bazId', screen: ScreenB },
+    });
+    ScreenC.router = createTestRouter({
+      Boo2: { path: '', screen: ScreenB },
+    });
+    const router = createTestRouter({
+      Foo: {
+        path: null,
+        screen: ScreenA,
+      },
+      Bar: {
+        screen: ScreenB,
+      },
+    });
+
+    {
+      const state = {
+        index: 0,
+        routes: [
+          {
+            index: 1,
+            key: 'Foo',
+            routeName: 'Foo',
+            params: {
+              id: '123',
+            },
+            routes: [
+              {
+                index: 0,
+                key: 'Boo',
+                routeName: 'Boo',
+                routes: [{ key: 'Boo2', routeName: 'Boo2' }],
+              },
+              { key: 'Baz', routeName: 'Baz', params: { bazId: '321' } },
+            ],
+          },
+          { key: 'Bar', routeName: 'Bar' },
+        ],
+      };
+      const { path, params } = router.getPathAndParamsForState(state);
+      expect(path).toEqual('baz/321');
+      expect(params.id).toEqual('123');
+      expect(params.bazId).toEqual('321');
+    }
+
+    {
+      const state = {
+        index: 0,
+        routes: [
+          {
+            index: 0,
+            key: 'Foo',
+            routeName: 'Foo',
+            params: {
+              id: '123',
+            },
+            routes: [
+              {
+                index: 0,
+                key: 'Boo',
+                routeName: 'Boo',
+                routes: [{ key: 'Boo2', routeName: 'Boo2' }],
+              },
+              { key: 'Baz', routeName: 'Baz', params: { bazId: '321' } },
+            ],
+          },
+          { key: 'Bar', routeName: 'Bar' },
+        ],
+      };
+      const { path, params } = router.getPathAndParamsForState(state);
+      expect(path).toEqual('boo');
+      expect(params).toEqual({ id: '123' });
+    }
+  });
+
+  test('URI encoded string get passed to deep link', () => {
+    const uri = 'people/2018%2F02%2F07';
+    const action = testRouter.getActionForPathAndParams(uri);
+    expect(action).toEqual({
+      routeName: 'person',
+      params: {
+        id: '2018/02/07',
+      },
+      type: NavigationActions.NAVIGATE,
+    });
+
+    const malformedUri = 'people/%E0%A4%A';
+    const action2 = testRouter.getActionForPathAndParams(malformedUri);
+    expect(action2).toEqual({
+      routeName: 'person',
+      params: {
+        id: '%E0%A4%A',
+      },
+      type: NavigationActions.NAVIGATE,
+    });
+  });
+
+  test('Querystring params get passed to nested deep link', () => {
+    const action = testRouter.getActionForPathAndParams(
+      'main/p/4/list/10259959195',
+      { code: 'test', foo: 'bar' }
+    );
+    expect(action).toEqual({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'main',
+      params: {
+        code: 'test',
+        foo: 'bar',
+      },
+      action: {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'profile',
+        params: {
+          id: '4',
+          code: 'test',
+          foo: 'bar',
+        },
+        action: {
+          type: NavigationActions.NAVIGATE,
+          routeName: 'list',
+          params: {
+            id: '10259959195',
+            code: 'test',
+            foo: 'bar',
+          },
+        },
+      },
+    });
+
+    const action2 = testRouter.getActionForPathAndParams(
+      'main/p/4/list/10259959195',
+      { code: '', foo: 'bar' }
+    );
+    expect(action2).toEqual({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'main',
+      params: {
+        code: '',
+        foo: 'bar',
+      },
+      action: {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'profile',
+        params: {
+          id: '4',
+          code: '',
+          foo: 'bar',
+        },
+        action: {
+          type: NavigationActions.NAVIGATE,
+          routeName: 'list',
+          params: {
+            id: '10259959195',
+            code: '',
+            foo: 'bar',
+          },
+        },
+      },
+    });
+  });
+
+  test('paths option on router overrides path from route config', () => {
+    const router = createTestRouter(
+      {
+        main: {
+          screen: MainNavigator,
+        },
+        baz: {
+          path: null,
+          screen: FooNavigator,
+        },
+      },
+      { paths: { baz: 'overridden' } }
+    );
+    const action = router.getActionForPathAndParams('overridden', {});
+    expect(action.type).toEqual(NavigationActions.NAVIGATE);
+    expect(action.routeName).toEqual('baz');
+  });
+};
+
+describe('Path handling for stack router', () => {
+  performRouterTest(StackRouter);
+});
+describe('Path handling for switch router', () => {
+  performRouterTest(SwitchRouter);
+});

src/routers/__tests__/Routers-test.js

@@ -0,0 +1,470 @@
+/* eslint react/no-multi-comp:0, react/display-name:0 */
+
+import React from 'react';
+
+import StackRouter from '../StackRouter';
+import TabRouter from '../TabRouter';
+import SwitchRouter from '../SwitchRouter';
+
+import NavigationActions from '../../NavigationActions';
+import { _TESTING_ONLY_normalize_keys } from '../KeyGenerator';
+
+beforeEach(() => {
+  _TESTING_ONLY_normalize_keys();
+});
+
+const ROUTERS = {
+  TabRouter,
+  StackRouter,
+  SwitchRouter,
+};
+
+const dummyEventSubscriber = (name, handler) => ({
+  remove: () => {},
+});
+
+Object.keys(ROUTERS).forEach(routerName => {
+  const Router = ROUTERS[routerName];
+
+  describe(`General router features - ${routerName}`, () => {
+    test(`title is configurable using navigationOptions and getScreenOptions - ${routerName}`, () => {
+      class FooView extends React.Component {
+        render() {
+          return <div />;
+        }
+      }
+      class BarView extends React.Component {
+        render() {
+          return <div />;
+        }
+        static navigationOptions = { title: 'BarTitle' };
+      }
+      class BazView extends React.Component {
+        render() {
+          return <div />;
+        }
+        static navigationOptions = ({ navigation }) => ({
+          title: `Baz-${navigation.state.params.id}`,
+        });
+      }
+      const router = Router({
+        Foo: { screen: FooView },
+        Bar: { screen: BarView },
+        Baz: { screen: BazView },
+      });
+      const routes = [
+        { key: 'A', routeName: 'Foo' },
+        { key: 'B', routeName: 'Bar' },
+        { key: 'A', routeName: 'Baz', params: { id: '123' } },
+      ];
+      expect(
+        router.getScreenOptions(
+          {
+            state: routes[0],
+            dispatch: () => false,
+            addListener: dummyEventSubscriber,
+          },
+          {}
+        ).title
+      ).toEqual(undefined);
+      expect(
+        router.getScreenOptions(
+          {
+            state: routes[1],
+            dispatch: () => false,
+            addListener: dummyEventSubscriber,
+          },
+          {}
+        ).title
+      ).toEqual('BarTitle');
+      expect(
+        router.getScreenOptions(
+          {
+            state: routes[2],
+            dispatch: () => false,
+            addListener: dummyEventSubscriber,
+          },
+          {}
+        ).title
+      ).toEqual('Baz-123');
+    });
+
+    test(`set params works in ${routerName}`, () => {
+      class FooView extends React.Component {
+        render() {
+          return <div />;
+        }
+      }
+      const router = Router({
+        Foo: { screen: FooView },
+        Bar: { screen: FooView },
+      });
+
+      const initState = router.getStateForAction(NavigationActions.init());
+      const initRoute = initState.routes[initState.index];
+      expect(initRoute.params).toEqual(undefined);
+
+      const state0 = router.getStateForAction(
+        NavigationActions.setParams({
+          params: { foo: 42 },
+          key: initRoute.key,
+        }),
+        initState
+      );
+      expect(state0.routes[state0.index].params.foo).toEqual(42);
+    });
+  });
+});
+
+test('Nested navigate behavior test', () => {
+  const Leaf = () => <div />;
+
+  const First = () => <div />;
+  First.router = StackRouter({
+    First1: Leaf,
+    First2: Leaf,
+  });
+
+  const Second = () => <div />;
+  Second.router = StackRouter({
+    Second1: Leaf,
+    Second2: Leaf,
+  });
+
+  const Main = () => <div />;
+  Main.router = StackRouter({
+    First,
+    Second,
+  });
+  const TestRouter = SwitchRouter({
+    Login: Leaf,
+    Main,
+  });
+
+  const state1 = TestRouter.getStateForAction({ type: NavigationActions.INIT });
+
+  const state2 = TestRouter.getStateForAction(
+    { type: NavigationActions.NAVIGATE, routeName: 'First' },
+    state1
+  );
+  expect(state2.index).toEqual(1);
+  expect(state2.routes[1].index).toEqual(0);
+  expect(state2.routes[1].routes[0].index).toEqual(0);
+
+  const state3 = TestRouter.getStateForAction(
+    { type: NavigationActions.NAVIGATE, routeName: 'Second2' },
+    state2
+  );
+  expect(state3.index).toEqual(1);
+  expect(state3.routes[1].index).toEqual(1); // second
+  expect(state3.routes[1].routes[1].index).toEqual(1); //second.second2
+
+  const state4 = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.NAVIGATE,
+      routeName: 'First',
+      action: { type: NavigationActions.NAVIGATE, routeName: 'First2' },
+    },
+    state3,
+    true
+  );
+  expect(state4.index).toEqual(1); // main
+  expect(state4.routes[1].index).toEqual(0); // first
+  expect(state4.routes[1].routes[0].index).toEqual(1); // first2
+
+  const state5 = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.NAVIGATE,
+      routeName: 'First',
+      action: { type: NavigationActions.NAVIGATE, routeName: 'First1' },
+    },
+    state3 // second.second2 is active on state3
+  );
+  expect(state5.index).toEqual(1); // main
+  expect(state5.routes[1].index).toEqual(0); // first
+  expect(state5.routes[1].routes[0].index).toEqual(0); // first.first1
+});
+
+test('Handles no-op actions with tabs within stack router', () => {
+  const BarView = () => <div />;
+  const FooTabNavigator = () => <div />;
+  FooTabNavigator.router = TabRouter({
+    Zap: { screen: BarView },
+    Zoo: { screen: BarView },
+  });
+  const TestRouter = StackRouter({
+    Foo: {
+      screen: FooTabNavigator,
+    },
+    Bar: {
+      screen: BarView,
+    },
+  });
+  const state1 = TestRouter.getStateForAction({ type: NavigationActions.INIT });
+  const state2 = TestRouter.getStateForAction({
+    type: NavigationActions.NAVIGATE,
+    routeName: 'Qux',
+  });
+  expect(state1.routes[0].key).toEqual('id-0');
+  expect(state2.routes[0].key).toEqual('id-1');
+  state1.routes[0].key = state2.routes[0].key;
+  expect(state1).toEqual(state2);
+  const state3 = TestRouter.getStateForAction(
+    { type: NavigationActions.NAVIGATE, routeName: 'Zap' },
+    state2
+  );
+  expect(state2).toEqual(state3);
+});
+
+test('Handles deep action', () => {
+  const BarView = () => <div />;
+  const FooTabNavigator = () => <div />;
+  FooTabNavigator.router = TabRouter({
+    Zap: { screen: BarView },
+    Zoo: { screen: BarView },
+  });
+  const TestRouter = StackRouter({
+    Bar: { screen: BarView },
+    Foo: { screen: FooTabNavigator },
+  });
+  const state1 = TestRouter.getStateForAction({ type: NavigationActions.INIT });
+  const expectedState = {
+    index: 0,
+    isTransitioning: false,
+    key: 'StackRouterRoot',
+    routes: [
+      {
+        key: 'id-0',
+        routeName: 'Bar',
+      },
+    ],
+  };
+  expect(state1).toEqual(expectedState);
+  const state2 = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Foo',
+      immediate: true,
+      action: { type: NavigationActions.NAVIGATE, routeName: 'Zoo' },
+    },
+    state1
+  );
+  expect(state2 && state2.index).toEqual(1);
+  expect(state2 && state2.routes[1].index).toEqual(1);
+});
+
+test('Handles the navigate action with params', () => {
+  const FooTabNavigator = () => <div />;
+  FooTabNavigator.router = TabRouter({
+    Baz: { screen: () => <div /> },
+    Boo: { screen: () => <div /> },
+  });
+
+  const TestRouter = StackRouter({
+    Foo: { screen: () => <div /> },
+    Bar: { screen: FooTabNavigator },
+  });
+  const state = TestRouter.getStateForAction({ type: NavigationActions.INIT });
+  const state2 = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.NAVIGATE,
+      immediate: true,
+      routeName: 'Bar',
+      params: { foo: '42' },
+    },
+    state
+  );
+  expect(state2 && state2.routes[1].params).toEqual({ foo: '42' });
+  expect(state2 && state2.routes[1].routes).toEqual([
+    {
+      key: 'Baz',
+      routeName: 'Baz',
+      params: { foo: '42' },
+    },
+    {
+      key: 'Boo',
+      routeName: 'Boo',
+      params: { foo: '42' },
+    },
+  ]);
+});
+
+test('Handles the setParams action', () => {
+  const FooTabNavigator = () => <div />;
+  FooTabNavigator.router = TabRouter({
+    Baz: { screen: () => <div /> },
+  });
+  const TestRouter = StackRouter({
+    Foo: { screen: FooTabNavigator },
+    Bar: { screen: () => <div /> },
+  });
+  const state = TestRouter.getStateForAction({ type: NavigationActions.INIT });
+  const state2 = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.SET_PARAMS,
+      params: { name: 'foobar' },
+      key: 'Baz',
+    },
+    state
+  );
+  expect(state2 && state2.index).toEqual(0);
+  expect(state2 && state2.routes[0].routes).toEqual([
+    {
+      key: 'Baz',
+      routeName: 'Baz',
+      params: { name: 'foobar' },
+    },
+  ]);
+});
+
+test('Supports lazily-evaluated getScreen', () => {
+  const BarView = () => <div />;
+  const FooTabNavigator = () => <div />;
+  FooTabNavigator.router = TabRouter({
+    Zap: { screen: BarView },
+    Zoo: { screen: BarView },
+  });
+  const TestRouter = StackRouter({
+    Foo: {
+      screen: FooTabNavigator,
+    },
+    Bar: {
+      getScreen: () => BarView,
+    },
+  });
+  const state1 = TestRouter.getStateForAction({ type: NavigationActions.INIT });
+  const state2 = TestRouter.getStateForAction({
+    type: NavigationActions.NAVIGATE,
+    immediate: true,
+    routeName: 'Qux',
+  });
+  expect(state1.routes[0].key).toEqual('id-0');
+  expect(state2.routes[0].key).toEqual('id-1');
+  state1.routes[0].key = state2.routes[0].key;
+  expect(state1).toEqual(state2);
+  const state3 = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.NAVIGATE,
+      immediate: true,
+      routeName: 'Zap',
+    },
+    state2
+  );
+  expect(state2).toEqual(state3);
+});
+
+test('Does not switch tab index when TabRouter child handles COMPLETE_NAVIGATION or SET_PARAMS', () => {
+  const FooStackNavigator = () => <div />;
+  const BarView = () => <div />;
+  FooStackNavigator.router = StackRouter({
+    Foo: {
+      screen: BarView,
+    },
+    Bar: {
+      screen: BarView,
+    },
+  });
+
+  const TestRouter = TabRouter({
+    Zap: { screen: FooStackNavigator },
+    Zoo: { screen: FooStackNavigator },
+  });
+
+  const state1 = TestRouter.getStateForAction({ type: NavigationActions.INIT });
+
+  // Navigate to the second screen in the first tab
+  const state2 = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Bar',
+    },
+    state1
+  );
+
+  // Switch tabs
+  const state3 = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Zoo',
+    },
+    state2
+  );
+
+  const stateAfterCompleteTransition = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.COMPLETE_TRANSITION,
+      key: state2.routes[0].key,
+    },
+    state3
+  );
+  const stateAfterSetParams = TestRouter.getStateForAction(
+    {
+      type: NavigationActions.SET_PARAMS,
+      key: state1.routes[0].routes[0].key,
+      params: { key: 'value' },
+    },
+    state3
+  );
+
+  expect(stateAfterCompleteTransition.index).toEqual(1);
+  expect(stateAfterSetParams.index).toEqual(1);
+});
+
+test('Inner actions are only unpacked if the current tab matches', () => {
+  const PlainScreen = () => <div />;
+  const ScreenA = () => <div />;
+  const ScreenB = () => <div />;
+  ScreenB.router = StackRouter({
+    Baz: { screen: PlainScreen },
+    Zoo: { screen: PlainScreen },
+  });
+  ScreenA.router = StackRouter({
+    Bar: { screen: PlainScreen },
+    Boo: { screen: ScreenB },
+  });
+  const TestRouter = TabRouter({
+    Foo: { screen: ScreenA },
+  });
+  const screenApreState = {
+    index: 0,
+    key: 'Init',
+    isTransitioning: false,
+    routeName: 'Foo',
+    routes: [{ key: 'Init', routeName: 'Bar' }],
+  };
+  const preState = {
+    index: 0,
+    isTransitioning: false,
+    routes: [screenApreState],
+  };
+
+  const comparable = state => {
+    let result = {};
+    if (typeof state.routeName === 'string') {
+      result = { ...result, routeName: state.routeName };
+    }
+    if (state.routes instanceof Array) {
+      result = {
+        ...result,
+        routes: state.routes.map(comparable),
+      };
+    }
+    return result;
+  };
+
+  const action = NavigationActions.navigate({
+    routeName: 'Boo',
+    action: NavigationActions.navigate({ routeName: 'Zoo' }),
+  });
+
+  const expectedState = ScreenA.router.getStateForAction(
+    action,
+    screenApreState
+  );
+  const state = TestRouter.getStateForAction(action, preState);
+  const innerState = state ? state.routes[0] : state;
+
+  expect(expectedState && comparable(expectedState)).toEqual(
+    innerState && comparable(innerState)
+  );
+});

src/routers/__tests__/SwitchRouter-test.js

@@ -0,0 +1,202 @@
+/* eslint react/display-name:0 */
+
+import React from 'react';
+import SwitchRouter from '../SwitchRouter';
+import StackRouter from '../StackRouter';
+import NavigationActions from '../../NavigationActions';
+
+describe('SwitchRouter', () => {
+  test('resets the route when unfocusing a tab by default', () => {
+    const router = getExampleRouter();
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'A2' },
+      state
+    );
+    expect(state2.routes[0].index).toEqual(1);
+    expect(state2.routes[0].routes.length).toEqual(2);
+
+    const state3 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'B' },
+      state2
+    );
+
+    expect(state3.routes[0].index).toEqual(0);
+    expect(state3.routes[0].routes.length).toEqual(1);
+  });
+
+  test('does not reset the route on unfocus if resetOnBlur is false', () => {
+    const router = getExampleRouter({ resetOnBlur: false });
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'A2' },
+      state
+    );
+    expect(state2.routes[0].index).toEqual(1);
+    expect(state2.routes[0].routes.length).toEqual(2);
+
+    const state3 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'B' },
+      state2
+    );
+
+    expect(state3.routes[0].index).toEqual(1);
+    expect(state3.routes[0].routes.length).toEqual(2);
+  });
+
+  test('ignores back by default', () => {
+    const router = getExampleRouter();
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'B' },
+      state
+    );
+    expect(state2.index).toEqual(1);
+
+    const state3 = router.getStateForAction(
+      { type: NavigationActions.BACK },
+      state2
+    );
+
+    expect(state3.index).toEqual(1);
+  });
+
+  test('handles back if given a backBehavior', () => {
+    const router = getExampleRouter({ backBehavior: 'initialRoute' });
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'B' },
+      state
+    );
+    expect(state2.index).toEqual(1);
+
+    const state3 = router.getStateForAction(
+      { type: NavigationActions.BACK },
+      state2
+    );
+
+    expect(state3.index).toEqual(0);
+  });
+
+  test('order of handling navigate action is correct for nested switchrouters', () => {
+    // router = switch({ Nested: switch({ Foo, Bar }), Other: switch({ Foo }), Bar })
+    // if we are focused on Other and navigate to Bar, what should happen?
+
+    const Screen = () => <div />;
+    const NestedSwitch = () => <div />;
+    const OtherNestedSwitch = () => <div />;
+
+    let nestedRouter = SwitchRouter({ Foo: Screen, Bar: Screen });
+    let otherNestedRouter = SwitchRouter({ Foo: Screen });
+    NestedSwitch.router = nestedRouter;
+    OtherNestedSwitch.router = otherNestedRouter;
+
+    let router = SwitchRouter(
+      {
+        NestedSwitch,
+        OtherNestedSwitch,
+        Bar: Screen,
+      },
+      {
+        initialRouteName: 'OtherNestedSwitch',
+      }
+    );
+
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    expect(state.routes[state.index].routeName).toEqual('OtherNestedSwitch');
+
+    const state2 = router.getStateForAction(
+      {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'Bar',
+      },
+      state
+    );
+    expect(state2.routes[state2.index].routeName).toEqual('Bar');
+
+    const state3 = router.getStateForAction(
+      {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'NestedSwitch',
+      },
+      state2
+    );
+    const state4 = router.getStateForAction(
+      {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'Bar',
+      },
+      state3
+    );
+    let activeState4 = state4.routes[state4.index];
+    expect(activeState4.routeName).toEqual('NestedSwitch');
+    expect(activeState4.routes[activeState4.index].routeName).toEqual('Bar');
+  });
+
+  // https://github.com/react-navigation/react-navigation.github.io/issues/117#issuecomment-385597628
+  test('order of handling navigate action is correct for nested stackrouters', () => {
+    const Screen = () => <div />;
+    const MainStack = () => <div />;
+    const LoginStack = () => <div />;
+    MainStack.router = StackRouter({ Home: Screen, Profile: Screen });
+    LoginStack.router = StackRouter({ Form: Screen, ForgotPassword: Screen });
+
+    let router = SwitchRouter(
+      {
+        Home: Screen,
+        Login: LoginStack,
+        Main: MainStack,
+      },
+      {
+        initialRouteName: 'Login',
+      }
+    );
+
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    expect(state.routes[state.index].routeName).toEqual('Login');
+
+    const state2 = router.getStateForAction(
+      {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'Home',
+      },
+      state
+    );
+    expect(state2.routes[state2.index].routeName).toEqual('Home');
+  });
+});
+
+const getExampleRouter = (config = {}) => {
+  const PlainScreen = () => <div />;
+  const StackA = () => <div />;
+  const StackB = () => <div />;
+
+  StackA.router = StackRouter({
+    A1: PlainScreen,
+    A2: PlainScreen,
+  });
+
+  StackB.router = StackRouter({
+    B1: PlainScreen,
+    B2: PlainScreen,
+  });
+
+  const router = SwitchRouter(
+    {
+      A: {
+        screen: StackA,
+        path: '',
+      },
+      B: {
+        screen: StackB,
+        path: 'great/path',
+      },
+    },
+    {
+      initialRouteName: 'A',
+      ...config,
+    }
+  );
+
+  return router;
+};

src/routers/__tests__/TabRouter-test.js

@@ -0,0 +1,820 @@
+/* eslint react/display-name:0 */
+
+import React from 'react';
+import TabRouter from '../TabRouter';
+
+import StackActions from '../../routers/StackActions';
+import NavigationActions from '../../NavigationActions';
+
+const INIT_ACTION = { type: NavigationActions.INIT };
+
+const BareLeafRouteConfig = {
+  screen: () => <div />,
+};
+
+describe('TabRouter', () => {
+  test('Handles basic tab logic', () => {
+    const ScreenA = () => <div />;
+    const ScreenB = () => <div />;
+    const router = TabRouter({
+      Foo: { screen: ScreenA },
+      Bar: { screen: ScreenB },
+    });
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const expectedState = {
+      index: 0,
+      routes: [
+        { key: 'Foo', routeName: 'Foo' },
+        { key: 'Bar', routeName: 'Bar' },
+      ],
+      isTransitioning: false,
+    };
+    expect(state).toEqual(expectedState);
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'Bar' },
+      state
+    );
+    const expectedState2 = {
+      index: 1,
+      routes: [
+        { key: 'Foo', routeName: 'Foo' },
+        { key: 'Bar', routeName: 'Bar' },
+      ],
+      isTransitioning: false,
+    };
+    expect(state2).toEqual(expectedState2);
+    expect(router.getComponentForState(expectedState)).toEqual(ScreenA);
+    expect(router.getComponentForState(expectedState2)).toEqual(ScreenB);
+    const state3 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'Bar' },
+      state2
+    );
+    expect(state3).toEqual(null);
+  });
+
+  test('Handles getScreen', () => {
+    const ScreenA = () => <div />;
+    const ScreenB = () => <div />;
+    const router = TabRouter({
+      Foo: { getScreen: () => ScreenA },
+      Bar: { getScreen: () => ScreenB },
+    });
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const expectedState = {
+      index: 0,
+      routes: [
+        { key: 'Foo', routeName: 'Foo' },
+        { key: 'Bar', routeName: 'Bar' },
+      ],
+      isTransitioning: false,
+    };
+    expect(state).toEqual(expectedState);
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'Bar' },
+      state
+    );
+    const expectedState2 = {
+      index: 1,
+      routes: [
+        { key: 'Foo', routeName: 'Foo' },
+        { key: 'Bar', routeName: 'Bar' },
+      ],
+      isTransitioning: false,
+    };
+    expect(state2).toEqual(expectedState2);
+    expect(router.getComponentForState(expectedState)).toEqual(ScreenA);
+    expect(router.getComponentForState(expectedState2)).toEqual(ScreenB);
+    const state3 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'Bar' },
+      state2
+    );
+    expect(state3).toEqual(null);
+  });
+
+  test('Can set the initial tab', () => {
+    const router = TabRouter(
+      { Foo: BareLeafRouteConfig, Bar: BareLeafRouteConfig },
+      { initialRouteName: 'Bar' }
+    );
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    expect(state).toEqual({
+      index: 1,
+      routes: [
+        { key: 'Foo', routeName: 'Foo' },
+        { key: 'Bar', routeName: 'Bar' },
+      ],
+      isTransitioning: false,
+    });
+  });
+
+  test('Can set the initial params', () => {
+    const router = TabRouter(
+      { Foo: BareLeafRouteConfig, Bar: BareLeafRouteConfig },
+      { initialRouteName: 'Bar', initialRouteParams: { name: 'Qux' } }
+    );
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    expect(state).toEqual({
+      index: 1,
+      routes: [
+        { key: 'Foo', routeName: 'Foo' },
+        { key: 'Bar', routeName: 'Bar', params: { name: 'Qux' } },
+      ],
+      isTransitioning: false,
+    });
+  });
+
+  test('Handles the SetParams action', () => {
+    const router = TabRouter({
+      Foo: {
+        screen: () => <div />,
+      },
+      Bar: {
+        screen: () => <div />,
+      },
+    });
+    const state2 = router.getStateForAction({
+      type: NavigationActions.SET_PARAMS,
+      params: { name: 'Qux' },
+      key: 'Foo',
+    });
+    expect(state2 && state2.routes[0].params).toEqual({ name: 'Qux' });
+  });
+
+  test('Handles the SetParams action for inactive routes', () => {
+    const router = TabRouter(
+      {
+        Foo: {
+          screen: () => <div />,
+        },
+        Bar: {
+          screen: () => <div />,
+        },
+      },
+      {
+        initialRouteName: 'Bar',
+      }
+    );
+    const initialState = {
+      index: 1,
+      routes: [
+        {
+          key: 'RouteA',
+          routeName: 'Foo',
+          params: { name: 'InitialParam', other: 'Unchanged' },
+        },
+        { key: 'RouteB', routeName: 'Bar', params: {} },
+      ],
+    };
+    const state = router.getStateForAction(
+      {
+        type: NavigationActions.SET_PARAMS,
+        params: { name: 'NewParam' },
+        key: 'RouteA',
+      },
+      initialState
+    );
+    expect(state.index).toEqual(1);
+    expect(state.routes[0].params).toEqual({
+      name: 'NewParam',
+      other: 'Unchanged',
+    });
+  });
+
+  test('getStateForAction returns null when navigating to same tab', () => {
+    const router = TabRouter(
+      { Foo: BareLeafRouteConfig, Bar: BareLeafRouteConfig },
+      { initialRouteName: 'Bar' }
+    );
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'Bar' },
+      state
+    );
+    expect(state2).toEqual(null);
+  });
+
+  test('getStateForAction returns initial navigate', () => {
+    const router = TabRouter({
+      Foo: BareLeafRouteConfig,
+      Bar: BareLeafRouteConfig,
+    });
+    const state = router.getStateForAction({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Foo',
+    });
+    expect(state && state.index).toEqual(0);
+  });
+
+  test('Handles nested tabs and nested actions', () => {
+    const ChildTabNavigator = () => <div />;
+    ChildTabNavigator.router = TabRouter({
+      Foo: BareLeafRouteConfig,
+      Bar: BareLeafRouteConfig,
+    });
+    const router = TabRouter({
+      Foo: BareLeafRouteConfig,
+      Baz: { screen: ChildTabNavigator },
+      Boo: BareLeafRouteConfig,
+    });
+    const params = { foo: '42' };
+    const action = router.getActionForPathAndParams('Baz/Bar', params);
+    const navAction = {
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Baz',
+      params: { foo: '42' },
+      action: {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'Bar',
+        params: { foo: '42' },
+      },
+    };
+    expect(action).toEqual(navAction);
+    const state = router.getStateForAction(navAction);
+    expect(state).toEqual({
+      index: 1,
+      isTransitioning: false,
+      routes: [
+        {
+          key: 'Foo',
+          routeName: 'Foo',
+        },
+        {
+          index: 1,
+          isTransitioning: false,
+          key: 'Baz',
+          routeName: 'Baz',
+          routes: [
+            {
+              key: 'Foo',
+              routeName: 'Foo',
+            },
+            {
+              key: 'Bar',
+              routeName: 'Bar',
+              params,
+            },
+          ],
+        },
+        {
+          key: 'Boo',
+          routeName: 'Boo',
+        },
+      ],
+    });
+  });
+
+  test('Handles passing params to nested tabs', () => {
+    const ChildTabNavigator = () => <div />;
+    ChildTabNavigator.router = TabRouter({
+      Boo: BareLeafRouteConfig,
+      Bar: BareLeafRouteConfig,
+    });
+    const router = TabRouter({
+      Foo: BareLeafRouteConfig,
+      Baz: { screen: ChildTabNavigator },
+    });
+    const navAction = {
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Baz',
+    };
+    let state = router.getStateForAction(navAction);
+    expect(state).toEqual({
+      index: 1,
+      isTransitioning: false,
+      routes: [
+        { key: 'Foo', routeName: 'Foo' },
+        {
+          index: 0,
+          key: 'Baz',
+          routeName: 'Baz',
+          isTransitioning: false,
+          routes: [
+            { key: 'Boo', routeName: 'Boo' },
+            { key: 'Bar', routeName: 'Bar' },
+          ],
+        },
+      ],
+    });
+
+    // Ensure that navigating back and forth doesn't overwrite
+    state = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'Bar' },
+      state
+    );
+    state = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'Boo' },
+      state
+    );
+    expect(state && state.routes[1]).toEqual({
+      index: 0,
+      isTransitioning: false,
+      key: 'Baz',
+      routeName: 'Baz',
+      routes: [
+        { key: 'Boo', routeName: 'Boo' },
+        { key: 'Bar', routeName: 'Bar' },
+      ],
+    });
+  });
+
+  test('Handles initial deep linking into nested tabs', () => {
+    const ChildTabNavigator = () => <div />;
+    ChildTabNavigator.router = TabRouter({
+      Foo: BareLeafRouteConfig,
+      Bar: BareLeafRouteConfig,
+    });
+    const router = TabRouter({
+      Foo: BareLeafRouteConfig,
+      Baz: { screen: ChildTabNavigator },
+      Boo: BareLeafRouteConfig,
+    });
+    const state = router.getStateForAction({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Bar',
+    });
+    expect(state).toEqual({
+      index: 1,
+      isTransitioning: false,
+      routes: [
+        { key: 'Foo', routeName: 'Foo' },
+        {
+          index: 1,
+          key: 'Baz',
+          routeName: 'Baz',
+          isTransitioning: false,
+          routes: [
+            { key: 'Foo', routeName: 'Foo' },
+            { key: 'Bar', routeName: 'Bar' },
+          ],
+        },
+        { key: 'Boo', routeName: 'Boo' },
+      ],
+    });
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'Foo' },
+      state
+    );
+    expect(state2).toEqual({
+      index: 1,
+      isTransitioning: false,
+      routes: [
+        { key: 'Foo', routeName: 'Foo' },
+        {
+          index: 0,
+          key: 'Baz',
+          routeName: 'Baz',
+          isTransitioning: false,
+          routes: [
+            { key: 'Foo', routeName: 'Foo' },
+            { key: 'Bar', routeName: 'Bar' },
+          ],
+        },
+        { key: 'Boo', routeName: 'Boo' },
+      ],
+    });
+    const state3 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'Foo' },
+      state2
+    );
+    expect(state3).toEqual(null);
+  });
+
+  test('Handles linking across of deeply nested tabs', () => {
+    const ChildNavigator0 = () => <div />;
+    ChildNavigator0.router = TabRouter({
+      Boo: BareLeafRouteConfig,
+      Baz: BareLeafRouteConfig,
+    });
+    const ChildNavigator1 = () => <div />;
+    ChildNavigator1.router = TabRouter({
+      Zoo: BareLeafRouteConfig,
+      Zap: BareLeafRouteConfig,
+    });
+    const MidNavigator = () => <div />;
+    MidNavigator.router = TabRouter({
+      Fee: { screen: ChildNavigator0 },
+      Bar: { screen: ChildNavigator1 },
+    });
+    const router = TabRouter({
+      Foo: { screen: MidNavigator },
+      Gah: BareLeafRouteConfig,
+    });
+    const state = router.getStateForAction(INIT_ACTION);
+    expect(state).toEqual({
+      index: 0,
+      isTransitioning: false,
+      routes: [
+        {
+          index: 0,
+          key: 'Foo',
+          routeName: 'Foo',
+          isTransitioning: false,
+          routes: [
+            {
+              index: 0,
+              key: 'Fee',
+              routeName: 'Fee',
+              isTransitioning: false,
+              routes: [
+                { key: 'Boo', routeName: 'Boo' },
+                { key: 'Baz', routeName: 'Baz' },
+              ],
+            },
+            {
+              index: 0,
+              key: 'Bar',
+              routeName: 'Bar',
+              isTransitioning: false,
+              routes: [
+                { key: 'Zoo', routeName: 'Zoo' },
+                { key: 'Zap', routeName: 'Zap' },
+              ],
+            },
+          ],
+        },
+        { key: 'Gah', routeName: 'Gah' },
+      ],
+    });
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'Zap' },
+      state
+    );
+    expect(state2).toEqual({
+      index: 0,
+      isTransitioning: false,
+      routes: [
+        {
+          index: 1,
+          key: 'Foo',
+          routeName: 'Foo',
+          isTransitioning: false,
+          routes: [
+            {
+              index: 0,
+              key: 'Fee',
+              routeName: 'Fee',
+              isTransitioning: false,
+              routes: [
+                { key: 'Boo', routeName: 'Boo' },
+                { key: 'Baz', routeName: 'Baz' },
+              ],
+            },
+            {
+              index: 1,
+              key: 'Bar',
+              routeName: 'Bar',
+              isTransitioning: false,
+              routes: [
+                { key: 'Zoo', routeName: 'Zoo' },
+                { key: 'Zap', routeName: 'Zap' },
+              ],
+            },
+          ],
+        },
+        { key: 'Gah', routeName: 'Gah' },
+      ],
+    });
+    const state3 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'Zap' },
+      state2
+    );
+    expect(state3).toEqual(null);
+    const state4 = router.getStateForAction({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Foo',
+      action: {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'Bar',
+        action: {
+          type: NavigationActions.NAVIGATE,
+          routeName: 'Zap',
+        },
+      },
+    });
+    expect(state4).toEqual({
+      index: 0,
+      isTransitioning: false,
+      routes: [
+        {
+          index: 1,
+          key: 'Foo',
+          routeName: 'Foo',
+          isTransitioning: false,
+          routes: [
+            {
+              index: 0,
+              key: 'Fee',
+              routeName: 'Fee',
+              isTransitioning: false,
+              routes: [
+                { key: 'Boo', routeName: 'Boo' },
+                { key: 'Baz', routeName: 'Baz' },
+              ],
+            },
+            {
+              index: 1,
+              key: 'Bar',
+              routeName: 'Bar',
+              isTransitioning: false,
+              routes: [
+                { key: 'Zoo', routeName: 'Zoo' },
+                { key: 'Zap', routeName: 'Zap' },
+              ],
+            },
+          ],
+        },
+        { key: 'Gah', routeName: 'Gah' },
+      ],
+    });
+  });
+
+  test.only('Handles path configuration', () => {
+    const ScreenA = () => <div />;
+    const ScreenB = () => <div />;
+    const router = TabRouter({
+      Foo: {
+        path: 'f',
+        screen: ScreenA,
+      },
+      Bar: {
+        path: 'b/:great',
+        screen: ScreenB,
+      },
+    });
+    const params = { foo: '42' };
+    const action = router.getActionForPathAndParams('b/anything', params);
+    const expectedAction = {
+      params: {
+        foo: '42',
+        great: 'anything',
+      },
+      routeName: 'Bar',
+      type: NavigationActions.NAVIGATE,
+    };
+    expect(action).toEqual(expectedAction);
+
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const expectedState = {
+      index: 0,
+      isTransitioning: false,
+      routes: [
+        { key: 'Foo', routeName: 'Foo' },
+        { key: 'Bar', routeName: 'Bar' },
+      ],
+    };
+    expect(state).toEqual(expectedState);
+    const state2 = router.getStateForAction(expectedAction, state);
+    const expectedState2 = {
+      index: 1,
+      isTransitioning: false,
+      routes: [
+        { key: 'Foo', routeName: 'Foo', params: undefined },
+        {
+          key: 'Bar',
+          routeName: 'Bar',
+          params: { foo: '42', great: 'anything' },
+        },
+      ],
+    };
+    expect(state2).toEqual(expectedState2);
+    expect(router.getComponentForState(expectedState)).toEqual(ScreenA);
+    expect(router.getComponentForState(expectedState2)).toEqual(ScreenB);
+    expect(router.getPathAndParamsForState(expectedState).path).toEqual('f');
+    expect(router.getPathAndParamsForState(expectedState2).path).toEqual(
+      'b/anything'
+    );
+  });
+
+  test('Handles default configuration', () => {
+    const ScreenA = () => <div />;
+    const ScreenB = () => <div />;
+    const router = TabRouter({
+      Foo: {
+        path: '',
+        screen: ScreenA,
+      },
+      Bar: {
+        path: 'b',
+        screen: ScreenB,
+      },
+    });
+    const action = router.getActionForPathAndParams('', { foo: '42' });
+    expect(action).toEqual({
+      params: {
+        foo: '42',
+      },
+      routeName: 'Foo',
+      type: NavigationActions.NAVIGATE,
+    });
+  });
+
+  test('Gets deep path', () => {
+    const ScreenA = () => <div />;
+    const ScreenB = () => <div />;
+    ScreenA.router = TabRouter({
+      Boo: { screen: ScreenB },
+      Baz: { screen: ScreenB },
+    });
+    const router = TabRouter({
+      Foo: {
+        path: 'f',
+        screen: ScreenA,
+      },
+      Bar: {
+        screen: ScreenB,
+      },
+    });
+
+    const state = {
+      index: 0,
+      isTransitioning: false,
+      routes: [
+        {
+          index: 1,
+          key: 'Foo',
+          routeName: 'Foo',
+          isTransitioning: false,
+          routes: [
+            { key: 'Boo', routeName: 'Boo' },
+            { key: 'Baz', routeName: 'Baz' },
+          ],
+        },
+        { key: 'Bar', routeName: 'Bar' },
+      ],
+    };
+    const { path } = router.getPathAndParamsForState(state);
+    expect(path).toEqual('f/Baz');
+  });
+
+  test('Can navigate to other tab (no router) with params', () => {
+    const ScreenA = () => <div />;
+    const ScreenB = () => <div />;
+
+    const router = TabRouter({
+      a: { screen: ScreenA },
+      b: { screen: ScreenB },
+    });
+
+    const state0 = router.getStateForAction(INIT_ACTION);
+
+    expect(state0).toEqual({
+      index: 0,
+      isTransitioning: false,
+      routes: [{ key: 'a', routeName: 'a' }, { key: 'b', routeName: 'b' }],
+    });
+
+    const params = { key: 'value' };
+
+    const state1 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'b', params },
+      state0
+    );
+
+    expect(state1).toEqual({
+      index: 1,
+      isTransitioning: false,
+      routes: [
+        { key: 'a', routeName: 'a' },
+        { key: 'b', routeName: 'b', params },
+      ],
+    });
+  });
+
+  test('Back actions are not propagated to inactive children', () => {
+    const ScreenA = () => <div />;
+    const ScreenB = () => <div />;
+    const ScreenC = () => <div />;
+    const InnerNavigator = () => <div />;
+    InnerNavigator.router = TabRouter({
+      a: { screen: ScreenA },
+      b: { screen: ScreenB },
+    });
+
+    const router = TabRouter(
+      {
+        inner: { screen: InnerNavigator },
+        c: { screen: ScreenC },
+      },
+      {
+        backBehavior: 'none',
+      }
+    );
+
+    const state0 = router.getStateForAction(INIT_ACTION);
+
+    const state1 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'b' },
+      state0
+    );
+
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'c' },
+      state1
+    );
+
+    const state3 = router.getStateForAction(
+      { type: NavigationActions.BACK },
+      state2
+    );
+
+    expect(state3).toEqual(state2);
+  });
+
+  test('Back behavior initialRoute works', () => {
+    const ScreenA = () => <div />;
+    const ScreenB = () => <div />;
+    const router = TabRouter({
+      a: { screen: ScreenA },
+      b: { screen: ScreenB },
+    });
+
+    const state0 = router.getStateForAction(INIT_ACTION);
+
+    const state1 = router.getStateForAction(
+      { type: NavigationActions.NAVIGATE, routeName: 'b' },
+      state0
+    );
+
+    const state2 = router.getStateForAction(
+      { type: NavigationActions.BACK },
+      state1
+    );
+
+    expect(state2).toEqual(state0);
+  });
+
+  test('Inner actions are only unpacked if the current tab matches', () => {
+    const PlainScreen = () => <div />;
+    const ScreenA = () => <div />;
+    const ScreenB = () => <div />;
+    ScreenB.router = TabRouter({
+      Baz: { screen: PlainScreen },
+      Zoo: { screen: PlainScreen },
+    });
+    ScreenA.router = TabRouter({
+      Bar: { screen: PlainScreen },
+      Boo: { screen: ScreenB },
+    });
+    const router = TabRouter({
+      Foo: { screen: ScreenA },
+    });
+    const screenApreState = {
+      index: 0,
+      key: 'Foo',
+      isTransitioning: false,
+      routeName: 'Foo',
+      routes: [{ key: 'Bar', routeName: 'Bar' }],
+    };
+    const preState = {
+      index: 0,
+      isTransitioning: false,
+      routes: [screenApreState],
+    };
+
+    const comparable = state => {
+      let result = {};
+      if (typeof state.routeName === 'string') {
+        result = { ...result, routeName: state.routeName };
+      }
+      if (state.routes instanceof Array) {
+        result = {
+          ...result,
+          routes: state.routes.map(comparable),
+        };
+      }
+      return result;
+    };
+
+    const action = NavigationActions.navigate({
+      routeName: 'Boo',
+      action: NavigationActions.navigate({ routeName: 'Zoo' }),
+    });
+    const expectedState = ScreenA.router.getStateForAction(
+      action,
+      screenApreState
+    );
+    const state = router.getStateForAction(action, preState);
+    const innerState = state ? state.routes[0] : state;
+
+    expect(innerState.routes[1].index).toEqual(1);
+    expect(expectedState && comparable(expectedState)).toEqual(
+      innerState && comparable(innerState)
+    );
+
+    const noMatchAction = NavigationActions.navigate({
+      routeName: 'Qux',
+      action: NavigationActions.navigate({ routeName: 'Zoo' }),
+    });
+    const expectedState2 = ScreenA.router.getStateForAction(
+      noMatchAction,
+      screenApreState
+    );
+    const state2 = router.getStateForAction(noMatchAction, preState);
+    const innerState2 = state2 ? state2.routes[0] : state2;
+
+    expect(innerState2.routes[1].index).toEqual(0);
+    expect(expectedState2 && comparable(expectedState2)).toEqual(
+      innerState2 && comparable(innerState2)
+    );
+  });
+});