Release 2.13.0

* Add missing types

* Added missing types to DrawerActions

.github/ISSUE_TEMPLATE.md

@@ -25,7 +25,7 @@ Bugs with react-navigation must be reproducible *without any external libraries
 
 ### How to reproduce
 
-- You must provide a way to reproduce the problem. If you are having an issue with your machine or build tools, the issue belongs on another repoistory as that is outside of the scope of 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 repository 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.
 

CHANGELOG.md

@@ -7,6 +7,119 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+
+## [2.13.0] - [2018-09-06](https://github.com/react-navigation/react-navigation/releases/tag/2.13.0)
+
+### Added
+
+- When `tabBarIcon` is a function it is now provided with a `horizontal` option that indicates whether horizontal tabs are being rendered (label to the right of the icon) or not.
+- Add some missing flow types ([1](https://github.com/react-navigation/react-navigation/pull/4836), [2](https://github.com/react-navigation/react-navigation/pull/4917)).
+
+### Changed
+
+- Updated react-navigation-stack to 0.3.0.
+- Updated react-navigation-tabs to 0.7.0.
+- Pinned `create-react-context` dependency to `0.2.2` (https://github.com/react-navigation/react-navigation/issues/4934)
+
+### Fixed
+
+- Fixes tab label font sizes in landscape and portrait.
+- Default tab bar background color and header background color are white on iOS.
+
+## [2.12.1] - [2018-08-23](https://github.com/react-navigation/react-navigation/releases/tag/2.12.1)
+
+### Fixed
+- Fix crash on react-native@>=0.56 described in https://github.com/react-navigation/react-navigation/issues/4886
+
+## [2.12.0] - [2018-08-22](https://github.com/react-navigation/react-navigation/releases/tag/2.12.0)
+
+### Changed
+- Move stack specific view code to react-navigation-stack
+- Add accessibility props for inactive screens in stack (https://github.com/react-navigation/react-navigation-stack/commit/4e04428e26df9076413b57b3346a7ce357de1a77)
+- Updated header title to match iOS 11/12 style correctly (https://github.com/react-navigation/react-navigation-stack/pull/1)
+- Add support for animating the header background on screen transitions and add interpolator to animate it along with the rest of the screen, but this is still opt-in behavior (https://github.com/react-navigation/react-navigation-stack/pull/3)
+- Updated react-native-safe-area-view to 0.9.0
+
+## [2.11.2] - [2018-08-03](https://github.com/react-navigation/react-navigation/releases/tag/2.11.2)
+### Changed
+- Revert rename of pathUtils
+
+## [2.11.1] - [2018-08-03](https://github.com/react-navigation/react-navigation/releases/tag/2.11.1)
+### Changed
+- Fix some exports related to the 2.11.0 changes to move stack navigator out of core
+
+## [2.11.0] - [2018-08-03](https://github.com/react-navigation/react-navigation/releases/tag/2.11.0)
+### Added
+- Export some modules that are useful for moving stack navigator outside of core
+
+## [2.10.0] - [2018-08-02](https://github.com/react-navigation/react-navigation/releases/tag/2.10.0)
+### Added
+- `lazy` and `optimizationsEnabled` options to `createMaterialTopTabNavigator` (react-navigation-tabs@0.6.0)
+
+### Fixed
+- Android back button in stack with drawer closes drawer properly if open (react-navigation-drawer@0.5.0)
+- Fixes bug where `null` doesn't work in routerOptions `paths` object for deeplinking ([#4791](https://github.com/react-navigation/react-navigation/pull/4791))
+
+## [2.9.3] - [2018-07-26](https://github.com/react-navigation/react-navigation/releases/tag/2.9.3)
+### Added
+- Add `NavigationTestUtils` which can be imported by path to be used with jest snapshot testing.
+
+## [2.9.2] - [2018-07-25](https://github.com/react-navigation/react-navigation/releases/tag/2.9.2)
+### Added
+- Export `StackViewTransitionConfigs` to allow you to extend default config in custom transition configs. [#4761](https://github.com/react-navigation/react-navigation/pull/4761)
+
+### Fixed
+- Error when building with haul: ref to pathToRegexp.compile. [#4658](https://github.com/react-navigation/react-navigation/pull/4658).
+
+## [2.9.1] - [2018-07-24](https://github.com/react-navigation/react-navigation/releases/tag/2.9.1)
+### Fixed
+- Incorrect parameters passed to title offset calculation led to bug in header layout when no right component (https://github.com/react-navigation/react-navigation/issues/4754)
+
+### Fixed
+- Typo in Header transition preset check.
+
+## [2.9.0] - [2018-07-20](https://github.com/react-navigation/react-navigation/releases/tag/2.9.0)
+### Added
+- `headerLayoutPreset: 'center' | 'left'` to provide an easy solution for [questions like this](https://github.com/react-navigation/react-navigation/issues/4615).
+- `headerBackTitleEnabled` - this configuration option for stack navigator allows you to force back button titles to either be rendered or not (if you disagree with defaults for your platform and layout preset).
+
+### Fixed
+- Android back button ripple is now appropriately sized (fixes [#3955](https://github.com/react-navigation/react-navigation/issues/3955)).
+- Respect header background color on container (fixes edge case where user depended on displaying content that was rendered behind the navigator, this particular behavior should not be depended on and may break in the future, but this change is still useful regardless).
+
+
+## [2.8.0] - [2018-07-19](https://github.com/react-navigation/react-navigation/releases/tag/2.8.0)
+### Added
+- `headerLeftContainerStyle`, `headerTitleContainerStyle`, and `headerRightContainerStyle` are exposed on `navigationOptions`. These properties allow you to customize the style of the container of `headerLeft`, `headerTitle` and `headerRight` components.
+
+### Fixed
+- Fixed memory leaks in `createNavigator`: [closure scope leak](https://github.com/react-navigation/react-navigation/commit/1a765562905e93bbae0262dd20c2688221c999e8), and [clean up old descriptors](https://github.com/react-navigation/react-navigation/commit/93642e16e7ff029586b68ee732ec790504ee4862).
+
+## [2.7.0] - [2018-07-17](https://github.com/react-navigation/react-navigation/releases/tag/2.7.0)
+### Added
+- The enableURLHandling prop on the top level navigator component allows you to disable deep linking handling. Currently it is always enabled. To disable it, `<RootNavigator enableURLHandling={false} />`
+
+### 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.
+
+### Fixed
+- Support headerLeft component for the first screen in a stack (#4608).
+- Removed bottomBorder when `headerTransparent` is set to true.
+- Improve empty path and param handling in deep linking (#4671). This fixes issues with deep linking and fully tests the differences between path: '' and path: null. Empty string matches empty paths, and null path will let the child router handle paths at the same level. Also it makes sure that params are not duplicated between path and query when they are serialized with getPathAndParamsForState.
+- Fix onTransitionStart not being invoked when provided in navigator config.(#4100)
+- Rare case when users navigated back and forth quickly with exactly the right timing would cause a crash due to a scene being queued to transition, then clobbered, then attempted to render as a stale scene but without a descriptor. ([commit](https://github.com/react-navigation/react-navigation/commit/cab4d71a5e09188df3f4a294c98779eecb860a78))
+
+## [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.
+
+## [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).
+
+### Fixed
+- Fixed missing header shadow on Android.
+
 ## [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.
@@ -58,7 +171,22 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Changed
 - Improved examples
 
-[Unreleased]: https://github.com/react-navigation/react-navigation/compare/2.6.0...HEAD
+[Unreleased]: https://github.com/react-navigation/react-navigation/compare/2.13.0...HEAD
+[2.13.0]: https://github.com/react-navigation/react-navigation/compare/2.12.1...2.13.0
+[2.12.1]: https://github.com/react-navigation/react-navigation/compare/2.12.0...2.12.1
+[2.12.0]: https://github.com/react-navigation/react-navigation/compare/2.11.2...2.12.0
+[2.11.2]: https://github.com/react-navigation/react-navigation/compare/2.11.1...2.11.2
+[2.11.1]: https://github.com/react-navigation/react-navigation/compare/2.11.0...2.11.1
+[2.11.0]: https://github.com/react-navigation/react-navigation/compare/2.10.0...2.11.0
+[2.10.0]: https://github.com/react-navigation/react-navigation/compare/2.9.3...2.10.0
+[2.9.3]: https://github.com/react-navigation/react-navigation/compare/2.9.2...2.9.3
+[2.9.2]: https://github.com/react-navigation/react-navigation/compare/2.9.1...2.9.2
+[2.9.1]: https://github.com/react-navigation/react-navigation/compare/2.9.0...2.9.1
+[2.9.0]: https://github.com/react-navigation/react-navigation/compare/2.8.0...2.9.0
+[2.8.0]: https://github.com/react-navigation/react-navigation/compare/2.7.0...2.8.0
+[2.7.0]: https://github.com/react-navigation/react-navigation/compare/2.6.2...2.7.0
+[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

NavigationTestUtils.js

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

examples/NavigationPlayground/app.json

@@ -11,8 +11,7 @@
     "splash": {
       "image": "./assets/icons/splash.png"
     },
-    "sdkVersion": "27.0.0",
-    "entryPoint": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
+    "sdkVersion": "28.0.0",
     "assetBundlePatterns": [
       "**/*"
     ],

examples/NavigationPlayground/js/SimpleStack.js

@@ -10,7 +10,7 @@ import type {
 } from 'react-navigation';
 
 import * as React from 'react';
-import { ScrollView, StatusBar } from 'react-native';
+import { Platform, ScrollView, StatusBar } from 'react-native';
 import {
   createStackNavigator,
   SafeAreaView,
@@ -24,6 +24,8 @@ 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,
@@ -133,16 +135,16 @@ class MyHomeScreen extends React.Component<MyHomeScreenProps> {
     this._s3.remove();
   }
   _onWF = a => {
-    console.log('_willFocus HomeScreen', a);
+    DEBUG && console.log('_willFocus HomeScreen', a);
   };
   _onDF = a => {
-    console.log('_didFocus HomeScreen', a);
+    DEBUG && console.log('_didFocus HomeScreen', a);
   };
   _onWB = a => {
-    console.log('_willBlur HomeScreen', a);
+    DEBUG && console.log('_willBlur HomeScreen', a);
   };
   _onDB = a => {
-    console.log('_didBlur HomeScreen', a);
+    DEBUG && console.log('_didBlur HomeScreen', a);
   };
 
   render() {
@@ -177,16 +179,16 @@ class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
     this._s3.remove();
   }
   _onWF = a => {
-    console.log('_willFocus PhotosScreen', a);
+    DEBUG && console.log('_willFocus PhotosScreen', a);
   };
   _onDF = a => {
-    console.log('_didFocus PhotosScreen', a);
+    DEBUG && console.log('_didFocus PhotosScreen', a);
   };
   _onWB = a => {
-    console.log('_willBlur PhotosScreen', a);
+    DEBUG && console.log('_willBlur PhotosScreen', a);
   };
   _onDB = a => {
-    console.log('_didBlur PhotosScreen', a);
+    DEBUG && console.log('_didBlur PhotosScreen', a);
   };
 
   render() {
@@ -231,18 +233,23 @@ MyProfileScreen.navigationOptions = props => {
   };
 };
 
-const SimpleStack = createStackNavigator({
-  Home: {
-    screen: MyHomeScreen,
+const SimpleStack = createStackNavigator(
+  {
+    Home: {
+      screen: MyHomeScreen,
+    },
+    Profile: {
+      path: 'people/:name',
+      screen: MyProfileScreen,
+    },
+    Photos: {
+      path: 'photos/:name',
+      screen: MyPhotosScreen,
+    },
   },
-  Profile: {
-    path: 'people/:name',
-    screen: MyProfileScreen,
-  },
-  Photos: {
-    path: 'photos/:name',
-    screen: MyPhotosScreen,
-  },
-});
+  {
+    // headerLayoutPreset: 'center',
+  }
+);
 
 export default SimpleStack;

examples/NavigationPlayground/js/SimpleTabs.js

@@ -40,10 +40,10 @@ MyHomeScreen.navigationOptions = {
     accessibilityLabel: 'TEST_ID_HOME_ACLBL',
   },
   tabBarLabel: 'Home',
-  tabBarIcon: ({ tintColor, focused }) => (
+  tabBarIcon: ({ tintColor, focused, horizontal }) => (
     <Ionicons
       name={focused ? 'ios-home' : 'ios-home-outline'}
-      size={26}
+      size={horizontal ? 20 : 26}
       style={{ color: tintColor }}
     />
   ),
@@ -60,10 +60,10 @@ class MyPeopleScreen extends React.Component<MyPeopleScreenProps> {
 
   static navigationOptions = {
     tabBarLabel: 'People',
-    tabBarIcon: ({ tintColor, focused }) => (
+    tabBarIcon: ({ tintColor, focused, horizontal }) => (
       <Ionicons
         name={focused ? 'ios-people' : 'ios-people-outline'}
-        size={26}
+        size={horizontal ? 20 : 26}
         style={{ color: tintColor }}
       />
     ),
@@ -100,10 +100,10 @@ class MyChatScreen extends React.Component<MyChatScreenProps> {
 
   static navigationOptions = {
     tabBarLabel: 'Chat',
-    tabBarIcon: ({ tintColor, focused }) => (
+    tabBarIcon: ({ tintColor, focused, horizontal }) => (
       <Ionicons
         name={focused ? 'ios-chatboxes' : 'ios-chatboxes-outline'}
-        size={26}
+        size={horizontal ? 20 : 26}
         style={{ color: tintColor }}
       />
     ),
@@ -135,10 +135,10 @@ const MySettingsScreen = ({ navigation }) => (
 
 MySettingsScreen.navigationOptions = {
   tabBarLabel: 'Settings',
-  tabBarIcon: ({ tintColor, focused }) => (
+  tabBarIcon: ({ tintColor, focused, horizontal }) => (
     <Ionicons
       name={focused ? 'ios-settings' : 'ios-settings-outline'}
-      size={26}
+      size={horizontal ? 20 : 26}
       style={{ color: tintColor }}
     />
   ),

examples/NavigationPlayground/js/StackWithTranslucentHeader.js

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

examples/NavigationPlayground/js/TabsInDrawer.js

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

examples/NavigationPlayground/package.json

@@ -2,23 +2,22 @@
   "name": "NavigationPlayground",
   "version": "0.1.0",
   "private": true,
-  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
+  "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "react-native-scripts start",
-    "eject": "react-native-scripts eject",
-    "android": "react-native-scripts android",
-    "ios": "react-native-scripts ios",
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
     "test": "flow"
   },
   "dependencies": {
-    "expo": "^27.0.0",
+    "expo": "^28.0.0",
     "invariant": "^2.2.4",
     "react": "16.3.1",
     "react-native": "^0.55.0",
     "react-native-iphone-x-helper": "^1.0.2",
     "react-navigation": "link:../..",
     "react-navigation-header-buttons": "^0.0.4",
-    "react-navigation-material-bottom-tabs": "0.1.3",
+    "react-navigation-material-bottom-tabs": "^0.3.0",
     "react-navigation-tabs": "^0.5.1"
   },
   "devDependencies": {
@@ -26,9 +25,8 @@
     "babel-plugin-transform-remove-console": "^6.9.0",
     "flow-bin": "^0.67.0",
     "jest": "^22.1.3",
-    "jest-expo": "^26.0.0",
-    "react-native-scripts": "^1.5.0",
-    "react-test-renderer": "16.3.0-alpha.1"
+    "jest-expo": "^28.0.0",
+    "react-test-renderer": "16.3.1"
   },
   "jest": {
     "preset": "jest-expo",

flow/react-navigation.js

@@ -143,6 +143,14 @@ 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
@@ -157,7 +165,9 @@ declare module 'react-navigation' {
     | NavigationCompleteTransitionAction
     | NavigationOpenDrawerAction
     | NavigationCloseDrawerAction
-    | NavigationToggleDrawerAction;
+    | NavigationToggleDrawerAction
+    | NavigationDrawerOpenedAction
+    | NavigationDrawerClosedAction;
 
   /**
    * NavigationState is a tree of routes for a single navigator, where each
@@ -184,7 +194,7 @@ declare module 'react-navigation' {
     | NavigationLeafRoute
     | NavigationStateRoute;
 
-  declare export type NavigationLeafRoute = {
+  declare export type NavigationLeafRoute = {|
     /**
      * React's key used by some navigators. No need to specify these manually,
      * they will be defined by the router.
@@ -204,10 +214,12 @@ declare module 'react-navigation' {
      * e.g. `{ car_id: 123 }` in a route that displays a car.
      */
     params?: NavigationParams,
-  };
+  |};
 
-  declare export type NavigationStateRoute = NavigationLeafRoute &
-    NavigationState;
+  declare export type NavigationStateRoute = {|
+    ...NavigationLeafRoute,
+    ...$Exact<NavigationState>,
+  |};
 
   /**
    * Router
@@ -392,6 +404,8 @@ declare module 'react-navigation' {
     mode?: 'card' | 'modal',
     headerMode?: HeaderMode,
     headerTransitionPreset?: 'fade-in-place' | 'uikit',
+    headerLayoutPreset?: 'left' | 'center',
+    headerBackTitleVisible?: boolean,
     cardStyle?: ViewStyleProp,
     transitionConfig?: () => TransitionConfig,
     onTransitionStart?: () => void,
@@ -811,6 +825,8 @@ 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,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "2.6.0",
+  "version": "2.13.0",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "repository": {
@@ -22,7 +22,8 @@
     "precommit": "lint-staged"
   },
   "files": [
-    "src"
+    "src",
+    "NavigationTestUtils.js"
   ],
   "peerDependencies": {
     "react": "*",
@@ -30,15 +31,16 @@
   },
   "dependencies": {
     "clamp": "^1.0.1",
-    "create-react-context": "^0.2.1",
+    "create-react-context": "0.2.2",
     "hoist-non-react-statics": "^2.2.0",
     "path-to-regexp": "^1.7.0",
     "query-string": "^6.1.0",
     "react-lifecycles-compat": "^3",
-    "react-native-safe-area-view": "^0.8.0",
+    "react-native-safe-area-view": "^0.9.0",
     "react-navigation-deprecated-tab-navigator": "1.3.0",
-    "react-navigation-drawer": "0.4.3",
-    "react-navigation-tabs": "0.5.1"
+    "react-navigation-drawer": "0.5.0",
+    "react-navigation-stack": "0.3.0",
+    "react-navigation-tabs": "0.7.0"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
@@ -89,7 +91,7 @@
       "<rootDir>/examples/"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator)"
+      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|react-navigation-deprecated-tab-navigator|react-navigation-stack)"
     ]
   },
   "lint-staged": {

src/__tests__/NavigationContainer-test.js

@@ -4,7 +4,9 @@ import { StyleSheet, View } from 'react-native';
 import renderer from 'react-test-renderer';
 
 import NavigationActions from '../NavigationActions';
-import createStackNavigator from '../navigators/createStackNavigator';
+
+// TODO: we should create a dummy navigator here
+import { createStackNavigator } from 'react-navigation-stack';
 import createNavigationContainer, {
   _TESTING_ONLY_reset_container_count,
 } from '../createNavigationContainer';

src/createNavigationContainer.js

@@ -130,7 +130,11 @@ export default function createNavigationContainer(Component) {
     }
 
     _handleOpenURL = ({ url }) => {
-      const parsedUrl = urlToPathAndParams(url, this.props.uriPrefix);
+      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);
@@ -199,11 +203,15 @@ export default function createNavigationContainer(Component) {
       Linking.addEventListener('url', this._handleOpenURL);
 
       // Pull out anything that can impact state
-      const { persistenceKey, uriPrefix } = this.props;
-      const startupStateJSON =
-        persistenceKey && (await AsyncStorage.getItem(persistenceKey));
-      const url = await Linking.getInitialURL();
-      const parsedUrl = url && urlToPathAndParams(url, uriPrefix);
+      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

src/navigators/__tests__/NestedNavigator-test.js

@@ -1,40 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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__/__snapshots__/NestedNavigator-test.js.snap

@@ -1,371 +0,0 @@
-// 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

@@ -1,395 +0,0 @@
-// 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/createContainedStackNavigator.js

@@ -1,9 +0,0 @@
-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/createKeyboardAwareNavigator.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextInput } from 'react-native';
 
-export default Navigator =>
+export default (Navigator, navigatorConfig) =>
   class KeyboardAwareNavigator extends React.Component {
     static router = Navigator.router;
     _previouslyFocusedTextInput = null;
@@ -49,7 +49,9 @@ export default Navigator =>
         }
       }
 
-      this.props.onTransitionStart &&
-        this.props.onTransitionStart(transitionProps, prevTransitionProps);
+      const onTransitionStart =
+        this.props.onTransitionStart || navigatorConfig.onTransitionStart;
+      onTransitionStart &&
+        onTransitionStart(transitionProps, prevTransitionProps);
     };
   };

src/navigators/createNavigator.js

@@ -24,7 +24,7 @@ function createNavigator(NavigatorView, router, navigationConfig) {
         );
       }
 
-      const descriptors = { ...prevState.descriptors };
+      const descriptors = {};
 
       routes.forEach(route => {
         if (
@@ -36,8 +36,10 @@ function createNavigator(NavigatorView, router, navigationConfig) {
           descriptors[route.key] = prevDescriptors[route.key];
           return;
         }
-        const getComponent = () =>
-          router.getComponentForRouteName(route.routeName);
+        const getComponent = router.getComponentForRouteName.bind(
+          null,
+          route.routeName
+        );
         const childNavigation = navigation.getChildNavigation(route.key);
         const options = router.getScreenOptions(childNavigation, screenProps);
         descriptors[route.key] = {

src/navigators/createStackNavigator.js

@@ -1,37 +0,0 @@
-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/react-navigation.js

@@ -16,14 +16,23 @@ module.exports = {
   get createNavigator() {
     return require('./navigators/createNavigator').default;
   },
+  get createKeyboardAwareNavigator() {
+    return require('./navigators/createKeyboardAwareNavigator').default;
+  },
+  get NavigationProvider() {
+    return require('./views/NavigationContext').default.NavigationProvider;
+  },
+  get NavigationConsumer() {
+    return require('./views/NavigationContext').default.NavigationConsumer;
+  },
   get createStackNavigator() {
-    return require('./navigators/createContainedStackNavigator').default;
+    return require('react-navigation-stack').createStackNavigator;
   },
   get StackNavigator() {
     console.warn(
       'The StackNavigator function name is deprecated, please use createStackNavigator instead'
     );
-    return require('./navigators/createContainedStackNavigator').default;
+    return require('react-navigation-stack').createStackNavigator;
   },
   get createSwitchNavigator() {
     return require('./navigators/createContainedSwitchNavigator').default;
@@ -88,16 +97,31 @@ module.exports = {
   get SwitchRouter() {
     return require('./routers/SwitchRouter').default;
   },
+  get createConfigGetter() {
+    return require('./routers/createConfigGetter').default;
+  },
+  get getScreenForRouteName() {
+    return require('./routers/getScreenForRouteName').default;
+  },
+  get validateRouteConfigMap() {
+    return require('./routers/validateRouteConfigMap').default;
+  },
+  get pathUtils() {
+    return require('./routers/pathUtils').default;
+  },
 
   // Views
   get Transitioner() {
-    return require('./views/Transitioner').default;
+    return require('react-navigation-stack').Transitioner;
   },
   get StackView() {
-    return require('./views/StackView/StackView').default;
+    return require('react-navigation-stack').StackView;
   },
   get StackViewCard() {
-    return require('./views/StackView/StackViewCard').default;
+    return require('react-navigation-stack').StackViewCard;
+  },
+  get StackViewTransitionConfigs() {
+    return require('react-navigation-stack').StackViewTransitionConfigs;
   },
   get SafeAreaView() {
     return require('react-native-safe-area-view').default;
@@ -111,13 +135,16 @@ module.exports = {
 
   // Header
   get Header() {
-    return require('./views/Header/Header').default;
+    return require('react-navigation-stack').Header;
   },
   get HeaderTitle() {
-    return require('./views/Header/HeaderTitle').default;
+    return require('react-navigation-stack').HeaderTitle;
   },
   get HeaderBackButton() {
-    return require('./views/Header/HeaderBackButton').default;
+    return require('react-navigation-stack').HeaderBackButton;
+  },
+  get HeaderStyleInterpolator() {
+    return require('react-navigation-stack').HeaderStyleInterpolator;
   },
 
   // DrawerView

src/routers/StackRouter.js

@@ -107,13 +107,7 @@ export default (routeConfigs, stackConfig = {}) => {
   const {
     getPathAndParamsForRoute,
     getActionForPathAndParams,
-  } = createPathParser(
-    childRouters,
-    routeConfigs,
-    stackConfig.paths,
-    initialRouteName,
-    initialRouteParams
-  );
+  } = createPathParser(childRouters, routeConfigs, stackConfig.paths);
 
   return {
     childRouters,
@@ -397,7 +391,15 @@ export default (routeConfigs, stackConfig = {}) => {
 
       // Handle replace action
       if (action.type === StackActions.REPLACE) {
-        const routeIndex = state.routes.findIndex(r => r.key === action.key);
+        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];

src/routers/SwitchRouter.js

@@ -47,13 +47,7 @@ export default (routeConfigs, config = {}) => {
   const {
     getPathAndParamsForRoute,
     getActionForPathAndParams,
-  } = createPathParser(
-    childRouters,
-    routeConfigs,
-    config.paths,
-    initialRouteName,
-    initialRouteParams
-  );
+  } = createPathParser(childRouters, routeConfigs, config.paths);
 
   if (initialRouteIndex === -1) {
     throw new Error(

src/routers/__tests__/PathHandling-test.js

@@ -13,50 +13,50 @@ beforeEach(() => {
   _TESTING_ONLY_normalize_keys();
 });
 
-const ListScreen = () => <div />;
+const performRouterTest = createTestRouter => {
+  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,
+  const ProfileNavigator = () => <div />;
+  ProfileNavigator.router = StackRouter({
+    list: {
+      path: 'list/:id',
+      screen: ListScreen,
     },
   });
-  render() {
-    return <div />;
+
+  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 PersonScreen = () => <div />;
 
-const performRouterTest = createTestRouter => {
   const testRouter = createTestRouter({
     main: {
       screen: MainNavigator,
@@ -78,7 +78,7 @@ const performRouterTest = createTestRouter => {
     },
   });
 
-  test('Handles empty URIs', () => {
+  test('Handles empty URIs with empty action', () => {
     const router = createTestRouter(
       {
         Foo: {
@@ -91,12 +91,8 @@ const performRouterTest = createTestRouter => {
       { 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(action).toEqual(null);
+    const state = router.getStateForAction(action || NavigationActions.init());
     expect(state.routes[state.index]).toEqual(
       expect.objectContaining({
         routeName: 'Bar',
@@ -105,6 +101,244 @@ const performRouterTest = createTestRouter => {
     );
   });
 
+  test('Handles paths with several params', () => {
+    const router = createTestRouter({
+      Person: {
+        path: 'people/:person',
+        screen: () => <div />,
+      },
+      Task: {
+        path: 'people/:person/tasks/:task',
+        screen: () => <div />,
+      },
+      ThingA: {
+        path: 'things/:good',
+        screen: () => <div />,
+      },
+      Thing: {
+        path: 'things/:good/:thing',
+        screen: () => <div />,
+      },
+    });
+    const action = router.getActionForPathAndParams(
+      'people/brent/tasks/everything'
+    );
+    expect(action).toEqual({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Task',
+      params: { person: 'brent', task: 'everything' },
+    });
+
+    const action1 = router.getActionForPathAndParams('people/lucy');
+    expect(action1).toEqual({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Person',
+      params: { person: 'lucy' },
+    });
+
+    const action2 = router.getActionForPathAndParams('things/foo/bar');
+    expect(action2).toEqual({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Thing',
+      params: { good: 'foo', thing: 'bar' },
+    });
+
+    const action3 = router.getActionForPathAndParams('things/foo');
+    expect(action3).toEqual({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'ThingA',
+      params: { good: 'foo' },
+    });
+  });
+
+  test('Handles empty path configuration', () => {
+    const router = createTestRouter({
+      Foo: {
+        screen: () => <div />,
+      },
+      Bar: {
+        screen: () => <div />,
+        path: '',
+      },
+    });
+    const action = router.getActionForPathAndParams('');
+    expect(action).toEqual({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Bar',
+      params: {},
+    });
+  });
+
+  test('Handles wildcard path configuration', () => {
+    const router = createTestRouter({
+      Foo: {
+        screen: () => <div />,
+      },
+      Bar: {
+        screen: () => <div />,
+        path: ':something',
+      },
+    });
+    const action = router.getActionForPathAndParams('');
+    expect(action).toEqual(null);
+
+    const action1 = router.getActionForPathAndParams('Foo');
+    expect(action1).toEqual({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Foo',
+      params: {},
+    });
+    const action2 = router.getActionForPathAndParams('asdf');
+    expect(action2).toEqual({
+      type: NavigationActions.NAVIGATE,
+      routeName: 'Bar',
+      params: { something: 'asdf' },
+    });
+  });
+
+  test('Null path behavior', () => {
+    const ScreenA = () => <div />;
+    const router = createTestRouter({
+      Bar: {
+        screen: ScreenA,
+      },
+      Foo: {
+        path: null,
+        screen: ScreenA,
+      },
+      Baz: {
+        path: '',
+        screen: ScreenA,
+      },
+    });
+    const action0 = router.getActionForPathAndParams('test/random', {});
+    expect(action0).toBe(null);
+
+    const action1 = router.getActionForPathAndParams('', {});
+    expect(action1.routeName).toBe('Baz');
+    const state1 = router.getStateForAction(action1);
+    expect(state1.routes[state1.index].routeName).toBe('Baz');
+  });
+
+  test('Multiple null path sub routers path behavior', () => {
+    const ScreenA = () => <div />;
+    const ScreenB = () => <div />;
+    ScreenB.router = createTestRouter({
+      Foo: ScreenA,
+    });
+    const ScreenC = () => <div />;
+    ScreenC.router = createTestRouter({
+      Bar: {
+        path: 'bar/:id',
+        screen: ScreenA,
+      },
+      Empty: {
+        path: '',
+        screen: ScreenA,
+      },
+    });
+    const router = createTestRouter({
+      A: {
+        screen: ScreenA,
+      },
+      B: {
+        path: null,
+        screen: ScreenB,
+      },
+      C: {
+        path: null,
+        screen: ScreenC,
+      },
+    });
+    const action0 = router.getActionForPathAndParams('Foo', {});
+    expect(action0.routeName).toBe('B');
+    expect(action0.action.routeName).toBe('Foo');
+
+    const action1 = router.getActionForPathAndParams('', {});
+    expect(action1.routeName).toBe('C');
+    expect(action1.action.routeName).toBe('Empty');
+
+    const action2 = router.getActionForPathAndParams('A', {});
+    expect(action2.routeName).toBe('A');
+
+    const action3 = router.getActionForPathAndParams('bar/asdf', {});
+    expect(action3.routeName).toBe('C');
+    expect(action3.action.routeName).toBe('Bar');
+    expect(action3.action.params.id).toBe('asdf');
+  });
+
+  test('Null and empty string path sub routers behavior', () => {
+    const ScreenA = () => <div />;
+    const ScreenB = () => <div />;
+    ScreenB.router = createTestRouter({
+      Foo: ScreenA,
+      Baz: {
+        screen: ScreenA,
+        path: '',
+      },
+    });
+    const ScreenC = () => <div />;
+    ScreenC.router = createTestRouter({
+      Boo: ScreenA,
+      Bar: ScreenA,
+      Baz: {
+        screen: ScreenA,
+        path: '',
+      },
+    });
+    const router = createTestRouter({
+      B: {
+        path: null,
+        screen: ScreenB,
+      },
+      C: {
+        path: '',
+        screen: ScreenC,
+      },
+    });
+    const action0 = router.getActionForPathAndParams('', {});
+    expect(action0.routeName).toBe('C');
+    expect(action0.action.routeName).toBe('Baz');
+
+    const action1 = router.getActionForPathAndParams('Foo', {});
+    expect(action1.routeName).toBe('B');
+    expect(action1.action.routeName).toBe('Foo');
+
+    const action2 = router.getActionForPathAndParams('Bar', {});
+    expect(action2.routeName).toBe('C');
+    expect(action2.action.routeName).toBe('Bar');
+
+    const action3 = router.getActionForPathAndParams('unknown', {});
+    expect(action3).toBe(null);
+  });
+
+  test('Empty path acts as wildcard for nested router', () => {
+    const ScreenA = () => <div />;
+    const Foo = () => <div />;
+    const ScreenC = () => <div />;
+    ScreenC.router = createTestRouter({
+      Boo: ScreenA,
+      Bar: ScreenA,
+    });
+    Foo.router = createTestRouter({
+      Quo: ScreenA,
+      Qux: {
+        screen: ScreenC,
+        path: '',
+      },
+    });
+    const router = createTestRouter({
+      Bar: {
+        screen: ScreenA,
+      },
+      Foo,
+    });
+    const action0 = router.getActionForPathAndParams('Foo/Bar', {});
+    expect(action0.routeName).toBe('Foo');
+    expect(action0.action.routeName).toBe('Qux');
+    expect(action0.action.action.routeName).toBe('Bar');
+  });
+
   test('Gets deep path with pure wildcard match', () => {
     const ScreenA = () => <div />;
     const ScreenB = () => <div />;
@@ -153,7 +387,6 @@ const performRouterTest = createTestRouter => {
       const { path, params } = router.getPathAndParamsForState(state);
       expect(path).toEqual('baz/321');
       expect(params.id).toEqual('123');
-      expect(params.bazId).toEqual('321');
     }
 
     {
@@ -208,6 +441,31 @@ const performRouterTest = createTestRouter => {
     });
   });
 
+  test('URI encoded path param gets parsed and correctly printed', () => {
+    const router = createTestRouter({
+      main: {
+        screen: () => <div />,
+      },
+      person: {
+        path: 'people/:name',
+        screen: () => <div />,
+      },
+    });
+
+    const action = testRouter.getActionForPathAndParams('people/Henry%20L');
+    expect(action).toEqual({
+      routeName: 'person',
+      params: {
+        id: 'Henry L',
+      },
+      type: NavigationActions.NAVIGATE,
+    });
+    const s = testRouter.getStateForAction(action);
+    const out = testRouter.getPathAndParamsForState(s);
+    expect(out.path).toEqual('people/Henry%20L');
+    expect(out.params).toEqual({});
+  });
+
   test('Querystring params get passed to nested deep link', () => {
     const action = testRouter.getActionForPathAndParams(
       'main/p/4/list/10259959195',
@@ -289,6 +547,24 @@ const performRouterTest = createTestRouter => {
     expect(action.type).toEqual(NavigationActions.NAVIGATE);
     expect(action.routeName).toEqual('baz');
   });
+
+  test('paths option set as null on router overrides path from route config', () => {
+    const router = createTestRouter(
+      {
+        main: {
+          screen: MainNavigator,
+        },
+        baz: {
+          path: 'bazPath',
+          screen: FooNavigator,
+        },
+      },
+      { paths: { baz: null } }
+    );
+    const action = router.getActionForPathAndParams('b/noBaz', {});
+    expect(action.type).toEqual(NavigationActions.NAVIGATE);
+    expect(action.routeName).toEqual('baz');
+  });
 };
 
 describe('Path handling for stack router', () => {
@@ -297,3 +573,24 @@ describe('Path handling for stack router', () => {
 describe('Path handling for switch router', () => {
   performRouterTest(SwitchRouter);
 });
+
+test('Handles nested switch routers', () => {
+  const AScreen = () => <div />;
+  const DocsNavigator = () => <div />;
+  DocsNavigator.router = SwitchRouter({
+    A: AScreen,
+    B: AScreen,
+    C: AScreen,
+  });
+  DocsNavigator.path = 'docs';
+  const router = SwitchRouter({
+    Docs: DocsNavigator,
+    D: AScreen,
+  });
+  const action = router.getActionForPathAndParams('docs/B', {});
+
+  expect(action.type).toEqual(NavigationActions.NAVIGATE);
+  expect(action.routeName).toEqual('Docs');
+  expect(action.action.type).toEqual(NavigationActions.NAVIGATE);
+  expect(action.action.routeName).toEqual('B');
+});

src/routers/__tests__/StackRouter-test.js

@@ -319,7 +319,7 @@ describe('StackRouter', () => {
   });
 
   test('Correctly returns action chain for partially matched path', () => {
-    const uri = 'auth/login/2';
+    const uri = 'auth/login';
     const action = TestStackRouter.getActionForPathAndParams(uri);
     expect(action).toEqual({
       type: NavigationActions.NAVIGATE,
@@ -970,6 +970,77 @@ describe('StackRouter', () => {
     expect(replacedState2.routes[0].routeName).toEqual('bar');
   });
 
+  test('Replace action returns most recent route if no key is provided', () => {
+    const GrandChildNavigator = () => <div />;
+    GrandChildNavigator.router = StackRouter({
+      Quux: { screen: () => <div /> },
+      Corge: { screen: () => <div /> },
+      Grault: { screen: () => <div /> },
+    });
+
+    const ChildNavigator = () => <div />;
+    ChildNavigator.router = StackRouter({
+      Baz: { screen: () => <div /> },
+      Woo: { screen: () => <div /> },
+      Qux: { screen: GrandChildNavigator },
+    });
+
+    const router = StackRouter({
+      Foo: { screen: () => <div /> },
+      Bar: { screen: ChildNavigator },
+    });
+
+    const state = router.getStateForAction({ type: NavigationActions.INIT });
+    const state2 = router.getStateForAction(
+      {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'Bar',
+      },
+      state
+    );
+    const state3 = router.getStateForAction(
+      {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'Qux',
+      },
+      state2
+    );
+    const state4 = router.getStateForAction(
+      {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'Corge',
+      },
+      state3
+    );
+    const state5 = router.getStateForAction(
+      {
+        type: NavigationActions.NAVIGATE,
+        routeName: 'Grault',
+      },
+      state4
+    );
+
+    const replacedState = router.getStateForAction(
+      StackActions.replace({
+        routeName: 'Woo',
+        params: { meaning: 42 },
+      }),
+      state5
+    );
+
+    const originalCurrentScreen = state5.routes[1].routes[1].routes[2];
+    const replacedCurrentScreen = replacedState.routes[1].routes[1].routes[2];
+
+    expect(replacedState.routes[1].routes[1].index).toEqual(2);
+    expect(replacedState.routes[1].routes[1].routes.length).toEqual(3);
+    expect(replacedCurrentScreen.key).not.toEqual(originalCurrentScreen.key);
+    expect(replacedCurrentScreen.routeName).not.toEqual(
+      originalCurrentScreen.routeName
+    );
+    expect(replacedCurrentScreen.routeName).toEqual('Woo');
+    expect(replacedCurrentScreen.params.meaning).toEqual(42);
+  });
+
   test('Handles push transition logic with completion action', () => {
     const FooScreen = () => <div />;
     const BarScreen = () => <div />;
@@ -1135,8 +1206,7 @@ describe('StackRouter', () => {
     };
     const { path, params } = router.getPathAndParamsForState(state);
     expect(path).toEqual('f/123/baz/321');
-    expect(params.id).toEqual('123');
-    expect(params.bazId).toEqual('321');
+    expect(params).toEqual({});
   });
 
   test('Handle goBack identified by key', () => {

src/routers/pathUtils.js

@@ -1,5 +1,7 @@
-import pathToRegexp from 'path-to-regexp';
+import pathToRegexp, { compile } from 'path-to-regexp';
 import NavigationActions from '../NavigationActions';
+import invariant from '../utils/invariant';
+
 const queryString = require('query-string');
 
 function isEmpty(obj) {
@@ -10,6 +12,37 @@ function isEmpty(obj) {
   return true;
 }
 
+const getParamsFromPath = (inputParams, pathMatch, pathMatchKeys) => {
+  const params = pathMatch.slice(1).reduce(
+    // iterate over matched path params
+    (paramsOut, matchResult, i) => {
+      const key = pathMatchKeys[i];
+      if (!key || key.asterisk) {
+        return paramsOut;
+      }
+      const paramName = key.name;
+
+      let decodedMatchResult;
+      try {
+        decodedMatchResult = decodeURIComponent(matchResult);
+      } catch (e) {
+        // ignore `URIError: malformed URI`
+      }
+
+      paramsOut[paramName] = decodedMatchResult || matchResult;
+      return paramsOut;
+    },
+    {
+      // start with the input(query string) params, which will get overridden by path params
+      ...inputParams,
+    }
+  );
+  return params;
+};
+const getRestOfPath = (pathMatch, pathMatchKeys) => {
+  const rest = pathMatch[pathMatchKeys.findIndex(k => k.asterisk) + 1];
+  return rest;
+};
 export const urlToPathAndParams = (url, uriPrefix) => {
   const searchMatch = url.match(/^(.*)\?(.*)$/);
   const params = searchMatch ? queryString.parse(searchMatch[2]) : {};
@@ -34,139 +67,157 @@ export const urlToPathAndParams = (url, uriPrefix) => {
 export const createPathParser = (
   childRouters,
   routeConfigs,
-  pathConfigs = {},
-  initialRouteName,
-  initialRouteParams
+  pathConfigs = {}
 ) => {
   const pathsByRouteNames = {};
   let paths = [];
 
-  // Build paths for each route
+  // Build pathsByRouteNames, which includes a regex to match paths for each route. Keep in mind, the regex will pass for the route and all child routes. The code that uses pathsByRouteNames will need to also verify that the child router produces an action, in the case of isPathMatchable false (a null path).
   Object.keys(childRouters).forEach(routeName => {
-    let pathPattern = pathConfigs[routeName] || routeConfigs[routeName].path;
-    let matchExact = !!pathPattern && !childRouters[routeName];
+    let pathPattern;
+
+    // First check for paths on the router, then check the route config
+    if (pathConfigs[routeName] !== undefined) {
+      pathPattern = pathConfigs[routeName];
+    } else {
+      pathPattern = routeConfigs[routeName].path;
+    }
+
     if (pathPattern === undefined) {
+      // If the user hasn't specified a path at all, then we assume the routeName is an appropriate path
       pathPattern = routeName;
     }
-    const keys = [];
-    let re, toPath, priority;
-    if (typeof pathPattern === 'string') {
-      // pathPattern may be either a string or a regexp object according to path-to-regexp docs.
-      re = pathToRegexp(pathPattern, keys);
-      toPath = pathToRegexp.compile(pathPattern);
-      priority = 0;
-    } else if (pathPattern === null) {
-      // for wildcard match
-      re = pathToRegexp('*', keys);
-      toPath = () => '';
-      matchExact = true;
-      priority = -1;
-    }
-    if (!matchExact) {
-      const wildcardRe = pathToRegexp(`${pathPattern}/*`, keys);
-      re = new RegExp(`(?:${re.source})|(?:${wildcardRe.source})`);
-    }
-    pathsByRouteNames[routeName] = { re, keys, toPath, priority, pathPattern };
+
+    invariant(
+      pathPattern === null || typeof pathPattern === 'string',
+      `Route path for ${routeName} must be specified as a string, or null.`
+    );
+
+    // the path may be specified as null, which is similar to empty string because it allows child routers to handle the action, but it will not match empty paths
+    const isPathMatchable = pathPattern !== null;
+    // pathPattern is a string with inline params, such as people/:id/*foo
+    const exactReKeys = [];
+    const exactRe = isPathMatchable
+      ? pathToRegexp(pathPattern, exactReKeys)
+      : null;
+    const extendedPathReKeys = [];
+    const isWildcard = pathPattern === '' || !isPathMatchable;
+    const extendedPathRe = pathToRegexp(
+      isWildcard ? '*' : `${pathPattern}/*`,
+      extendedPathReKeys
+    );
+
+    pathsByRouteNames[routeName] = {
+      exactRe,
+      exactReKeys,
+      extendedPathRe,
+      extendedPathReKeys,
+      isWildcard,
+      toPath: pathPattern === null ? () => '' : compile(pathPattern),
+    };
   });
 
   paths = Object.entries(pathsByRouteNames);
-  paths.sort((a, b) => b[1].priority - a[1].priority);
 
-  const getActionForPathAndParams = (pathToResolve, inputParams = {}) => {
-    // If the path is empty (null or empty string)
-    // just return the initial route action
-    if (!pathToResolve) {
-      return NavigationActions.navigate({
-        routeName: initialRouteName,
-        params: { ...inputParams, ...initialRouteParams },
-      });
-    }
+  const getActionForPathAndParams = (pathToResolve = '', inputParams = {}) => {
+    // Attempt to match `pathToResolve` with a route in this router's routeConfigs, deferring to child routers
 
-    // Attempt to match `pathToResolve` with a route in this router's
-    // routeConfigs
-    let matchedRouteName;
-    let pathMatch;
-    let pathMatchKeys;
+    let matchedAction = null;
 
     // eslint-disable-next-line no-restricted-syntax
     for (const [routeName, path] of paths) {
-      const { re, keys } = path;
-      pathMatch = re.exec(pathToResolve);
-      if (pathMatch && pathMatch.length) {
-        pathMatchKeys = keys;
-        matchedRouteName = routeName;
-        break;
-      }
-    }
+      const { exactRe, exactReKeys, extendedPathRe, extendedPathReKeys } = path;
+      const childRouter = childRouters[routeName];
 
-    // We didn't match -- return null to signify no action available
-    if (!matchedRouteName) {
-      return null;
-    }
+      const exactMatch = exactRe && exactRe.exec(pathToResolve);
 
-    // Determine nested actions:
-    // If our matched route for this router is a child router,
-    // get the action for the path AFTER the matched path for this
-    // router
-    let nestedAction;
-    if (childRouters[matchedRouteName]) {
-      nestedAction = childRouters[matchedRouteName].getActionForPathAndParams(
-        pathMatch.slice(pathMatchKeys.length).join('/'),
-        inputParams
-      );
-      if (!nestedAction) {
-        return null;
-      }
-    }
-
-    const params = pathMatch.slice(1).reduce(
-      // iterate over matched path params
-      (paramsOut, matchResult, i) => {
-        const key = pathMatchKeys[i];
-        if (!key || key.asterisk) {
-          return paramsOut;
-        }
-        const paramName = key.name;
-
-        let decodedMatchResult;
-        try {
-          decodedMatchResult = decodeURIComponent(matchResult);
-        } catch (e) {
-          // ignore `URIError: malformed URI`
+      if (exactMatch && exactMatch.length) {
+        const extendedMatch =
+          extendedPathRe && extendedPathRe.exec(pathToResolve);
+        let childAction = null;
+        if (extendedMatch && childRouter) {
+          const restOfPath = getRestOfPath(extendedMatch, extendedPathReKeys);
+          childAction = childRouter.getActionForPathAndParams(
+            restOfPath,
+            inputParams
+          );
         }
 
-        paramsOut[paramName] = decodedMatchResult || matchResult;
-        return paramsOut;
-      },
-      {
-        // start with the input(query string) params, which will get overridden by path params
-        ...inputParams,
+        return NavigationActions.navigate({
+          routeName,
+          params: getParamsFromPath(inputParams, exactMatch, exactReKeys),
+          action: childAction,
+        });
       }
-    );
+    }
 
-    return NavigationActions.navigate({
-      routeName: matchedRouteName,
-      ...(params ? { params } : {}),
-      ...(nestedAction ? { action: nestedAction } : {}),
-    });
+    // eslint-disable-next-line no-restricted-syntax
+    for (const [routeName, path] of paths) {
+      const { extendedPathRe, extendedPathReKeys } = path;
+      const childRouter = childRouters[routeName];
+
+      const extendedMatch =
+        extendedPathRe && extendedPathRe.exec(pathToResolve);
+
+      if (extendedMatch && extendedMatch.length) {
+        const restOfPath = getRestOfPath(extendedMatch, extendedPathReKeys);
+        let childAction = null;
+        if (childRouter) {
+          childAction = childRouter.getActionForPathAndParams(
+            restOfPath,
+            inputParams
+          );
+        }
+        if (!childAction) {
+          continue;
+        }
+        return NavigationActions.navigate({
+          routeName,
+          params: getParamsFromPath(
+            inputParams,
+            extendedMatch,
+            extendedPathReKeys
+          ),
+          action: childAction,
+        });
+      }
+    }
+
+    return null;
   };
   const getPathAndParamsForRoute = route => {
     const { routeName, params } = route;
     const childRouter = childRouters[routeName];
-    const subPath = pathsByRouteNames[routeName].toPath(params);
+    const { toPath, exactReKeys } = pathsByRouteNames[routeName];
+    const subPath = toPath(params);
+    const nonPathParams = {};
+    if (params) {
+      Object.keys(params)
+        .filter(paramName => !exactReKeys.find(k => k.name === paramName))
+        .forEach(paramName => {
+          nonPathParams[paramName] = params[paramName];
+        });
+    }
     if (childRouter) {
       // If it has a router it's a navigator.
       // If it doesn't have router it's an ordinary React component.
       const child = childRouter.getPathAndParamsForState(route);
       return {
         path: subPath ? `${subPath}/${child.path}` : child.path,
-        params: child.params ? { ...params, ...child.params } : params,
+        params: child.params
+          ? { ...nonPathParams, ...child.params }
+          : nonPathParams,
       };
     }
     return {
       path: subPath,
-      params,
+      params: nonPathParams,
     };
   };
   return { getActionForPathAndParams, getPathAndParamsForRoute };
 };
+
+export default {
+  getParamsFromPath,
+  createPathParser,
+};

src/views/Header/Header.js

@@ -1,618 +0,0 @@
-import React from 'react';
-
-import {
-  Animated,
-  Dimensions,
-  Image,
-  Platform,
-  StyleSheet,
-  View,
-  I18nManager,
-  ViewPropTypes,
-  MaskedViewIOS,
-} from 'react-native';
-import SafeAreaView from 'react-native-safe-area-view';
-
-import HeaderTitle from './HeaderTitle';
-import HeaderBackButton from './HeaderBackButton';
-import ModularHeaderBackButton from './ModularHeaderBackButton';
-import HeaderStyleInterpolator from './HeaderStyleInterpolator';
-import withOrientation from '../withOrientation';
-
-const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
-const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;
-const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;
-
-const getAppBarHeight = isLandscape => {
-  return Platform.OS === 'ios'
-    ? isLandscape && !Platform.isPad
-      ? 32
-      : 44
-    : 56;
-};
-
-class Header extends React.PureComponent {
-  static defaultProps = {
-    layoutInterpolator: HeaderStyleInterpolator.forLayout,
-    leftInterpolator: HeaderStyleInterpolator.forLeft,
-    leftButtonInterpolator: HeaderStyleInterpolator.forLeftButton,
-    leftLabelInterpolator: HeaderStyleInterpolator.forLeftLabel,
-    titleFromLeftInterpolator: HeaderStyleInterpolator.forCenterFromLeft,
-    titleInterpolator: HeaderStyleInterpolator.forCenter,
-    rightInterpolator: HeaderStyleInterpolator.forRight,
-  };
-
-  static get HEIGHT() {
-    return APPBAR_HEIGHT + STATUSBAR_HEIGHT;
-  }
-
-  state = {
-    widths: {},
-  };
-
-  _getHeaderTitleString(scene) {
-    const options = scene.descriptor.options;
-    if (typeof options.headerTitle === 'string') {
-      return options.headerTitle;
-    }
-
-    if (options.title && typeof options.title !== 'string' && __DEV__) {
-      throw new Error(
-        `Invalid title for route "${
-          scene.route.routeName
-        }" - title must be string or null, instead it was of type ${typeof options.title}`
-      );
-    }
-
-    return options.title;
-  }
-
-  _getLastScene(scene) {
-    return this.props.scenes.find(s => s.index === scene.index - 1);
-  }
-
-  _getBackButtonTitleString(scene) {
-    const lastScene = this._getLastScene(scene);
-    if (!lastScene) {
-      return null;
-    }
-    const { headerBackTitle } = lastScene.descriptor.options;
-    if (headerBackTitle || headerBackTitle === null) {
-      return headerBackTitle;
-    }
-    return this._getHeaderTitleString(lastScene);
-  }
-
-  _getTruncatedBackButtonTitle(scene) {
-    const lastScene = this._getLastScene(scene);
-    if (!lastScene) {
-      return null;
-    }
-    return lastScene.descriptor.options.headerTruncatedBackTitle;
-  }
-
-  _renderTitleComponent = props => {
-    const { options } = props.scene.descriptor;
-    const headerTitle = options.headerTitle;
-    if (React.isValidElement(headerTitle)) {
-      return headerTitle;
-    }
-    const titleString = this._getHeaderTitleString(props.scene);
-
-    const titleStyle = options.headerTitleStyle;
-    const color = options.headerTintColor;
-    const allowFontScaling = options.headerTitleAllowFontScaling;
-
-    // On iOS, width of left/right components depends on the calculated
-    // size of the title.
-    const onLayoutIOS =
-      Platform.OS === 'ios'
-        ? e => {
-            this.setState({
-              widths: {
-                ...this.state.widths,
-                [props.scene.key]: e.nativeEvent.layout.width,
-              },
-            });
-          }
-        : undefined;
-
-    const RenderedHeaderTitle =
-      headerTitle && typeof headerTitle !== 'string'
-        ? headerTitle
-        : HeaderTitle;
-    return (
-      <RenderedHeaderTitle
-        onLayout={onLayoutIOS}
-        allowFontScaling={allowFontScaling == null ? true : allowFontScaling}
-        style={[color ? { color } : null, titleStyle]}
-      >
-        {titleString}
-      </RenderedHeaderTitle>
-    );
-  };
-
-  _renderLeftComponent = props => {
-    const { options } = props.scene.descriptor;
-    if (
-      React.isValidElement(options.headerLeft) ||
-      options.headerLeft === null
-    ) {
-      return options.headerLeft;
-    }
-
-    if (props.scene.index === 0) {
-      return;
-    }
-
-    const backButtonTitle = this._getBackButtonTitleString(props.scene);
-    const truncatedBackButtonTitle = this._getTruncatedBackButtonTitle(
-      props.scene
-    );
-    const width = this.state.widths[props.scene.key]
-      ? (this.props.layout.initWidth - this.state.widths[props.scene.key]) / 2
-      : undefined;
-    const RenderedLeftComponent = options.headerLeft || HeaderBackButton;
-    const goBack = () => {
-      // Go back on next tick because button ripple effect needs to happen on Android
-      requestAnimationFrame(() => {
-        props.scene.descriptor.navigation.goBack(props.scene.descriptor.key);
-      });
-    };
-    return (
-      <RenderedLeftComponent
-        onPress={goBack}
-        pressColorAndroid={options.headerPressColorAndroid}
-        tintColor={options.headerTintColor}
-        backImage={options.headerBackImage}
-        title={backButtonTitle}
-        truncatedTitle={truncatedBackButtonTitle}
-        titleStyle={options.headerBackTitleStyle}
-        width={width}
-      />
-    );
-  };
-
-  _renderModularLeftComponent = (
-    props,
-    ButtonContainerComponent,
-    LabelContainerComponent
-  ) => {
-    const { options, navigation } = props.scene.descriptor;
-    const backButtonTitle = this._getBackButtonTitleString(props.scene);
-    const truncatedBackButtonTitle = this._getTruncatedBackButtonTitle(
-      props.scene
-    );
-    const width = this.state.widths[props.scene.key]
-      ? (this.props.layout.initWidth - this.state.widths[props.scene.key]) / 2
-      : undefined;
-
-    const goBack = () => {
-      // Go back on next tick because button ripple effect needs to happen on Android
-      requestAnimationFrame(() => {
-        navigation.goBack(props.scene.descriptor.key);
-      });
-    };
-
-    return (
-      <ModularHeaderBackButton
-        onPress={goBack}
-        ButtonContainerComponent={ButtonContainerComponent}
-        LabelContainerComponent={LabelContainerComponent}
-        pressColorAndroid={options.headerPressColorAndroid}
-        tintColor={options.headerTintColor}
-        backImage={options.headerBackImage}
-        title={backButtonTitle}
-        truncatedTitle={truncatedBackButtonTitle}
-        titleStyle={options.headerBackTitleStyle}
-        width={width}
-      />
-    );
-  };
-
-  _renderRightComponent = props => {
-    const { headerRight } = props.scene.descriptor.options;
-    return headerRight || null;
-  };
-
-  _renderLeft(props) {
-    const { options } = props.scene.descriptor;
-
-    const { transitionPreset } = this.props;
-
-    // On Android, or if we have a custom header left, or if we have a custom back image, we
-    // do not use the modular header (which is the one that imitates UINavigationController)
-    if (
-      transitionPreset !== 'uikit' ||
-      options.headerBackImage ||
-      options.headerLeft ||
-      options.headerLeft === null
-    ) {
-      return this._renderSubView(
-        props,
-        'left',
-        this._renderLeftComponent,
-        this.props.leftInterpolator
-      );
-    } else {
-      return this._renderModularSubView(
-        props,
-        'left',
-        this._renderModularLeftComponent,
-        this.props.leftLabelInterpolator,
-        this.props.leftButtonInterpolator
-      );
-    }
-  }
-
-  _renderTitle(props, options) {
-    const style = {};
-    const { transitionPreset } = this.props;
-
-    if (Platform.OS === 'android') {
-      if (!options.hasLeftComponent) {
-        style.left = 0;
-      }
-      if (!options.hasRightComponent) {
-        style.right = 0;
-      }
-    } else if (
-      Platform.OS === 'ios' &&
-      !options.hasLeftComponent &&
-      !options.hasRightComponent
-    ) {
-      style.left = 0;
-      style.right = 0;
-    }
-
-    return this._renderSubView(
-      { ...props, style },
-      'title',
-      this._renderTitleComponent,
-      transitionPreset === 'uikit'
-        ? this.props.titleFromLeftInterpolator
-        : this.props.titleInterpolator
-    );
-  }
-
-  _renderRight(props) {
-    return this._renderSubView(
-      props,
-      'right',
-      this._renderRightComponent,
-      this.props.rightInterpolator
-    );
-  }
-
-  _renderModularSubView(
-    props,
-    name,
-    renderer,
-    labelStyleInterpolator,
-    buttonStyleInterpolator
-  ) {
-    const { scene } = props;
-    const { index, isStale, key } = scene;
-
-    // Never render a modular back button on the first screen in a stack.
-    if (index === 0) {
-      return;
-    }
-
-    const offset = this.props.navigation.state.index - index;
-
-    if (Math.abs(offset) > 2) {
-      // Scene is far away from the active scene. Hides it to avoid unnecessary
-      // rendering.
-      return null;
-    }
-
-    const ButtonContainer = ({ children }) => (
-      <Animated.View
-        style={[buttonStyleInterpolator({ ...this.props, ...props })]}
-      >
-        {children}
-      </Animated.View>
-    );
-
-    const LabelContainer = ({ children }) => (
-      <Animated.View
-        style={[labelStyleInterpolator({ ...this.props, ...props })]}
-      >
-        {children}
-      </Animated.View>
-    );
-
-    const subView = renderer(props, ButtonContainer, LabelContainer);
-
-    if (subView === null) {
-      return subView;
-    }
-
-    const pointerEvents = offset !== 0 || isStale ? 'none' : 'box-none';
-
-    return (
-      <View
-        key={`${name}_${key}`}
-        pointerEvents={pointerEvents}
-        style={[styles.item, styles[name], props.style]}
-      >
-        {subView}
-      </View>
-    );
-  }
-
-  _renderSubView(props, name, renderer, styleInterpolator) {
-    const { scene } = props;
-    const { index, isStale, key } = scene;
-
-    const offset = this.props.navigation.state.index - index;
-
-    if (Math.abs(offset) > 2) {
-      // Scene is far away from the active scene. Hides it to avoid unnecessary
-      // rendering.
-      return null;
-    }
-
-    const subView = renderer(props);
-
-    if (subView == null) {
-      return null;
-    }
-
-    const pointerEvents = offset !== 0 || isStale ? 'none' : 'box-none';
-
-    return (
-      <Animated.View
-        pointerEvents={pointerEvents}
-        key={`${name}_${key}`}
-        style={[
-          styles.item,
-          styles[name],
-          props.style,
-          styleInterpolator({
-            // todo: determine if we really need to splat all this.props
-            ...this.props,
-            ...props,
-          }),
-        ]}
-      >
-        {subView}
-      </Animated.View>
-    );
-  }
-
-  _renderHeader(props) {
-    const { options } = props.scene.descriptor;
-    if (options.header === null) {
-      return null;
-    }
-    const left = this._renderLeft(props);
-    const right = this._renderRight(props);
-    const title = this._renderTitle(props, {
-      hasLeftComponent: !!left,
-      hasRightComponent: !!right,
-    });
-
-    const { isLandscape, transitionPreset } = this.props;
-
-    const wrapperProps = {
-      style: styles.header,
-      key: `scene_${props.scene.key}`,
-    };
-
-    if (
-      options.headerLeft ||
-      options.headerBackImage ||
-      Platform.OS !== 'ios' ||
-      transitionPreset !== 'uikit'
-    ) {
-      return (
-        <View {...wrapperProps}>
-          {title}
-          {left}
-          {right}
-        </View>
-      );
-    } else {
-      return (
-        <MaskedViewIOS
-          {...wrapperProps}
-          maskElement={
-            <View style={styles.iconMaskContainer}>
-              <Image
-                source={require('../assets/back-icon-mask.png')}
-                style={styles.iconMask}
-              />
-              <View style={styles.iconMaskFillerRect} />
-            </View>
-          }
-        >
-          {title}
-          {left}
-          {right}
-        </MaskedViewIOS>
-      );
-    }
-  }
-
-  render() {
-    let appBar;
-    const { mode, scene, isLandscape } = this.props;
-
-    if (mode === 'float') {
-      const scenesByIndex = {};
-      this.props.scenes.forEach(scene => {
-        scenesByIndex[scene.index] = scene;
-      });
-      const scenesProps = Object.values(scenesByIndex).map(scene => ({
-        position: this.props.position,
-        progress: this.props.progress,
-        scene,
-      }));
-      appBar = scenesProps.map(this._renderHeader, this);
-    } else {
-      appBar = this._renderHeader({
-        position: new Animated.Value(this.props.scene.index),
-        progress: new Animated.Value(0),
-        scene: this.props.scene,
-      });
-    }
-
-    const { options } = scene.descriptor;
-    const { headerStyle = {} } = options;
-    const headerStyleObj = StyleSheet.flatten(headerStyle);
-    const appBarHeight = getAppBarHeight(isLandscape);
-
-    const {
-      alignItems,
-      justifyContent,
-      flex,
-      flexDirection,
-      flexGrow,
-      flexShrink,
-      flexBasis,
-      flexWrap,
-      ...safeHeaderStyle
-    } = headerStyleObj;
-
-    if (__DEV__) {
-      warnIfHeaderStyleDefined(alignItems, 'alignItems');
-      warnIfHeaderStyleDefined(justifyContent, 'justifyContent');
-      warnIfHeaderStyleDefined(flex, 'flex');
-      warnIfHeaderStyleDefined(flexDirection, 'flexDirection');
-      warnIfHeaderStyleDefined(flexGrow, 'flexGrow');
-      warnIfHeaderStyleDefined(flexShrink, 'flexShrink');
-      warnIfHeaderStyleDefined(flexBasis, 'flexBasis');
-      warnIfHeaderStyleDefined(flexWrap, 'flexWrap');
-    }
-
-    // TODO: warn if any unsafe styles are provided
-    const containerStyles = [
-      options.headerTransparent
-        ? styles.transparentContainer
-        : styles.container,
-      { height: appBarHeight },
-      safeHeaderStyle,
-    ];
-
-    const { headerForceInset } = options;
-    const forceInset = headerForceInset || { top: 'always', bottom: 'never' };
-
-    return (
-      <Animated.View
-        style={[
-          this.props.layoutInterpolator(this.props),
-          { backgroundColor: DEFAULT_BACKGROUND_COLOR },
-        ]}
-      >
-        <SafeAreaView forceInset={forceInset} style={containerStyles}>
-          <View style={StyleSheet.absoluteFill}>
-            {options.headerBackground}
-          </View>
-          <View style={styles.flexOne}>{appBar}</View>
-        </SafeAreaView>
-      </Animated.View>
-    );
-  }
-}
-
-function warnIfHeaderStyleDefined(value, styleProp) {
-  if (value !== undefined) {
-    console.warn(
-      `${styleProp} was given a value of ${value}, this has no effect on headerStyle.`
-    );
-  }
-}
-
-let platformContainerStyles;
-if (Platform.OS === 'ios') {
-  platformContainerStyles = {
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#A7A7AA',
-  };
-} else {
-  platformContainerStyles = {
-    shadowColor: 'black',
-    shadowOpacity: 0.1,
-    shadowRadius: StyleSheet.hairlineWidth,
-    shadowOffset: {
-      height: StyleSheet.hairlineWidth,
-    },
-    elevation: 4,
-  };
-}
-
-const DEFAULT_BACKGROUND_COLOR = Platform.OS === 'ios' ? '#F7F7F7' : '#FFF';
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: DEFAULT_BACKGROUND_COLOR,
-    ...platformContainerStyles,
-  },
-  transparentContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    ...platformContainerStyles,
-  },
-  header: {
-    ...StyleSheet.absoluteFillObject,
-    flexDirection: 'row',
-  },
-  item: {
-    backgroundColor: 'transparent',
-  },
-  iconMaskContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  iconMaskFillerRect: {
-    flex: 1,
-    backgroundColor: '#d8d8d8',
-    marginLeft: -3,
-  },
-  iconMask: {
-    // These are mostly the same as the icon in ModularHeaderBackButton
-    height: 21,
-    width: 12,
-    marginLeft: 9,
-    marginTop: -0.5, // resizes down to 20.5
-    alignSelf: 'center',
-    resizeMode: 'contain',
-    transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
-  },
-  title: {
-    bottom: 0,
-    top: 0,
-    left: TITLE_OFFSET,
-    right: TITLE_OFFSET,
-    position: 'absolute',
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: Platform.OS === 'ios' ? 'center' : 'flex-start',
-  },
-  left: {
-    left: 0,
-    bottom: 0,
-    top: 0,
-    position: 'absolute',
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  right: {
-    right: 0,
-    bottom: 0,
-    top: 0,
-    position: 'absolute',
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  flexOne: {
-    flex: 1,
-  },
-});
-
-export default withOrientation(Header);

src/views/Header/HeaderBackButton.js

@@ -1,152 +0,0 @@
-import React from 'react';
-import {
-  I18nManager,
-  Image,
-  Text,
-  View,
-  Platform,
-  StyleSheet,
-} from 'react-native';
-
-import TouchableItem from '../TouchableItem';
-
-const defaultBackImage = require('../assets/back-icon.png');
-
-class HeaderBackButton extends React.PureComponent {
-  static defaultProps = {
-    pressColorAndroid: 'rgba(0, 0, 0, .32)',
-    tintColor: Platform.select({
-      ios: '#037aff',
-    }),
-    truncatedTitle: 'Back',
-  };
-
-  state = {};
-
-  _onTextLayout = e => {
-    if (this.state.initialTextWidth) {
-      return;
-    }
-    this.setState({
-      initialTextWidth: e.nativeEvent.layout.x + e.nativeEvent.layout.width,
-    });
-  };
-
-  _renderBackImage() {
-    const { backImage, title, tintColor } = this.props;
-
-    let BackImage;
-    let props;
-
-    if (React.isValidElement(backImage)) {
-      return backImage;
-    } else if (backImage) {
-      BackImage = backImage;
-      props = {
-        tintColor,
-        title,
-      };
-    } else {
-      BackImage = Image;
-      props = {
-        style: [
-          styles.icon,
-          !!title && styles.iconWithTitle,
-          !!tintColor && { tintColor },
-        ],
-        source: defaultBackImage,
-      };
-    }
-
-    return <BackImage {...props} />;
-  }
-
-  render() {
-    const {
-      onPress,
-      pressColorAndroid,
-      width,
-      title,
-      titleStyle,
-      tintColor,
-      truncatedTitle,
-    } = this.props;
-
-    const renderTruncated =
-      this.state.initialTextWidth && width
-        ? this.state.initialTextWidth > width
-        : false;
-
-    const backButtonTitle = renderTruncated ? truncatedTitle : title;
-
-    return (
-      <TouchableItem
-        accessibilityComponentType="button"
-        accessibilityLabel={backButtonTitle}
-        accessibilityTraits="button"
-        testID="header-back"
-        delayPressIn={0}
-        onPress={onPress}
-        pressColor={pressColorAndroid}
-        style={styles.container}
-        borderless
-      >
-        <View style={styles.container}>
-          {this._renderBackImage()}
-          {Platform.OS === 'ios' &&
-            typeof backButtonTitle === 'string' && (
-              <Text
-                onLayout={this._onTextLayout}
-                style={[
-                  styles.title,
-                  !!tintColor && { color: tintColor },
-                  titleStyle,
-                ]}
-                numberOfLines={1}
-              >
-                {backButtonTitle}
-              </Text>
-            )}
-        </View>
-      </TouchableItem>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    backgroundColor: 'transparent',
-  },
-  title: {
-    fontSize: 17,
-    paddingRight: 10,
-  },
-  icon:
-    Platform.OS === 'ios'
-      ? {
-          height: 21,
-          width: 13,
-          marginLeft: 9,
-          marginRight: 22,
-          marginVertical: 12,
-          resizeMode: 'contain',
-          transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
-        }
-      : {
-          height: 24,
-          width: 24,
-          margin: 16,
-          resizeMode: 'contain',
-          transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
-        },
-  iconWithTitle:
-    Platform.OS === 'ios'
-      ? {
-          marginRight: 6,
-        }
-      : {},
-});
-
-export default HeaderBackButton;

src/views/Header/HeaderStyleInterpolator.js

@@ -1,336 +0,0 @@
-import { Dimensions, I18nManager } from 'react-native';
-import getSceneIndicesForInterpolationInputRange from '../../utils/getSceneIndicesForInterpolationInputRange';
-
-function hasHeader(scene) {
-  if (!scene) {
-    return true;
-  }
-  const { descriptor } = scene;
-  return descriptor.options.header !== null;
-}
-
-const crossFadeInterpolation = (scenes, first, index, last) => ({
-  inputRange: [
-    first,
-    first + 0.001,
-    index - 0.9,
-    index - 0.2,
-    index,
-    last - 0.001,
-    last,
-  ],
-  outputRange: [
-    0,
-    hasHeader(scenes[first]) ? 0 : 1,
-    hasHeader(scenes[first]) ? 0 : 1,
-    hasHeader(scenes[first]) ? 0.3 : 1,
-    hasHeader(scenes[index]) ? 1 : 0,
-    hasHeader(scenes[last]) ? 0 : 1,
-    0,
-  ],
-});
-
-/**
- * Utilities that build the style for the navigation header.
- *
- * +-------------+-------------+-------------+
- * |             |             |             |
- * |    Left     |   Title     |   Right     |
- * |  Component  |  Component  | Component   |
- * |             |             |             |
- * +-------------+-------------+-------------+
- */
-
-function isGoingBack(scenes) {
-  const lastSceneIndexInScenes = scenes.length - 1;
-  return !scenes[lastSceneIndexInScenes].isActive;
-}
-
-function forLayout(props) {
-  const { layout, position, scene, scenes, mode } = props;
-  if (mode !== 'float') {
-    return {};
-  }
-  const isBack = isGoingBack(scenes);
-
-  const interpolate = getSceneIndicesForInterpolationInputRange(props);
-  if (!interpolate) return {};
-
-  const { first, last } = interpolate;
-  const index = scene.index;
-
-  // We really shouldn't render the scene at all until we know the width of the
-  // stack. That said, in every case that I have ever seen, this has just been
-  // the full width of the window. This won't continue to be true if we support
-  // layouts like iPad master-detail. For now, in order to solve
-  // https://github.com/react-navigation/react-navigation/issues/4264, I have
-  // opted for the heuristic that we will use the window width until we have
-  // measured (and they will usually be the same).
-  const width = layout.initWidth || Dimensions.get('window').width;
-
-  // Make sure the header stays hidden when transitioning between 2 screens
-  // with no header.
-  if (
-    (isBack && !hasHeader(scenes[index]) && !hasHeader(scenes[last])) ||
-    (!isBack && !hasHeader(scenes[first]) && !hasHeader(scenes[index]))
-  ) {
-    return {
-      transform: [{ translateX: width }],
-    };
-  }
-
-  const rtlMult = I18nManager.isRTL ? -1 : 1;
-  const translateX = position.interpolate({
-    inputRange: [first, index, last],
-    outputRange: [
-      rtlMult * (hasHeader(scenes[first]) ? 0 : width),
-      rtlMult * (hasHeader(scenes[index]) ? 0 : isBack ? width : -width),
-      rtlMult * (hasHeader(scenes[last]) ? 0 : -width),
-    ],
-  });
-
-  return {
-    transform: [{ translateX }],
-  };
-}
-
-function forLeft(props) {
-  const { position, scene, scenes } = props;
-  const interpolate = getSceneIndicesForInterpolationInputRange(props);
-
-  if (!interpolate) return { opacity: 0 };
-
-  const { first, last } = interpolate;
-  const index = scene.index;
-
-  return {
-    opacity: position.interpolate(
-      crossFadeInterpolation(scenes, first, index, last)
-    ),
-  };
-}
-
-function forCenter(props) {
-  const { position, scene, scenes } = props;
-  const interpolate = getSceneIndicesForInterpolationInputRange(props);
-
-  if (!interpolate) return { opacity: 0 };
-
-  const { first, last } = interpolate;
-  const index = scene.index;
-
-  return {
-    opacity: position.interpolate(
-      crossFadeInterpolation(scenes, first, index, last)
-    ),
-  };
-}
-
-function forRight(props) {
-  const { position, scene, scenes } = props;
-  const interpolate = getSceneIndicesForInterpolationInputRange(props);
-
-  if (!interpolate) return { opacity: 0 };
-  const { first, last } = interpolate;
-  const index = scene.index;
-
-  return {
-    opacity: position.interpolate(
-      crossFadeInterpolation(scenes, first, index, last)
-    ),
-  };
-}
-
-/**
- * iOS UINavigationController style interpolators
- */
-
-function forLeftButton(props) {
-  const { position, scene, scenes } = props;
-  const interpolate = getSceneIndicesForInterpolationInputRange(props);
-
-  if (!interpolate) return { opacity: 0 };
-
-  const { first, last } = interpolate;
-  const index = scene.index;
-
-  // The gist of what we're doing here is animating the left button _normally_ (fast fade)
-  // when both scenes in transition have headers. When the current, next, or previous scene _don't_
-  // have a header, we don't fade the button, and only set it's opacity to 0 at the last moment
-  // of the transition.
-  const inputRange = [
-    first,
-    first + 0.001,
-    first + Math.abs(index - first) / 2,
-    index,
-    last - Math.abs(last - index) / 2,
-    last - 0.001,
-    last,
-  ];
-  const outputRange = [
-    0,
-    hasHeader(scenes[first]) ? 0 : 1,
-    hasHeader(scenes[first]) ? 0.1 : 1,
-    hasHeader(scenes[index]) ? 1 : 0,
-    hasHeader(scenes[last]) ? 0.1 : 1,
-    hasHeader(scenes[last]) ? 0 : 1,
-    0,
-  ];
-
-  return {
-    opacity: position.interpolate({
-      inputRange,
-      outputRange,
-    }),
-  };
-}
-
-/*
- * NOTE: this offset calculation is an approximation that gives us
- * decent results in many cases, but it is ultimately a poor substitute
- * for text measurement. See the comment on title for more information.
- *
- * - 70 is the width of the left button area.
- * - 25 is the width of the left button icon (to account for label offset)
- */
-const LEFT_LABEL_OFFSET = Dimensions.get('window').width / 2 - 70 - 25;
-function forLeftLabel(props) {
-  const { position, scene, scenes } = props;
-  const interpolate = getSceneIndicesForInterpolationInputRange(props);
-
-  if (!interpolate) return { opacity: 0 };
-
-  const { first, last } = interpolate;
-  const index = scene.index;
-
-  const offset = LEFT_LABEL_OFFSET;
-
-  // Similarly to the animation of the left label, when animating to or from a scene without
-  // a header, we keep the label at full opacity and in the same position for as long as possible.
-  return {
-    // For now we fade out the label before fading in the title, so the
-    // differences between the label and title position can be hopefully not so
-    // noticable to the user
-    opacity: position.interpolate({
-      inputRange: [
-        first,
-        first + 0.001,
-        index - 0.35,
-        index,
-        index + 0.5,
-        last - 0.001,
-        last,
-      ],
-      outputRange: [
-        0,
-        hasHeader(scenes[first]) ? 0 : 1,
-        hasHeader(scenes[first]) ? 0 : 1,
-        hasHeader(scenes[index]) ? 1 : 0,
-        hasHeader(scenes[last]) ? 0.5 : 1,
-        hasHeader(scenes[last]) ? 0 : 1,
-        0,
-      ],
-    }),
-    transform: [
-      {
-        translateX: position.interpolate({
-          inputRange: [first, first + 0.001, index, last - 0.001, last],
-          outputRange: I18nManager.isRTL
-            ? [
-                -offset * 1.5,
-                hasHeader(scenes[first]) ? -offset * 1.5 : 0,
-                0,
-                hasHeader(scenes[last]) ? offset : 0,
-                offset,
-              ]
-            : [
-                offset,
-                hasHeader(scenes[first]) ? offset : 0,
-                0,
-                hasHeader(scenes[last]) ? -offset * 1.5 : 0,
-                -offset * 1.5,
-              ],
-        }),
-      },
-    ],
-  };
-}
-
-/*
- * NOTE: this offset calculation is a an approximation that gives us
- * decent results in many cases, but it is ultimately a poor substitute
- * for text measurement. We want the back button label to transition
- * smoothly into the title text and to do this we need to understand
- * where the title is positioned within the title container (since it is
- * centered).
- *
- * - 70 is the width of the left button area.
- * - 25 is the width of the left button icon (to account for label offset)
- */
-const TITLE_OFFSET_IOS = Dimensions.get('window').width / 2 - 70 + 25;
-function forCenterFromLeft(props) {
-  const { position, scene, scenes } = props;
-  const interpolate = getSceneIndicesForInterpolationInputRange(props);
-
-  if (!interpolate) return { opacity: 0 };
-
-  const { first, last } = interpolate;
-  const index = scene.index;
-  const inputRange = [first, index - 0.5, index, index + 0.5, last];
-  const offset = TITLE_OFFSET_IOS;
-
-  return {
-    opacity: position.interpolate({
-      inputRange: [
-        first,
-        first + 0.001,
-        index - 0.5,
-        index,
-        index + 0.7,
-        last - 0.001,
-        last,
-      ],
-      outputRange: [
-        0,
-        hasHeader(scenes[first]) ? 0 : 1,
-        hasHeader(scenes[first]) ? 0 : 1,
-        hasHeader(scenes[index]) ? 1 : 0,
-        hasHeader(scenes[last]) ? 0 : 1,
-        hasHeader(scenes[last]) ? 0 : 1,
-        0,
-      ],
-    }),
-    transform: [
-      {
-        translateX: position.interpolate({
-          inputRange: [first, first + 0.001, index, last - 0.001, last],
-          outputRange: I18nManager.isRTL
-            ? [
-                -offset,
-                hasHeader(scenes[first]) ? -offset : 0,
-                0,
-                hasHeader(scenes[last]) ? offset : 0,
-                offset,
-              ]
-            : [
-                offset,
-                hasHeader(scenes[first]) ? offset : 0,
-                0,
-                hasHeader(scenes[last]) ? -offset : 0,
-                -offset,
-              ],
-        }),
-      },
-    ],
-  };
-}
-
-export default {
-  forLayout,
-  forLeft,
-  forLeftButton,
-  forLeftLabel,
-  forCenterFromLeft,
-  forCenter,
-  forRight,
-};

src/views/Header/HeaderTitle.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Text, View, Platform, StyleSheet, Animated } from 'react-native';
-
-const AnimatedText = Animated.Text;
-
-const HeaderTitle = ({ style, ...rest }) => (
-  <AnimatedText
-    numberOfLines={1}
-    {...rest}
-    style={[styles.title, style]}
-    accessibilityTraits="header"
-  />
-);
-
-const styles = StyleSheet.create({
-  title: {
-    fontSize: Platform.OS === 'ios' ? 17 : 20,
-    fontWeight: Platform.OS === 'ios' ? '700' : '500',
-    color: 'rgba(0, 0, 0, .9)',
-    textAlign: Platform.OS === 'ios' ? 'center' : 'left',
-    marginHorizontal: 16,
-  },
-});
-
-export default HeaderTitle;

src/views/Header/ModularHeaderBackButton.js

@@ -1,139 +0,0 @@
-import React from 'react';
-import { I18nManager, Image, Text, View, StyleSheet } from 'react-native';
-
-import TouchableItem from '../TouchableItem';
-
-const defaultBackImage = require('../assets/back-icon.png');
-
-class ModularHeaderBackButton extends React.PureComponent {
-  static defaultProps = {
-    tintColor: '#037aff',
-    truncatedTitle: 'Back',
-  };
-
-  state = {};
-
-  _onTextLayout = e => {
-    if (this.state.initialTextWidth) {
-      return;
-    }
-    this.setState({
-      initialTextWidth: e.nativeEvent.layout.x + e.nativeEvent.layout.width,
-    });
-  };
-
-  _renderBackImage() {
-    const { backImage, title, tintColor } = this.props;
-
-    let BackImage;
-    let props;
-
-    if (React.isValidElement(backImage)) {
-      return backImage;
-    } else if (backImage) {
-      BackImage = backImage;
-      props = {
-        tintColor,
-        title,
-      };
-    } else {
-      BackImage = Image;
-      props = {
-        style: [
-          styles.icon,
-          !!title && styles.iconWithTitle,
-          !!tintColor && { tintColor },
-        ],
-        source: defaultBackImage,
-      };
-    }
-
-    return <BackImage {...props} />;
-  }
-
-  render() {
-    const {
-      onPress,
-      width,
-      title,
-      titleStyle,
-      tintColor,
-      truncatedTitle,
-    } = this.props;
-
-    const renderTruncated =
-      this.state.initialTextWidth && width
-        ? this.state.initialTextWidth > width
-        : false;
-
-    let backButtonTitle = renderTruncated ? truncatedTitle : title;
-
-    // TODO: When we've sorted out measuring in the header, let's revisit this.
-    // This is clearly a bad workaround.
-    if (backButtonTitle && backButtonTitle.length > 8) {
-      backButtonTitle = truncatedTitle;
-    }
-
-    const { ButtonContainerComponent, LabelContainerComponent } = this.props;
-
-    return (
-      <TouchableItem
-        accessibilityComponentType="button"
-        accessibilityLabel={backButtonTitle}
-        accessibilityTraits="button"
-        testID="header-back"
-        delayPressIn={0}
-        onPress={onPress}
-        style={styles.container}
-        borderless
-      >
-        <View style={styles.container}>
-          <ButtonContainerComponent>
-            {this._renderBackImage()}
-          </ButtonContainerComponent>
-          {typeof backButtonTitle === 'string' && (
-            <LabelContainerComponent>
-              <Text
-                onLayout={this._onTextLayout}
-                style={[
-                  styles.title,
-                  !!tintColor && { color: tintColor },
-                  titleStyle,
-                ]}
-                numberOfLines={1}
-              >
-                {backButtonTitle}
-              </Text>
-            </LabelContainerComponent>
-          )}
-        </View>
-      </TouchableItem>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    backgroundColor: 'transparent',
-  },
-  title: {
-    fontSize: 17,
-    paddingRight: 10,
-  },
-  icon: {
-    height: 21,
-    width: 12,
-    marginLeft: 9,
-    marginRight: 22,
-    marginVertical: 12,
-    resizeMode: 'contain',
-    transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
-  },
-  iconWithTitle: {
-    marginRight: 3,
-  },
-});
-
-export default ModularHeaderBackButton;

src/views/NavigationContext.js

@@ -5,3 +5,8 @@ const NavigationContext = createReactContext();
 
 export const NavigationProvider = NavigationContext.Provider;
 export const NavigationConsumer = NavigationContext.Consumer;
+
+export default {
+  NavigationProvider,
+  NavigationConsumer,
+};

src/views/ScenesReducer.js

@@ -1,199 +0,0 @@
-import invariant from '../utils/invariant';
-import shallowEqual from '../utils/shallowEqual';
-
-const SCENE_KEY_PREFIX = 'scene_';
-
-/**
- * Helper function to compare route keys (e.g. "9", "11").
- */
-function compareKey(one, two) {
-  const delta = one.length - two.length;
-  if (delta > 0) {
-    return 1;
-  }
-  if (delta < 0) {
-    return -1;
-  }
-  return one > two ? 1 : -1;
-}
-
-/**
- * Helper function to sort scenes based on their index and view key.
- */
-function compareScenes(one, two) {
-  if (one.index > two.index) {
-    return 1;
-  }
-  if (one.index < two.index) {
-    return -1;
-  }
-
-  return compareKey(one.key, two.key);
-}
-
-/**
- * Whether two routes are the same.
- */
-function areScenesShallowEqual(one, two) {
-  return (
-    one.key === two.key &&
-    one.index === two.index &&
-    one.isStale === two.isStale &&
-    one.isActive === two.isActive &&
-    areRoutesShallowEqual(one.route, two.route)
-  );
-}
-
-/**
- * Whether two routes are the same.
- */
-function areRoutesShallowEqual(one, two) {
-  if (!one || !two) {
-    return one === two;
-  }
-
-  if (one.key !== two.key) {
-    return false;
-  }
-
-  return shallowEqual(one, two);
-}
-
-export default function ScenesReducer(
-  scenes,
-  nextState,
-  prevState,
-  descriptors
-) {
-  // Always update the descriptors
-  // This is a workaround for https://github.com/react-navigation/react-navigation/issues/4271
-  // It will be resolved in a better way when we re-write Transitioner
-  scenes.forEach(scene => {
-    const { route } = scene;
-    if (descriptors && descriptors[route.key]) {
-      scene.descriptor = descriptors[route.key];
-    }
-  });
-
-  // Bail out early if we didn't update the state
-  if (prevState === nextState) {
-    return scenes;
-  }
-
-  const prevScenes = new Map();
-  const freshScenes = new Map();
-  const staleScenes = new Map();
-
-  // Populate stale scenes from previous scenes marked as stale.
-  scenes.forEach(scene => {
-    const { key } = scene;
-    if (scene.isStale) {
-      staleScenes.set(key, scene);
-    }
-    prevScenes.set(key, scene);
-  });
-
-  const nextKeys = new Set();
-  nextState.routes.forEach((route, index) => {
-    const key = SCENE_KEY_PREFIX + route.key;
-
-    let descriptor = descriptors && descriptors[route.key];
-
-    const scene = {
-      index,
-      isActive: false,
-      isStale: false,
-      key,
-      route,
-      descriptor,
-    };
-    invariant(
-      !nextKeys.has(key),
-      `navigation.state.routes[${index}].key "${key}" conflicts with ` +
-        'another route!'
-    );
-    nextKeys.add(key);
-
-    if (staleScenes.has(key)) {
-      // A previously `stale` scene is now part of the nextState, so we
-      // revive it by removing it from the stale scene map.
-      staleScenes.delete(key);
-    }
-    freshScenes.set(key, scene);
-  });
-
-  if (prevState) {
-    // Look at the previous routes and classify any removed scenes as `stale`.
-    prevState.routes.forEach((route, index) => {
-      const key = SCENE_KEY_PREFIX + route.key;
-      if (freshScenes.has(key)) {
-        return;
-      }
-      const lastScene = scenes.find(scene => scene.route.key === route.key);
-      const descriptor = lastScene && lastScene.descriptor;
-
-      staleScenes.set(key, {
-        index,
-        isActive: false,
-        isStale: true,
-        key,
-        route,
-        descriptor,
-      });
-    });
-  }
-
-  const nextScenes = [];
-
-  const mergeScene = nextScene => {
-    const { key } = nextScene;
-    const prevScene = prevScenes.has(key) ? prevScenes.get(key) : null;
-    if (prevScene && areScenesShallowEqual(prevScene, nextScene)) {
-      // Reuse `prevScene` as `scene` so view can avoid unnecessary re-render.
-      // This assumes that the scene's navigation state is immutable.
-      nextScenes.push(prevScene);
-    } else {
-      nextScenes.push(nextScene);
-    }
-  };
-
-  staleScenes.forEach(mergeScene);
-  freshScenes.forEach(mergeScene);
-
-  nextScenes.sort(compareScenes);
-
-  let activeScenesCount = 0;
-  nextScenes.forEach((scene, ii) => {
-    const isActive = !scene.isStale && scene.index === nextState.index;
-    if (isActive !== scene.isActive) {
-      nextScenes[ii] = {
-        ...scene,
-        isActive,
-      };
-    }
-    if (isActive) {
-      activeScenesCount++;
-    }
-  });
-
-  invariant(
-    activeScenesCount === 1,
-    'there should always be only one scene active, not %s.',
-    activeScenesCount
-  );
-
-  if (nextScenes.length !== scenes.length) {
-    return nextScenes;
-  }
-
-  if (
-    nextScenes.some(
-      (scene, index) => !areScenesShallowEqual(scenes[index], scene)
-    )
-  ) {
-    return nextScenes;
-  }
-
-  // scenes haven't changed.
-  return scenes;
-}

src/views/StackView/StackView.js

@@ -1,73 +0,0 @@
-import React from 'react';
-import { NativeModules } from 'react-native';
-
-import StackViewLayout from './StackViewLayout';
-import Transitioner from '../Transitioner';
-import StackActions from '../../routers/StackActions';
-import TransitionConfigs from './StackViewTransitionConfigs';
-
-const NativeAnimatedModule =
-  NativeModules && NativeModules.NativeAnimatedModule;
-
-class StackView extends React.Component {
-  static defaultProps = {
-    navigationConfig: {
-      mode: 'card',
-    },
-  };
-
-  render() {
-    return (
-      <Transitioner
-        render={this._render}
-        configureTransition={this._configureTransition}
-        screenProps={this.props.screenProps}
-        navigation={this.props.navigation}
-        descriptors={this.props.descriptors}
-        onTransitionStart={this.props.onTransitionStart}
-        onTransitionEnd={(transition, lastTransition) => {
-          const { navigationConfig, navigation } = this.props;
-          const { onTransitionEnd } = navigationConfig;
-          if (transition.navigation.state.isTransitioning) {
-            navigation.dispatch(
-              StackActions.completeTransition({
-                key: navigation.state.key,
-              })
-            );
-          }
-          onTransitionEnd && onTransitionEnd(transition, lastTransition);
-        }}
-      />
-    );
-  }
-
-  _configureTransition = (transitionProps, prevTransitionProps) => {
-    return {
-      ...TransitionConfigs.getTransitionConfig(
-        this.props.navigationConfig.transitionConfig,
-        transitionProps,
-        prevTransitionProps,
-        this.props.navigationConfig.mode === 'modal'
-      ).transitionSpec,
-      useNativeDriver: !!NativeAnimatedModule,
-    };
-  };
-
-  _render = (transitionProps, lastTransitionProps) => {
-    const { screenProps, navigationConfig } = this.props;
-    return (
-      <StackViewLayout
-        {...navigationConfig}
-        onGestureBegin={this.props.onGestureBegin}
-        onGestureCanceled={this.props.onGestureCanceled}
-        onGestureEnd={this.props.onGestureEnd}
-        screenProps={screenProps}
-        descriptors={this.props.descriptors}
-        transitionProps={transitionProps}
-        lastTransitionProps={lastTransitionProps}
-      />
-    );
-  };
-}
-
-export default StackView;

src/views/StackView/StackViewCard.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import { Animated, StyleSheet } from 'react-native';
-import createPointerEventsContainer from './createPointerEventsContainer';
-
-/**
- * Component that renders the scene as card for the <StackView />.
- */
-class Card extends React.Component {
-  render() {
-    const { children, pointerEvents, style } = this.props;
-    return (
-      <Animated.View
-        pointerEvents={pointerEvents}
-        ref={this.props.onComponentRef}
-        style={[styles.main, style]}
-      >
-        {children}
-      </Animated.View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  main: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: '#E9E9EF',
-    shadowColor: 'black',
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.2,
-    shadowRadius: 5,
-  },
-});
-
-Card = createPointerEventsContainer(Card);
-
-export default Card;

src/views/StackView/StackViewLayout.js

@@ -1,580 +0,0 @@
-import React from 'react';
-
-import clamp from 'clamp';
-import {
-  Animated,
-  StyleSheet,
-  PanResponder,
-  Platform,
-  View,
-  I18nManager,
-  Easing,
-  Dimensions,
-} from 'react-native';
-
-import Card from './StackViewCard';
-import Header from '../Header/Header';
-import NavigationActions from '../../NavigationActions';
-import StackActions from '../../routers/StackActions';
-import SceneView from '../SceneView';
-import withOrientation from '../withOrientation';
-import { NavigationProvider } from '../NavigationContext';
-
-import TransitionConfigs from './StackViewTransitionConfigs';
-import { supportsImprovedSpringAnimation } from '../../utils/ReactNativeFeatures';
-
-const emptyFunction = () => {};
-
-const { width: WINDOW_WIDTH, height: WINDOW_HEIGHT } = Dimensions.get('window');
-const IS_IPHONE_X =
-  Platform.OS === 'ios' &&
-  !Platform.isPad &&
-  !Platform.isTVOS &&
-  (WINDOW_HEIGHT === 812 || WINDOW_WIDTH === 812);
-
-const EaseInOut = Easing.inOut(Easing.ease);
-
-/**
- * The max duration of the card animation in milliseconds after released gesture.
- * The actual duration should be always less then that because the rest distance
- * is always less then the full distance of the layout.
- */
-const ANIMATION_DURATION = 500;
-
-/**
- * The gesture distance threshold to trigger the back behavior. For instance,
- * `1/2` means that moving greater than 1/2 of the width of the screen will
- * trigger a back action
- */
-const POSITION_THRESHOLD = 1 / 2;
-
-/**
- * The threshold (in pixels) to start the gesture action.
- */
-const RESPOND_THRESHOLD = 20;
-
-/**
- * The distance of touch start from the edge of the screen where the gesture will be recognized
- */
-const GESTURE_RESPONSE_DISTANCE_HORIZONTAL = 25;
-const GESTURE_RESPONSE_DISTANCE_VERTICAL = 135;
-
-const animatedSubscribeValue = animatedValue => {
-  if (!animatedValue.__isNative) {
-    return;
-  }
-  if (Object.keys(animatedValue._listeners).length === 0) {
-    animatedValue.addListener(emptyFunction);
-  }
-};
-
-const getDefaultHeaderHeight = isLandscape => {
-  if (Platform.OS === 'ios') {
-    if (isLandscape && !Platform.isPad) {
-      return 32;
-    } else if (IS_IPHONE_X) {
-      return 88;
-    } else {
-      return 64;
-    }
-  } else {
-    return 56;
-  }
-};
-
-class StackViewLayout extends React.Component {
-  /**
-   * Used to identify the starting point of the position when the gesture starts, such that it can
-   * be updated according to its relative position. This means that a card can effectively be
-   * "caught"- If a gesture starts while a card is animating, the card does not jump into a
-   * corresponding location for the touch.
-   */
-  _gestureStartValue = 0;
-
-  // tracks if a touch is currently happening
-  _isResponding = false;
-
-  /**
-   * immediateIndex is used to represent the expected index that we will be on after a
-   * transition. To achieve a smooth animation when swiping back, the action to go back
-   * doesn't actually fire until the transition completes. The immediateIndex is used during
-   * the transition so that gestures can be handled correctly. This is a work-around for
-   * cases when the user quickly swipes back several times.
-   */
-  _immediateIndex = null;
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      // Used when card's header is null and mode is float to make transition
-      // between screens with headers and those without headers smooth.
-      // This is not a great heuristic here. We don't know synchronously
-      // on mount what the header height is so we have just used the most
-      // common cases here.
-      floatingHeaderHeight: getDefaultHeaderHeight(props.isLandscape),
-    };
-  }
-
-  _renderHeader(scene, headerMode) {
-    const { options } = scene.descriptor;
-    const { header } = options;
-
-    if (__DEV__ && typeof header === 'string') {
-      throw new Error(
-        `Invalid header value: "${header}". The header option must be a valid React component or null, not a string.`
-      );
-    }
-
-    if (header === null && headerMode === 'screen') {
-      return null;
-    }
-
-    // check if it's a react element
-    if (React.isValidElement(header)) {
-      return header;
-    }
-
-    // Handle the case where the header option is a function, and provide the default
-    const renderHeader = header || (props => <Header {...props} />);
-
-    const {
-      headerLeftInterpolator,
-      headerTitleInterpolator,
-      headerRightInterpolator,
-    } = this._getTransitionConfig();
-
-    const {
-      mode,
-      transitionProps,
-      lastTransitionProps,
-      ...passProps
-    } = this.props;
-
-    return (
-      <NavigationProvider value={scene.descriptor.navigation}>
-        {renderHeader({
-          ...passProps,
-          ...transitionProps,
-          scene,
-          mode: headerMode,
-          transitionPreset: this._getHeaderTransitionPreset(),
-          leftInterpolator: headerLeftInterpolator,
-          titleInterpolator: headerTitleInterpolator,
-          rightInterpolator: headerRightInterpolator,
-        })}
-      </NavigationProvider>
-    );
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  _animatedSubscribe(props) {
-    // Hack to make this work with native driven animations. We add a single listener
-    // so the JS value of the following animated values gets updated. We rely on
-    // some Animated private APIs and not doing so would require using a bunch of
-    // value listeners but we'd have to remove them to not leak and I'm not sure
-    // when we'd do that with the current structure we have. `stopAnimation` callback
-    // is also broken with native animated values that have no listeners so if we
-    // want to remove this we have to fix this too.
-    animatedSubscribeValue(props.transitionProps.layout.width);
-    animatedSubscribeValue(props.transitionProps.layout.height);
-    animatedSubscribeValue(props.transitionProps.position);
-  }
-
-  _reset(resetToIndex, duration) {
-    if (Platform.OS === 'ios' && supportsImprovedSpringAnimation()) {
-      Animated.spring(this.props.transitionProps.position, {
-        toValue: resetToIndex,
-        stiffness: 5000,
-        damping: 600,
-        mass: 3,
-        useNativeDriver: this.props.transitionProps.position.__isNative,
-      }).start();
-    } else {
-      Animated.timing(this.props.transitionProps.position, {
-        toValue: resetToIndex,
-        duration,
-        easing: EaseInOut,
-        useNativeDriver: this.props.transitionProps.position.__isNative,
-      }).start();
-    }
-  }
-
-  _goBack(backFromIndex, duration) {
-    const { navigation, position, scenes } = this.props.transitionProps;
-    const toValue = Math.max(backFromIndex - 1, 0);
-
-    // set temporary index for gesture handler to respect until the action is
-    // dispatched at the end of the transition.
-    this._immediateIndex = toValue;
-
-    const onCompleteAnimation = () => {
-      this._immediateIndex = null;
-      const backFromScene = scenes.find(s => s.index === toValue + 1);
-      if (!this._isResponding && backFromScene) {
-        navigation.dispatch(
-          NavigationActions.back({
-            key: backFromScene.route.key,
-            immediate: true,
-          })
-        );
-        navigation.dispatch(StackActions.completeTransition());
-      }
-    };
-
-    if (Platform.OS === 'ios' && supportsImprovedSpringAnimation()) {
-      Animated.spring(position, {
-        toValue,
-        stiffness: 5000,
-        damping: 600,
-        mass: 3,
-        useNativeDriver: position.__isNative,
-      }).start(onCompleteAnimation);
-    } else {
-      Animated.timing(position, {
-        toValue,
-        duration,
-        easing: EaseInOut,
-        useNativeDriver: position.__isNative,
-      }).start(onCompleteAnimation);
-    }
-  }
-
-  _panResponder = PanResponder.create({
-    onPanResponderTerminate: () => {
-      const { navigation } = this.props.transitionProps;
-      const { index } = navigation.state;
-      this._isResponding = false;
-      this._reset(index, 0);
-      this.props.onGestureCanceled && this.props.onGestureCanceled();
-    },
-    onPanResponderGrant: () => {
-      const {
-        transitionProps: { navigation, position, scene },
-      } = this.props;
-      const { index } = navigation.state;
-
-      if (index !== scene.index) {
-        return false;
-      }
-
-      position.stopAnimation(value => {
-        this._isResponding = true;
-        this._gestureStartValue = value;
-      });
-      this.props.onGestureBegin && this.props.onGestureBegin();
-    },
-    onMoveShouldSetPanResponder: (event, gesture) => {
-      const {
-        transitionProps: { navigation, layout, scene },
-        mode,
-      } = this.props;
-      const { index } = navigation.state;
-      const isVertical = mode === 'modal';
-      const { options } = scene.descriptor;
-      const gestureDirection = options.gestureDirection;
-
-      const gestureDirectionInverted =
-        typeof gestureDirection === 'string'
-          ? gestureDirection === 'inverted'
-          : I18nManager.isRTL;
-
-      if (index !== scene.index) {
-        return false;
-      }
-
-      const immediateIndex =
-        this._immediateIndex == null ? index : this._immediateIndex;
-      const currentDragDistance = gesture[isVertical ? 'dy' : 'dx'];
-      const currentDragPosition =
-        event.nativeEvent[isVertical ? 'pageY' : 'pageX'];
-      const axisLength = isVertical
-        ? layout.height.__getValue()
-        : layout.width.__getValue();
-      const axisHasBeenMeasured = !!axisLength;
-
-      // Measure the distance from the touch to the edge of the screen
-      const screenEdgeDistance = gestureDirectionInverted
-        ? axisLength - (currentDragPosition - currentDragDistance)
-        : currentDragPosition - currentDragDistance;
-      // Compare to the gesture distance relavant to card or modal
-
-      const {
-        gestureResponseDistance: userGestureResponseDistance = {},
-      } = options;
-      const gestureResponseDistance = isVertical
-        ? userGestureResponseDistance.vertical ||
-          GESTURE_RESPONSE_DISTANCE_VERTICAL
-        : userGestureResponseDistance.horizontal ||
-          GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
-      // GESTURE_RESPONSE_DISTANCE is about 25 or 30. Or 135 for modals
-      if (screenEdgeDistance > gestureResponseDistance) {
-        // Reject touches that started in the middle of the screen
-        return false;
-      }
-
-      const hasDraggedEnough =
-        Math.abs(currentDragDistance) > RESPOND_THRESHOLD;
-
-      const isOnFirstCard = immediateIndex === 0;
-      const shouldSetResponder =
-        hasDraggedEnough && axisHasBeenMeasured && !isOnFirstCard;
-      return shouldSetResponder;
-    },
-    onPanResponderMove: (event, gesture) => {
-      const {
-        transitionProps: { navigation, position, layout, scene },
-        mode,
-      } = this.props;
-      const { index } = navigation.state;
-      const isVertical = mode === 'modal';
-      const { options } = scene.descriptor;
-      const gestureDirection = options.gestureDirection;
-
-      const gestureDirectionInverted =
-        typeof gestureDirection === 'string'
-          ? gestureDirection === 'inverted'
-          : I18nManager.isRTL;
-
-      // Handle the moving touches for our granted responder
-      const startValue = this._gestureStartValue;
-      const axis = isVertical ? 'dy' : 'dx';
-      const axisDistance = isVertical
-        ? layout.height.__getValue()
-        : layout.width.__getValue();
-      const currentValue =
-        axis === 'dx' && gestureDirectionInverted
-          ? startValue + gesture[axis] / axisDistance
-          : startValue - gesture[axis] / axisDistance;
-      const value = clamp(index - 1, currentValue, index);
-      position.setValue(value);
-    },
-    onPanResponderTerminationRequest: () =>
-      // Returning false will prevent other views from becoming responder while
-      // the navigation view is the responder (mid-gesture)
-      false,
-    onPanResponderRelease: (event, gesture) => {
-      const {
-        transitionProps: { navigation, position, layout, scene },
-        mode,
-      } = this.props;
-      const { index } = navigation.state;
-      const isVertical = mode === 'modal';
-      const { options } = scene.descriptor;
-      const gestureDirection = options.gestureDirection;
-
-      const gestureDirectionInverted =
-        typeof gestureDirection === 'string'
-          ? gestureDirection === 'inverted'
-          : I18nManager.isRTL;
-
-      if (!this._isResponding) {
-        return;
-      }
-      this._isResponding = false;
-
-      const immediateIndex =
-        this._immediateIndex == null ? index : this._immediateIndex;
-
-      // Calculate animate duration according to gesture speed and moved distance
-      const axisDistance = isVertical
-        ? layout.height.__getValue()
-        : layout.width.__getValue();
-      const movementDirection = gestureDirectionInverted ? -1 : 1;
-      const movedDistance =
-        movementDirection * gesture[isVertical ? 'dy' : 'dx'];
-      const gestureVelocity =
-        movementDirection * gesture[isVertical ? 'vy' : 'vx'];
-      const defaultVelocity = axisDistance / ANIMATION_DURATION;
-      const velocity = Math.max(Math.abs(gestureVelocity), defaultVelocity);
-      const resetDuration = gestureDirectionInverted
-        ? (axisDistance - movedDistance) / velocity
-        : movedDistance / velocity;
-      const goBackDuration = gestureDirectionInverted
-        ? movedDistance / velocity
-        : (axisDistance - movedDistance) / velocity;
-
-      // To asyncronously get the current animated value, we need to run stopAnimation:
-      position.stopAnimation(value => {
-        // If the speed of the gesture release is significant, use that as the indication
-        // of intent
-        if (gestureVelocity < -0.5) {
-          this.props.onGestureCanceled && this.props.onGestureCanceled();
-          this._reset(immediateIndex, resetDuration);
-          return;
-        }
-        if (gestureVelocity > 0.5) {
-          this.props.onGestureFinish && this.props.onGestureFinish();
-          this._goBack(immediateIndex, goBackDuration);
-          return;
-        }
-
-        // Then filter based on the distance the screen was moved. Over a third of the way swiped,
-        // and the back will happen.
-        if (value <= index - POSITION_THRESHOLD) {
-          this.props.onGestureFinish && this.props.onGestureFinish();
-          this._goBack(immediateIndex, goBackDuration);
-        } else {
-          this.props.onGestureCanceled && this.props.onGestureCanceled();
-          this._reset(immediateIndex, resetDuration);
-        }
-      });
-    },
-  });
-
-  _onFloatingHeaderLayout = e => {
-    this.setState({ floatingHeaderHeight: e.nativeEvent.layout.height });
-  };
-
-  render() {
-    let floatingHeader = null;
-    const headerMode = this._getHeaderMode();
-
-    if (headerMode === 'float') {
-      const { scene } = this.props.transitionProps;
-      floatingHeader = (
-        <View pointerEvents="box-none" onLayout={this._onFloatingHeaderLayout}>
-          {this._renderHeader(scene, headerMode)}
-        </View>
-      );
-    }
-    const {
-      transitionProps: { scene, scenes },
-      mode,
-    } = this.props;
-    const { options } = scene.descriptor;
-
-    const gesturesEnabled =
-      typeof options.gesturesEnabled === 'boolean'
-        ? options.gesturesEnabled
-        : Platform.OS === 'ios';
-
-    const responder = !gesturesEnabled ? null : this._panResponder;
-
-    const handlers = gesturesEnabled ? responder.panHandlers : {};
-    const containerStyle = [
-      styles.container,
-      this._getTransitionConfig().containerStyle,
-    ];
-
-    return (
-      <View {...handlers} style={containerStyle}>
-        <View style={styles.scenes}>
-          {scenes.map(s => this._renderCard(s))}
-        </View>
-        {floatingHeader}
-      </View>
-    );
-  }
-
-  _getHeaderMode() {
-    if (this.props.headerMode) {
-      return this.props.headerMode;
-    }
-    if (Platform.OS === 'android' || this.props.mode === 'modal') {
-      return 'screen';
-    }
-    return 'float';
-  }
-
-  _getHeaderTransitionPreset() {
-    // On Android or with header mode screen, we always just use in-place,
-    // we ignore the option entirely (at least until we have other presets)
-    if (Platform.OS === 'android' || this._getHeaderMode() === 'screen') {
-      return 'fade-in-place';
-    }
-
-    // TODO: validations: 'fade-in-place' or 'uikit' are valid
-    if (this.props.headerTransitionPreset) {
-      return this.props.headerTransitionPreset;
-    } else {
-      return 'fade-in-place';
-    }
-  }
-
-  _renderInnerScene(scene) {
-    const { options, navigation, getComponent } = scene.descriptor;
-    const SceneComponent = getComponent();
-
-    const { screenProps } = this.props;
-    const headerMode = this._getHeaderMode();
-    if (headerMode === 'screen') {
-      return (
-        <View style={styles.container}>
-          <View style={styles.scenes}>
-            <SceneView
-              screenProps={screenProps}
-              navigation={navigation}
-              component={SceneComponent}
-            />
-          </View>
-          {this._renderHeader(scene, headerMode)}
-        </View>
-      );
-    }
-    return (
-      <SceneView
-        screenProps={screenProps}
-        navigation={navigation}
-        component={SceneComponent}
-      />
-    );
-  }
-
-  _getTransitionConfig = () => {
-    const isModal = this.props.mode === 'modal';
-
-    return TransitionConfigs.getTransitionConfig(
-      this.props.transitionConfig,
-      this.props.transitionProps,
-      this.props.lastTransitionProps,
-      isModal
-    );
-  };
-
-  _renderCard = scene => {
-    const { screenInterpolator } = this._getTransitionConfig();
-
-    const style =
-      screenInterpolator &&
-      screenInterpolator({ ...this.props.transitionProps, scene });
-
-    // If this screen has "header" set to `null` in it's navigation options, but
-    // it exists in a stack with headerMode float, add a negative margin to
-    // compensate for the hidden header
-    const { options } = scene.descriptor;
-    const hasHeader = options.header !== null;
-    const headerMode = this._getHeaderMode();
-    let marginTop = 0;
-    if (!hasHeader && headerMode === 'float') {
-      marginTop = -this.state.floatingHeaderHeight;
-    }
-
-    return (
-      <Card
-        {...this.props.transitionProps}
-        key={`card_${scene.key}`}
-        style={[style, { marginTop }, this.props.cardStyle]}
-        scene={scene}
-      >
-        {this._renderInnerScene(scene)}
-      </Card>
-    );
-  };
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    // Header is physically rendered after scenes so that Header won't be
-    // covered by the shadows of the scenes.
-    // That said, we'd have use `flexDirection: 'column-reverse'` to move
-    // Header above the scenes.
-    flexDirection: 'column-reverse',
-  },
-  scenes: {
-    flex: 1,
-  },
-});
-
-export default withOrientation(StackViewLayout);

src/views/StackView/StackViewStyleInterpolator.js

@@ -1,167 +0,0 @@
-import { I18nManager } from 'react-native';
-import getSceneIndicesForInterpolationInputRange from '../../utils/getSceneIndicesForInterpolationInputRange';
-
-/**
- * Utility that builds the style for the card in the cards stack.
- *
- *     +------------+
- *   +-+            |
- * +-+ |            |
- * | | |            |
- * | | |  Focused   |
- * | | |   Card     |
- * | | |            |
- * +-+ |            |
- *   +-+            |
- *     +------------+
- */
-
-/**
- * Render the initial style when the initial layout isn't measured yet.
- */
-function forInitial(props) {
-  const { navigation, scene } = props;
-
-  const focused = navigation.state.index === scene.index;
-  const opacity = focused ? 1 : 0;
-  // If not focused, move the scene far away.
-  const translate = focused ? 0 : 1000000;
-  return {
-    opacity,
-    transform: [{ translateX: translate }, { translateY: translate }],
-  };
-}
-
-/**
- * Standard iOS-style slide in from the right.
- */
-function forHorizontal(props) {
-  const { layout, position, scene } = props;
-
-  if (!layout.isMeasured) {
-    return forInitial(props);
-  }
-  const interpolate = getSceneIndicesForInterpolationInputRange(props);
-
-  if (!interpolate) return { opacity: 0 };
-
-  const { first, last } = interpolate;
-  const index = scene.index;
-  const opacity = position.interpolate({
-    inputRange: [first, first + 0.01, index, last - 0.01, last],
-    outputRange: [0, 1, 1, 0.85, 0],
-  });
-
-  const width = layout.initWidth;
-  const translateX = position.interpolate({
-    inputRange: [first, index, last],
-    outputRange: I18nManager.isRTL
-      ? [-width, 0, width * 0.3]
-      : [width, 0, width * -0.3],
-  });
-  const translateY = 0;
-
-  return {
-    opacity,
-    transform: [{ translateX }, { translateY }],
-  };
-}
-
-/**
- * Standard iOS-style slide in from the bottom (used for modals).
- */
-function forVertical(props) {
-  const { layout, position, scene } = props;
-
-  if (!layout.isMeasured) {
-    return forInitial(props);
-  }
-  const interpolate = getSceneIndicesForInterpolationInputRange(props);
-
-  if (!interpolate) return { opacity: 0 };
-
-  const { first, last } = interpolate;
-  const index = scene.index;
-  const opacity = position.interpolate({
-    inputRange: [first, first + 0.01, index, last - 0.01, last],
-    outputRange: [0, 1, 1, 0.85, 0],
-  });
-
-  const height = layout.initHeight;
-  const translateY = position.interpolate({
-    inputRange: [first, index, last],
-    outputRange: [height, 0, 0],
-  });
-  const translateX = 0;
-
-  return {
-    opacity,
-    transform: [{ translateX }, { translateY }],
-  };
-}
-
-/**
- * Standard Android-style fade in from the bottom.
- */
-function forFadeFromBottomAndroid(props) {
-  const { layout, position, scene } = props;
-
-  if (!layout.isMeasured) {
-    return forInitial(props);
-  }
-  const interpolate = getSceneIndicesForInterpolationInputRange(props);
-
-  if (!interpolate) return { opacity: 0 };
-
-  const { first, last } = interpolate;
-  const index = scene.index;
-  const inputRange = [first, index, last - 0.01, last];
-
-  const opacity = position.interpolate({
-    inputRange,
-    outputRange: [0, 1, 1, 0],
-  });
-
-  const translateY = position.interpolate({
-    inputRange,
-    outputRange: [50, 0, 0, 0],
-  });
-  const translateX = 0;
-
-  return {
-    opacity,
-    transform: [{ translateX }, { translateY }],
-  };
-}
-
-/**
- *  fadeIn and fadeOut
- */
-function forFade(props) {
-  const { layout, position, scene } = props;
-
-  if (!layout.isMeasured) {
-    return forInitial(props);
-  }
-  const interpolate = getSceneIndicesForInterpolationInputRange(props);
-
-  if (!interpolate) return { opacity: 0 };
-
-  const { first, last } = interpolate;
-  const index = scene.index;
-  const opacity = position.interpolate({
-    inputRange: [first, index, last],
-    outputRange: [0, 1, 1],
-  });
-
-  return {
-    opacity,
-  };
-}
-
-export default {
-  forHorizontal,
-  forVertical,
-  forFadeFromBottomAndroid,
-  forFade,
-};

src/views/StackView/StackViewTransitionConfigs.js

@@ -1,110 +0,0 @@
-import { Animated, Easing, Platform } from 'react-native';
-import StyleInterpolator from './StackViewStyleInterpolator';
-import { supportsImprovedSpringAnimation } from '../../utils/ReactNativeFeatures';
-
-let IOSTransitionSpec;
-if (supportsImprovedSpringAnimation()) {
-  // These are the exact values from UINavigationController's animation configuration
-  IOSTransitionSpec = {
-    timing: Animated.spring,
-    stiffness: 1000,
-    damping: 500,
-    mass: 3,
-  };
-} else {
-  // This is an approximation of the IOS spring animation using a derived bezier curve
-  IOSTransitionSpec = {
-    duration: 500,
-    easing: Easing.bezier(0.2833, 0.99, 0.31833, 0.99),
-    timing: Animated.timing,
-  };
-}
-
-// Standard iOS navigation transition
-const SlideFromRightIOS = {
-  transitionSpec: IOSTransitionSpec,
-  screenInterpolator: StyleInterpolator.forHorizontal,
-  containerStyle: {
-    backgroundColor: '#000',
-  },
-};
-
-// Standard iOS navigation transition for modals
-const ModalSlideFromBottomIOS = {
-  transitionSpec: IOSTransitionSpec,
-  screenInterpolator: StyleInterpolator.forVertical,
-  containerStyle: {
-    backgroundColor: '#000',
-  },
-};
-
-// Standard Android navigation transition when opening an Activity
-const FadeInFromBottomAndroid = {
-  // See http://androidxref.com/7.1.1_r6/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
-  transitionSpec: {
-    duration: 350,
-    easing: Easing.out(Easing.poly(5)), // decelerate
-    timing: Animated.timing,
-  },
-  screenInterpolator: StyleInterpolator.forFadeFromBottomAndroid,
-};
-
-// Standard Android navigation transition when closing an Activity
-const FadeOutToBottomAndroid = {
-  // See http://androidxref.com/7.1.1_r6/xref/frameworks/base/core/res/res/anim/activity_close_exit.xml
-  transitionSpec: {
-    duration: 230,
-    easing: Easing.in(Easing.poly(4)), // accelerate
-    timing: Animated.timing,
-  },
-  screenInterpolator: StyleInterpolator.forFadeFromBottomAndroid,
-};
-
-function defaultTransitionConfig(
-  transitionProps,
-  prevTransitionProps,
-  isModal
-) {
-  if (Platform.OS === 'android') {
-    // Use the default Android animation no matter if the screen is a modal.
-    // Android doesn't have full-screen modals like iOS does, it has dialogs.
-    if (
-      prevTransitionProps &&
-      transitionProps.index < prevTransitionProps.index
-    ) {
-      // Navigating back to the previous screen
-      return FadeOutToBottomAndroid;
-    }
-    return FadeInFromBottomAndroid;
-  }
-  // iOS and other platforms
-  if (isModal) {
-    return ModalSlideFromBottomIOS;
-  }
-  return SlideFromRightIOS;
-}
-
-function getTransitionConfig(
-  transitionConfigurer,
-  transitionProps,
-  prevTransitionProps,
-  isModal
-) {
-  const defaultConfig = defaultTransitionConfig(
-    transitionProps,
-    prevTransitionProps,
-    isModal
-  );
-  if (transitionConfigurer) {
-    return {
-      ...defaultConfig,
-      ...transitionConfigurer(transitionProps, prevTransitionProps, isModal),
-    };
-  }
-  return defaultConfig;
-}
-
-export default {
-  defaultTransitionConfig,
-  getTransitionConfig,
-};

src/views/StackView/createPointerEventsContainer.js

@@ -1,84 +0,0 @@
-import React from 'react';
-import invariant from '../../utils/invariant';
-import AnimatedValueSubscription from '../AnimatedValueSubscription';
-
-const MIN_POSITION_OFFSET = 0.01;
-
-/**
- * Create a higher-order component that automatically computes the
- * `pointerEvents` property for a component whenever navigation position
- * changes.
- */
-export default function createPointerEventsContainer(Component) {
-  class Container extends React.Component {
-    constructor(props, context) {
-      super(props, context);
-      this._pointerEvents = this._computePointerEvents();
-    }
-
-    componentWillUnmount() {
-      this._positionListener && this._positionListener.remove();
-    }
-
-    render() {
-      this._bindPosition();
-      this._pointerEvents = this._computePointerEvents();
-
-      return (
-        <Component
-          {...this.props}
-          pointerEvents={this._pointerEvents}
-          onComponentRef={this._onComponentRef}
-        />
-      );
-    }
-
-    _onComponentRef = component => {
-      this._component = component;
-      if (component) {
-        invariant(
-          typeof component.setNativeProps === 'function',
-          'component must implement method `setNativeProps`'
-        );
-      }
-    };
-
-    _bindPosition() {
-      this._positionListener && this._positionListener.remove();
-      this._positionListener = new AnimatedValueSubscription(
-        this.props.position,
-        this._onPositionChange
-      );
-    }
-
-    _onPositionChange = () => {
-      if (this._component) {
-        const pointerEvents = this._computePointerEvents();
-        if (this._pointerEvents !== pointerEvents) {
-          this._pointerEvents = pointerEvents;
-          this._component.setNativeProps({ pointerEvents });
-        }
-      }
-    };
-
-    _computePointerEvents() {
-      const { navigation, position, scene } = this.props;
-
-      if (scene.isStale || navigation.state.index !== scene.index) {
-        // The scene isn't focused.
-        return scene.index > navigation.state.index ? 'box-only' : 'none';
-      }
-
-      const offset = position.__getAnimatedValue() - navigation.state.index;
-      if (Math.abs(offset) > MIN_POSITION_OFFSET) {
-        // The positon is still away from scene's index.
-        // Scene's children should not receive touches until the position
-        // is close enough to scene's index.
-        return 'box-only';
-      }
-
-      return 'auto';
-    }
-  }
-  return Container;
-}

src/views/Transitioner.js

@@ -1,286 +0,0 @@
-import React from 'react';
-import { Animated, Easing, StyleSheet, View } from 'react-native';
-import invariant from '../utils/invariant';
-
-import NavigationScenesReducer from './ScenesReducer';
-
-// Used for all animations unless overriden
-const DefaultTransitionSpec = {
-  duration: 250,
-  easing: Easing.inOut(Easing.ease),
-  timing: Animated.timing,
-};
-
-class Transitioner extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    // The initial layout isn't measured. Measured layout will be only available
-    // when the component is mounted.
-    const layout = {
-      height: new Animated.Value(0),
-      initHeight: 0,
-      initWidth: 0,
-      isMeasured: false,
-      width: new Animated.Value(0),
-    };
-
-    this.state = {
-      layout,
-      position: new Animated.Value(this.props.navigation.state.index),
-      progress: new Animated.Value(1),
-      scenes: NavigationScenesReducer(
-        [],
-        this.props.navigation.state,
-        null,
-        this.props.descriptors
-      ),
-    };
-
-    this._prevTransitionProps = null;
-    this._transitionProps = buildTransitionProps(props, this.state);
-    this._isMounted = false;
-    this._isTransitionRunning = false;
-    this._queuedTransition = null;
-  }
-
-  componentDidMount() {
-    this._isMounted = true;
-  }
-
-  componentWillUnmount() {
-    this._isMounted = false;
-  }
-
-  componentWillReceiveProps(nextProps) {
-    let nextScenes = NavigationScenesReducer(
-      this.state.scenes,
-      nextProps.navigation.state,
-      this.props.navigation.state,
-      nextProps.descriptors
-    );
-    if (!nextProps.navigation.state.isTransitioning) {
-      nextScenes = filterStale(nextScenes);
-    }
-
-    // Update nextScenes when we change screenProps
-    // This is a workaround for https://github.com/react-navigation/react-navigation/issues/4271
-    if (nextProps.screenProps !== this.props.screenProps) {
-      this.setState({ nextScenes });
-    }
-
-    if (nextScenes === this.state.scenes) {
-      return;
-    }
-
-    const indexHasChanged =
-      nextProps.navigation.state.index !== this.props.navigation.state.index;
-    if (this._isTransitionRunning) {
-      this._queuedTransition = { nextProps, nextScenes, indexHasChanged };
-      return;
-    }
-
-    this._startTransition(nextProps, nextScenes, indexHasChanged);
-  }
-
-  _startTransition(nextProps, nextScenes, indexHasChanged) {
-    const nextState = {
-      ...this.state,
-      scenes: nextScenes,
-    };
-
-    const { position, progress } = nextState;
-
-    progress.setValue(0);
-
-    this._prevTransitionProps = this._transitionProps;
-    this._transitionProps = buildTransitionProps(nextProps, nextState);
-
-    const toValue = nextProps.navigation.state.index;
-
-    if (!this._transitionProps.navigation.state.isTransitioning) {
-      this.setState(nextState, async () => {
-        const result = nextProps.onTransitionStart(
-          this._transitionProps,
-          this._prevTransitionProps
-        );
-        if (result instanceof Promise) {
-          await result;
-        }
-        progress.setValue(1);
-        position.setValue(toValue);
-        this._onTransitionEnd();
-      });
-      return;
-    }
-
-    // get the transition spec.
-    const transitionUserSpec = nextProps.configureTransition
-      ? nextProps.configureTransition(
-          this._transitionProps,
-          this._prevTransitionProps
-        )
-      : null;
-
-    const transitionSpec = {
-      ...DefaultTransitionSpec,
-      ...transitionUserSpec,
-    };
-
-    const { timing } = transitionSpec;
-    delete transitionSpec.timing;
-
-    const positionHasChanged = position.__getValue() !== toValue;
-
-    // if swiped back, indexHasChanged == true && positionHasChanged == false
-    const animations =
-      indexHasChanged && positionHasChanged
-        ? [
-            timing(progress, {
-              ...transitionSpec,
-              toValue: 1,
-            }),
-            timing(position, {
-              ...transitionSpec,
-              toValue: nextProps.navigation.state.index,
-            }),
-          ]
-        : [];
-
-    // update scenes and play the transition
-    this._isTransitionRunning = true;
-    this.setState(nextState, async () => {
-      if (nextProps.onTransitionStart) {
-        const result = nextProps.onTransitionStart(
-          this._transitionProps,
-          this._prevTransitionProps
-        );
-
-        if (result instanceof Promise) {
-          await result;
-        }
-      }
-      Animated.parallel(animations).start(this._onTransitionEnd);
-    });
-  }
-
-  render() {
-    return (
-      <View onLayout={this._onLayout} style={[styles.main]}>
-        {this.props.render(this._transitionProps, this._prevTransitionProps)}
-      </View>
-    );
-  }
-
-  _onLayout = event => {
-    const { height, width } = event.nativeEvent.layout;
-    if (
-      this.state.layout.initWidth === width &&
-      this.state.layout.initHeight === height
-    ) {
-      return;
-    }
-    const layout = {
-      ...this.state.layout,
-      initHeight: height,
-      initWidth: width,
-      isMeasured: true,
-    };
-
-    layout.height.setValue(height);
-    layout.width.setValue(width);
-
-    const nextState = {
-      ...this.state,
-      layout,
-    };
-
-    this._transitionProps = buildTransitionProps(this.props, nextState);
-    this.setState(nextState);
-  };
-
-  _onTransitionEnd = () => {
-    if (!this._isMounted) {
-      return;
-    }
-    const prevTransitionProps = this._prevTransitionProps;
-    this._prevTransitionProps = null;
-
-    const scenes = filterStale(this.state.scenes);
-
-    const nextState = {
-      ...this.state,
-      scenes,
-    };
-
-    this._transitionProps = buildTransitionProps(this.props, nextState);
-
-    this.setState(nextState, async () => {
-      if (this.props.onTransitionEnd) {
-        const result = this.props.onTransitionEnd(
-          this._transitionProps,
-          prevTransitionProps
-        );
-
-        if (result instanceof Promise) {
-          await result;
-        }
-      }
-
-      if (this._queuedTransition) {
-        this._startTransition(
-          this._queuedTransition.nextProps,
-          this._queuedTransition.nextScenes,
-          this._queuedTransition.indexHasChanged
-        );
-        this._queuedTransition = null;
-      } else {
-        this._isTransitionRunning = false;
-      }
-    });
-  };
-}
-
-function buildTransitionProps(props, state) {
-  const { navigation } = props;
-
-  const { layout, position, progress, scenes } = state;
-
-  const scene = scenes.find(isSceneActive);
-
-  invariant(scene, 'Could not find active scene');
-
-  return {
-    layout,
-    navigation,
-    position,
-    progress,
-    scenes,
-    scene,
-    index: scene.index,
-  };
-}
-
-function isSceneNotStale(scene) {
-  return !scene.isStale;
-}
-
-function filterStale(scenes) {
-  const filtered = scenes.filter(isSceneNotStale);
-  if (filtered.length === scenes.length) {
-    return scenes;
-  }
-  return filtered;
-}
-
-function isSceneActive(scene) {
-  return scene.isActive;
-}
-
-const styles = StyleSheet.create({
-  main: {
-    flex: 1,
-  },
-});
-
-export default Transitioner;

src/views/__tests__/NavigationScenesReducer-test.js

@@ -1,303 +0,0 @@
-import ScenesReducer from '../ScenesReducer';
-
-/**
- * Simulate scenes transtion with changes of navigation states.
- */
-function testTransition(states) {
-  const routes = states.map(keys => ({
-    index: 0,
-    routes: keys.map(key => ({ key, routeName: '' })),
-    isTransitioning: false,
-  }));
-
-  let scenes = [];
-  let prevState = null;
-  routes.forEach(nextState => {
-    scenes = ScenesReducer(scenes, nextState, prevState);
-    prevState = nextState;
-  });
-
-  return scenes;
-}
-
-describe('ScenesReducer', () => {
-  it('gets initial scenes', () => {
-    const scenes = testTransition([['1', '2']]);
-
-    expect(scenes).toEqual([
-      {
-        index: 0,
-        isActive: true,
-        isStale: false,
-        key: 'scene_1',
-        route: {
-          key: '1',
-          routeName: '',
-        },
-      },
-      {
-        index: 1,
-        isActive: false,
-        isStale: false,
-        key: 'scene_2',
-        route: {
-          key: '2',
-          routeName: '',
-        },
-      },
-    ]);
-  });
-
-  it('pushes new scenes', () => {
-    // Transition from ['1', '2'] to ['1', '2', '3'].
-    const scenes = testTransition([['1', '2'], ['1', '2', '3']]);
-
-    expect(scenes).toEqual([
-      {
-        index: 0,
-        isActive: true,
-        isStale: false,
-        key: 'scene_1',
-        route: {
-          key: '1',
-          routeName: '',
-        },
-      },
-      {
-        index: 1,
-        isActive: false,
-        isStale: false,
-        key: 'scene_2',
-        route: {
-          key: '2',
-          routeName: '',
-        },
-      },
-      {
-        index: 2,
-        isActive: false,
-        isStale: false,
-        key: 'scene_3',
-        route: {
-          key: '3',
-          routeName: '',
-        },
-      },
-    ]);
-  });
-
-  it('gets active scene when index changes', () => {
-    const state1 = {
-      index: 0,
-      routes: [{ key: '1', routeName: '' }, { key: '2', routeName: '' }],
-      isTransitioning: false,
-    };
-
-    const state2 = {
-      index: 1,
-      routes: [{ key: '1', routeName: '' }, { key: '2', routeName: '' }],
-      isTransitioning: false,
-    };
-
-    const scenes1 = ScenesReducer([], state1, null);
-    const scenes2 = ScenesReducer(scenes1, state2, state1);
-    const route = scenes2.find(scene => scene.isActive).route;
-    expect(route).toEqual({ key: '2', routeName: '' });
-  });
-
-  it('gets same scenes', () => {
-    const state1 = {
-      index: 0,
-      routes: [{ key: '1', routeName: '' }, { key: '2', routeName: '' }],
-      isTransitioning: false,
-    };
-
-    const state2 = {
-      index: 0,
-      routes: [{ key: '1', routeName: '' }, { key: '2', routeName: '' }],
-      isTransitioning: false,
-    };
-
-    const scenes1 = ScenesReducer([], state1, null);
-    const scenes2 = ScenesReducer(scenes1, state2, state1);
-    expect(scenes1).toBe(scenes2);
-  });
-
-  it('gets different scenes when keys are different', () => {
-    const state1 = {
-      index: 0,
-      routes: [{ key: '1', routeName: '' }, { key: '2', routeName: '' }],
-      isTransitioning: false,
-    };
-
-    const state2 = {
-      index: 0,
-      routes: [{ key: '2', routeName: '' }, { key: '1', routeName: '' }],
-      isTransitioning: false,
-    };
-
-    const scenes1 = ScenesReducer([], state1, null);
-    const scenes2 = ScenesReducer(scenes1, state2, state1);
-    expect(scenes1).not.toBe(scenes2);
-  });
-
-  it('gets different scenes when routes are different', () => {
-    const state1 = {
-      index: 0,
-      routes: [
-        { key: '1', x: 1, routeName: '' },
-        { key: '2', x: 2, routeName: '' },
-      ],
-      isTransitioning: false,
-    };
-
-    const state2 = {
-      index: 0,
-      routes: [
-        { key: '1', x: 3, routeName: '' },
-        { key: '2', x: 4, routeName: '' },
-      ],
-      isTransitioning: false,
-    };
-
-    const scenes1 = ScenesReducer([], state1, null);
-    const scenes2 = ScenesReducer(scenes1, state2, state1);
-    expect(scenes1).not.toBe(scenes2);
-  });
-
-  it('gets different scenes when state index changes', () => {
-    const state1 = {
-      index: 0,
-      routes: [
-        { key: '1', x: 1, routeName: '' },
-        { key: '2', x: 2, routeName: '' },
-      ],
-      isTransitioning: false,
-    };
-
-    const state2 = {
-      index: 1,
-      routes: [
-        { key: '1', x: 1, routeName: '' },
-        { key: '2', x: 2, routeName: '' },
-      ],
-      isTransitioning: false,
-    };
-
-    const scenes1 = ScenesReducer([], state1, null);
-    const scenes2 = ScenesReducer(scenes1, state2, state1);
-    expect(scenes1).not.toBe(scenes2);
-  });
-
-  it('pops scenes', () => {
-    // Transition from ['1', '2', '3'] to ['1', '2'].
-    const scenes = testTransition([['1', '2', '3'], ['1', '2']]);
-
-    expect(scenes).toEqual([
-      {
-        index: 0,
-        isActive: true,
-        isStale: false,
-        key: 'scene_1',
-        route: {
-          key: '1',
-          routeName: '',
-        },
-      },
-      {
-        index: 1,
-        isActive: false,
-        isStale: false,
-        key: 'scene_2',
-        route: {
-          key: '2',
-          routeName: '',
-        },
-      },
-      {
-        index: 2,
-        isActive: false,
-        isStale: true,
-        key: 'scene_3',
-        route: {
-          key: '3',
-          routeName: '',
-        },
-      },
-    ]);
-  });
-
-  it('replaces scenes', () => {
-    const scenes = testTransition([['1', '2'], ['3']]);
-
-    expect(scenes).toEqual([
-      {
-        index: 0,
-        isActive: false,
-        isStale: true,
-        key: 'scene_1',
-        route: {
-          key: '1',
-          routeName: '',
-        },
-      },
-      {
-        index: 0,
-        isActive: true,
-        isStale: false,
-        key: 'scene_3',
-        route: {
-          key: '3',
-          routeName: '',
-        },
-      },
-      {
-        index: 1,
-        isActive: false,
-        isStale: true,
-        key: 'scene_2',
-        route: {
-          key: '2',
-          routeName: '',
-        },
-      },
-    ]);
-  });
-
-  it('revives scenes', () => {
-    const scenes = testTransition([['1', '2'], ['3'], ['2']]);
-
-    expect(scenes).toEqual([
-      {
-        index: 0,
-        isActive: false,
-        isStale: true,
-        key: 'scene_1',
-        route: {
-          key: '1',
-          routeName: '',
-        },
-      },
-      {
-        index: 0,
-        isActive: true,
-        isStale: false,
-        key: 'scene_2',
-        route: {
-          key: '2',
-          routeName: '',
-        },
-      },
-      {
-        index: 0,
-        isActive: false,
-        isStale: true,
-        key: 'scene_3',
-        route: {
-          key: '3',
-          routeName: '',
-        },
-      },
-    ]);
-  });
-});

src/views/__tests__/Transitioner-test.js

@@ -1,49 +0,0 @@
-/* eslint react/display-name:0 */
-import React from 'react';
-import renderer from 'react-test-renderer';
-import Transitioner from '../Transitioner';
-
-describe('Transitioner', () => {
-  it('should not trigger onTransitionStart and onTransitionEnd when route params are changed', () => {
-    const onTransitionStartCallback = jest.fn();
-    const onTransitionEndCallback = jest.fn();
-
-    const transitionerProps = {
-      configureTransition: (transitionProps, prevTransitionProps) => ({}),
-      navigation: {
-        state: {
-          index: 0,
-          routes: [
-            { key: '1', routeName: 'Foo' },
-            { key: '2', routeName: 'Bar' },
-          ],
-        },
-        goBack: () => false,
-        dispatch: () => false,
-        setParams: () => false,
-        navigate: () => false,
-      },
-      render: () => <div />,
-      onTransitionStart: onTransitionStartCallback,
-      onTransitionEnd: onTransitionEndCallback,
-    };
-
-    const nextTransitionerProps = {
-      ...transitionerProps,
-      navigation: {
-        ...transitionerProps.navigation,
-        state: {
-          index: 0,
-          routes: [
-            { key: '1', routeName: 'Foo', params: { name: 'Zoom' } },
-            { key: '2', routeName: 'Bar' },
-          ],
-        },
-      },
-    };
-    const component = renderer.create(<Transitioner {...transitionerProps} />);
-    component.update(<Transitioner {...nextTransitionerProps} />);
-    expect(onTransitionStartCallback).not.toBeCalled();
-    expect(onTransitionEndCallback).not.toBeCalled();
-  });
-});