Release 2.5.4

* Prevent flicker in header in most common cases. Fixes https://github.com/react-navigation/react-navigation/issues/4264

* Update snapshots

.github/ISSUE_TEMPLATE.md

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

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,17 +1,21 @@
 Please provide enough information so that others can review your pull request:
 
+## Motivation
+
 Explain the **motivation** for making this change. What existing problem does the pull request solve?
 
-Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise split it.
+## Test plan
 
-**Test plan (required)**
-
-Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.
+Demonstrate the code is solid. Example: the exact commands you ran and their output, screenshots / videos if the pull request changes UI.
 
 Make sure you test on both platforms if your change affects both platforms.
 
 The code must pass tests.
 
-**Code formatting**
+## Code formatting
 
-Look around. Match the style of the rest of the codebase.
+Look around. Match the style of the rest of the codebase. Run `yarn format` before committing.
+
+## Changelog
+
+Add an entry under the "Unreleased" heading in [CHANGELOG.md](https://github.com/react-navigation/react-navigation/blob/master/CHANGELOG.md#unreleased) which explains your change.

CHANGELOG.md

@@ -0,0 +1,45 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [2.5.4] - [2018-06-27](https://github.com/react-navigation/react-navigation/releases/tag/2.5.4)
+### Fixed
+- Header no longer sometimes flashes for 1 frame when using `header: null` on initial route of stack with floating header.
+- Export `createSwitchNavigator` in react-navigation.web.js
+
+## [2.5.3] - [2018-06-23](https://github.com/react-navigation/react-navigation/releases/tag/2.5.3)
+### Fixed
+- `setParams` applies to the navigation object it is called on even if that is the navigation object for a navigation view (more details in https://github.com/react-navigation/react-navigation/issues/4497)
+
+## [2.5.2] - [2018-06-23](https://github.com/react-navigation/react-navigation/releases/tag/2.5.2)
+### Fixed
+- Update react-navigation-drawer to fix regression in toggleDrawer
+
+## [2.5.1] - [2018-06-22](https://github.com/react-navigation/react-navigation/releases/tag/2.5.1)
+### Fixed
+- `transitionConfig` in stack navigator no longer passes incorrect `fromTransitionProps` when navigating back
+
+## [2.5.0] - [2018-06-22](https://github.com/react-navigation/react-navigation/releases/tag/2.5.0)
+### Changed
+- Refactor internals to make it play more nicely with web
+
+### Fixed
+- `const defaultGetStateForAction = SwitchBasedNavigator.router.getStateForAction` no longer throws error.
+- Updated react-navigation-drawer to 0.4.1 which should fix issues related to automatically closing drawer when changing routes.
+
+## [2.4.1] - [2018-06-21](https://github.com/react-navigation/react-navigation/releases/tag/2.4.1)
+### Changed
+- Improved examples
+
+[Unreleased]: https://github.com/react-navigation/react-navigation/compare/2.5.4...HEAD
+[2.5.4]: https://github.com/react-navigation/react-navigation/compare/2.5.3...2.5.4
+[2.5.3]: https://github.com/react-navigation/react-navigation/compare/2.5.2...2.5.3
+[2.5.2]: https://github.com/react-navigation/react-navigation/compare/2.5.1...2.5.2
+[2.5.1]: https://github.com/react-navigation/react-navigation/compare/2.5.0...2.5.1
+[2.5.0]: https://github.com/react-navigation/react-navigation/compare/2.4.1...2.5.0
+[2.4.1]: https://github.com/react-navigation/react-navigation/compare/2.4.0...2.4.1

examples/NavigationPlayground/app.json

@@ -13,14 +13,15 @@
     },
     "sdkVersion": "27.0.0",
     "entryPoint": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
-    "packagerOpts": {
-      "assetExts": [
-        "ttf",
-        "mp4"
-      ]
-    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
+      "bundleIdentifier": "com.reactnavigation.example",
       "supportsTablet": true
+    },
+    "android": {
+      "package": "com.reactnavigation.example"
     }
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "2.4.1",
+  "version": "2.5.4",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "repository": {
@@ -33,11 +33,10 @@
     "create-react-context": "^0.2.1",
     "hoist-non-react-statics": "^2.2.0",
     "path-to-regexp": "^1.7.0",
-    "prop-types": "^15.5.10",
     "react-lifecycles-compat": "^3",
     "react-native-safe-area-view": "^0.8.0",
     "react-navigation-deprecated-tab-navigator": "1.3.0",
-    "react-navigation-drawer": "0.3.2",
+    "react-navigation-drawer": "0.4.2",
     "react-navigation-tabs": "0.5.1"
   },
   "devDependencies": {

src/__tests__/NavigationContainer-test.js

@@ -5,7 +5,9 @@ import renderer from 'react-test-renderer';
 
 import NavigationActions from '../NavigationActions';
 import createStackNavigator from '../navigators/createStackNavigator';
-import { _TESTING_ONLY_reset_container_count } from '../createNavigationContainer';
+import createNavigationContainer, {
+  _TESTING_ONLY_reset_container_count,
+} from '../createNavigationContainer';
 
 describe('NavigationContainer', () => {
   jest.useFakeTimers();
@@ -19,7 +21,7 @@ describe('NavigationContainer', () => {
   const CarScreen = () => <div />;
   const DogScreen = () => <div />;
   const ElkScreen = () => <div />;
-  const NavigationContainer = createStackNavigator(
+  const Stack = createStackNavigator(
     {
       foo: {
         screen: FooScreen,
@@ -44,6 +46,7 @@ describe('NavigationContainer', () => {
       initialRouteName: 'foo',
     }
   );
+  const NavigationContainer = createNavigationContainer(Stack);
 
   describe('state.nav', () => {
     it("should be preloaded with the router's initial state", () => {
@@ -225,7 +228,7 @@ describe('NavigationContainer', () => {
 
       let spy = spyConsole();
 
-      it('warns when you render more than one navigator explicitly', () => {
+      it('warns when you render more than one container explicitly', () => {
         class BlankScreen extends React.Component {
           render() {
             return <View />;
@@ -242,13 +245,17 @@ describe('NavigationContainer', () => {
           }
         }
 
-        const ChildNavigator = createStackNavigator({
-          Child: BlankScreen,
-        });
+        const ChildNavigator = createNavigationContainer(
+          createStackNavigator({
+            Child: BlankScreen,
+          })
+        );
 
-        const RootStack = createStackNavigator({
-          Root: RootScreen,
-        });
+        const RootStack = createNavigationContainer(
+          createStackNavigator({
+            Root: RootScreen,
+          })
+        );
 
         renderer.create(<RootStack />).toJSON();
         expect(spy).toMatchSnapshot();

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NavigationContainer warnings detached navigators warns when you render more than one navigator explicitly 1`] = `
+exports[`NavigationContainer warnings detached navigators warns when you render more than one container explicitly 1`] = `
 Object {
   "console": [MockFunction] {
     "calls": Array [

src/getChildNavigation.js

@@ -1,5 +1,6 @@
 import getChildEventSubscriber from './getChildEventSubscriber';
 import getChildRouter from './getChildRouter';
+import getNavigationActionCreators from './routers/getNavigationActionCreators';
 import invariant from './utils/invariant';
 
 const createParamGetter = route => (paramName, defaultValue) => {
@@ -40,7 +41,9 @@ function getChildNavigation(navigation, childKey, getCurrentParentNavigation) {
     ...(childRouter
       ? childRouter.getActionCreators(focusedGrandChildRoute, childRoute.key)
       : {}),
+    ...getNavigationActionCreators(childRoute),
   };
+
   const actionHelpers = {};
   Object.keys(actionCreators).forEach(actionName => {
     actionHelpers[actionName] = (...args) => {

src/navigators/__tests__/NestedNavigator-test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import StackNavigator from '../createStackNavigator';
+import StackNavigator from '../createContainedStackNavigator';
 
 const SubNavigator = StackNavigator({
   Home: {

src/navigators/__tests__/StackNavigator-test.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { StyleSheet, View } from 'react-native';
 import renderer from 'react-test-renderer';
 
-import StackNavigator from '../createStackNavigator';
+import StackNavigator from '../createContainedStackNavigator';
 import withNavigation from '../../views/withNavigation';
 import { _TESTING_ONLY_reset_container_count } from '../../createNavigationContainer';
 

src/navigators/__tests__/SwitchNavigator-test.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { View } from 'react-native';
 import renderer from 'react-test-renderer';
 
-import SwitchNavigator from '../createSwitchNavigator';
+import SwitchNavigator from '../createContainedSwitchNavigator';
 
 const A = () => <View />;
 const B = () => <View />;

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

@@ -156,6 +156,7 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                 collapsable={undefined}
                 style={
                   Object {
+                    "backgroundColor": "#F7F7F7",
                     "transform": Array [
                       Object {
                         "translateX": 0,
@@ -265,6 +266,7 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
         collapsable={undefined}
         style={
           Object {
+            "backgroundColor": "#F7F7F7",
             "transform": Array [
               Object {
                 "translateX": 0,

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

@@ -83,6 +83,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
         collapsable={undefined}
         style={
           Object {
+            "backgroundColor": "#F7F7F7",
             "transform": Array [
               Object {
                 "translateX": 0,
@@ -288,6 +289,7 @@ exports[`StackNavigator renders successfully 1`] = `
         collapsable={undefined}
         style={
           Object {
+            "backgroundColor": "#F7F7F7",
             "transform": Array [
               Object {
                 "translateX": 0,

src/navigators/createContainedStackNavigator.js

@@ -0,0 +1,9 @@
+import createNavigationContainer from '../createNavigationContainer';
+import createStackNavigator from './createStackNavigator';
+
+const StackNavigator = (routeConfigs, config = {}) => {
+  const navigator = createStackNavigator(routeConfigs, config);
+  return createNavigationContainer(navigator);
+};
+
+export default StackNavigator;

src/navigators/createContainedSwitchNavigator.js

@@ -0,0 +1,9 @@
+import createNavigationContainer from '../createNavigationContainer';
+import createSwitchNavigator from './createSwitchNavigator';
+
+const SwitchNavigator = (routeConfigs, config = {}) => {
+  const navigator = createSwitchNavigator(routeConfigs, config);
+  return createNavigationContainer(navigator);
+};
+
+export default SwitchNavigator;

src/navigators/createStackNavigator.js

@@ -1,5 +1,3 @@
-import React from 'react';
-import createNavigationContainer from '../createNavigationContainer';
 import createKeyboardAwareNavigator from './createKeyboardAwareNavigator';
 import createNavigator from './createNavigator';
 import StackView from '../views/StackView/StackView';
@@ -33,8 +31,7 @@ function createStackNavigator(routeConfigMap, stackConfig = {}) {
     Navigator = createKeyboardAwareNavigator(Navigator);
   }
 
-  // HOC to provide the navigation prop for the top-level navigator (when the prop is missing)
-  return createNavigationContainer(Navigator);
+  return Navigator;
 }
 
 export default createStackNavigator;

src/navigators/createSwitchNavigator.js

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

src/react-navigation.js

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

src/react-navigation.web.js

@@ -8,11 +8,17 @@ module.exports = {
   get StateUtils() {
     return require('./StateUtils').default;
   },
+  get getNavigation() {
+    return require('./getNavigation').default;
+  },
 
   // Navigators
   get createNavigator() {
     return require('./navigators/createNavigator').default;
   },
+  get createSwitchNavigator() {
+    return require('./navigators/createSwitchNavigator').default;
+  },
 
   // Actions
   get NavigationActions() {

src/routers/StackRouter.js

@@ -8,7 +8,6 @@ import StateUtils from '../StateUtils';
 import validateRouteConfigMap from './validateRouteConfigMap';
 import invariant from '../utils/invariant';
 import { generateKey } from './KeyGenerator';
-import getNavigationActionCreators from './getNavigationActionCreators';
 
 function isEmpty(obj) {
   if (!obj) return true;
@@ -166,7 +165,6 @@ export default (routeConfigs, stackConfig = {}) => {
 
     getActionCreators(route, navStateKey) {
       return {
-        ...getNavigationActionCreators(route),
         ...getCustomActionCreators(route, navStateKey),
         pop: (n, params) =>
           StackActions.pop({

src/routers/SwitchRouter.js

@@ -5,7 +5,6 @@ import createConfigGetter from './createConfigGetter';
 import NavigationActions from '../NavigationActions';
 import StackActions from './StackActions';
 import validateRouteConfigMap from './validateRouteConfigMap';
-import getNavigationActionCreators from './getNavigationActionCreators';
 
 const defaultActionCreators = (route, navStateKey) => ({});
 
@@ -74,50 +73,47 @@ export default (routeConfigs, config = {}) => {
     };
   }
 
+  function getNextState(prevState, possibleNextState) {
+    if (!prevState) {
+      return possibleNextState;
+    }
+
+    let nextState;
+    if (prevState.index !== possibleNextState.index && resetOnBlur) {
+      const prevRouteName = prevState.routes[prevState.index].routeName;
+      const nextRoutes = [...possibleNextState.routes];
+      nextRoutes[prevState.index] = resetChildRoute(prevRouteName);
+
+      return {
+        ...possibleNextState,
+        routes: nextRoutes,
+      };
+    } else {
+      nextState = possibleNextState;
+    }
+
+    return nextState;
+  }
+
+  function getInitialState() {
+    const routes = order.map(resetChildRoute);
+    return {
+      routes,
+      index: initialRouteIndex,
+      isTransitioning: false,
+    };
+  }
+
   return {
     childRouters,
 
-    getInitialState() {
-      const routes = order.map(resetChildRoute);
-      return {
-        routes,
-        index: initialRouteIndex,
-        isTransitioning: false,
-      };
-    },
-
-    getNextState(prevState, possibleNextState) {
-      if (!prevState) {
-        return possibleNextState;
-      }
-
-      let nextState;
-      if (prevState.index !== possibleNextState.index && resetOnBlur) {
-        const prevRouteName = prevState.routes[prevState.index].routeName;
-        const nextRoutes = [...possibleNextState.routes];
-        nextRoutes[prevState.index] = resetChildRoute(prevRouteName);
-
-        return {
-          ...possibleNextState,
-          routes: nextRoutes,
-        };
-      } else {
-        nextState = possibleNextState;
-      }
-
-      return nextState;
-    },
-
     getActionCreators(route, stateKey) {
-      return {
-        ...getNavigationActionCreators(route),
-        ...getCustomActionCreators(route, stateKey),
-      };
+      return getCustomActionCreators(route, stateKey);
     },
 
     getStateForAction(action, inputState) {
       let prevState = inputState ? { ...inputState } : inputState;
-      let state = inputState || this.getInitialState();
+      let state = inputState || getInitialState();
       let activeChildIndex = state.index;
 
       if (action.type === NavigationActions.INIT) {
@@ -154,7 +150,7 @@ export default (routeConfigs, config = {}) => {
         if (activeChildState && activeChildState !== activeChildLastState) {
           const routes = [...state.routes];
           routes[state.index] = activeChildState;
-          return this.getNextState(prevState, {
+          return getNextState(prevState, {
             ...state,
             routes,
           });
@@ -204,7 +200,7 @@ export default (routeConfigs, config = {}) => {
           if (newChildState && newChildState !== childState) {
             const routes = [...state.routes];
             routes[activeChildIndex] = newChildState;
-            return this.getNextState(prevState, {
+            return getNextState(prevState, {
               ...state,
               routes,
               index: activeChildIndex,
@@ -232,7 +228,7 @@ export default (routeConfigs, config = {}) => {
             ...lastRoute,
             params,
           };
-          return this.getNextState(prevState, {
+          return getNextState(prevState, {
             ...state,
             routes,
           });
@@ -240,7 +236,7 @@ export default (routeConfigs, config = {}) => {
       }
 
       if (activeChildIndex !== state.index) {
-        return this.getNextState(prevState, {
+        return getNextState(prevState, {
           ...state,
           index: activeChildIndex,
         });
@@ -284,7 +280,7 @@ export default (routeConfigs, config = {}) => {
       }
 
       if (index !== state.index || routes !== state.routes) {
-        return this.getNextState(prevState, {
+        return getNextState(prevState, {
           ...state,
           index,
           routes,

src/routers/validateRouteConfigMap.js

@@ -21,25 +21,24 @@ function validateRouteConfigMap(routeConfigs) {
         typeof screenComponent !== 'string' &&
         !routeConfig.getScreen)
     ) {
-      throw new Error(
-        `The component for route '${routeName}' must be a ` +
-          'React component. For example:\n\n' +
-          "import MyScreen from './MyScreen';\n" +
-          '...\n' +
-          `${routeName}: MyScreen,\n` +
-          '}\n\n' +
-          'You can also use a navigator:\n\n' +
-          "import MyNavigator from './MyNavigator';\n" +
-          '...\n' +
-          `${routeName}: MyNavigator,\n` +
-          '}'
-      );
+      throw new Error(`The component for route '${routeName}' must be a React component. For example:
+
+import MyScreen from './MyScreen';
+...
+${routeName}: MyScreen,
+}
+
+You can also use a navigator:
+
+import MyNavigator from './MyNavigator';
+...
+${routeName}: MyNavigator,
+}`);
     }
 
     if (routeConfig.screen && routeConfig.getScreen) {
       throw new Error(
-        `Route '${routeName}' should declare a screen or ` +
-          'a getScreen, not both.'
+        `Route '${routeName}' should declare a screen or a getScreen, not both.`
       );
     }
   });

src/utils/invariant.js

@@ -1,14 +1,3 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
-
-'use strict';
-
 /**
  * Use invariant() to assert state which your program assumes to be true.
  *

src/utils/shallowEqual.js

@@ -1,19 +1,5 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @typechecks
- *
- */
-
 /*eslint-disable no-self-compare */
 
-'use strict';
-
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 
 /**
@@ -71,4 +57,4 @@ function shallowEqual(objA, objB) {
   return true;
 }
 
-module.exports = shallowEqual;
+export default shallowEqual;

src/views/Header/Header.js

@@ -491,7 +491,12 @@ class Header extends React.PureComponent {
     const forceInset = headerForceInset || { top: 'always', bottom: 'never' };
 
     return (
-      <Animated.View style={this.props.layoutInterpolator(this.props)}>
+      <Animated.View
+        style={[
+          this.props.layoutInterpolator(this.props),
+          { backgroundColor: DEFAULT_BACKGROUND_COLOR },
+        ]}
+      >
         <SafeAreaView forceInset={forceInset} style={containerStyles}>
           <View style={StyleSheet.absoluteFill}>
             {options.headerBackground}
@@ -529,9 +534,11 @@ if (Platform.OS === 'ios') {
   };
 }
 
+const DEFAULT_BACKGROUND_COLOR = Platform.OS === 'ios' ? '#F7F7F7' : '#FFF';
+
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: Platform.OS === 'ios' ? '#F7F7F7' : '#FFF',
+    backgroundColor: DEFAULT_BACKGROUND_COLOR,
     ...platformContainerStyles,
   },
   transparentContainer: {

src/views/Header/HeaderStyleInterpolator.js

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

src/views/NavigationConsumer.js

@@ -0,0 +1,3 @@
+import { NavigationConsumer } from './NavigationContext';
+
+export default NavigationConsumer;

src/views/NavigationContext.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import propTypes from 'prop-types';
 import createReactContext from 'create-react-context';
 
 const NavigationContext = createReactContext();

src/views/NavigationProvider.js

@@ -0,0 +1,3 @@
+import { NavigationProvider } from './NavigationContext';
+
+export default NavigationProvider;

src/views/SceneView.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import propTypes from 'prop-types';
 import { NavigationProvider } from './NavigationContext';
 
 export default class SceneView extends React.PureComponent {

src/views/StackView/StackView.js

@@ -3,7 +3,6 @@ import { NativeModules } from 'react-native';
 
 import StackViewLayout from './StackViewLayout';
 import Transitioner from '../Transitioner';
-import NavigationActions from '../../NavigationActions';
 import StackActions from '../../routers/StackActions';
 import TransitionConfigs from './StackViewTransitionConfigs';
 

src/views/StackView/StackViewLayout.js

@@ -21,7 +21,7 @@ import withOrientation from '../withOrientation';
 import { NavigationProvider } from '../NavigationContext';
 
 import TransitionConfigs from './StackViewTransitionConfigs';
-import * as ReactNativeFeatures from '../../utils/ReactNativeFeatures';
+import { supportsImprovedSpringAnimation } from '../../utils/ReactNativeFeatures';
 
 const emptyFunction = () => {};
 
@@ -68,6 +68,20 @@ const animatedSubscribeValue = animatedValue => {
   }
 };
 
+const getDefaultHeaderHeight = isLandscape => {
+  if (Platform.OS === 'ios') {
+    if (isLandscape && !Platform.isPad) {
+      return 32;
+    } else if (IS_IPHONE_X) {
+      return 88;
+    } else {
+      return 64;
+    }
+  } else {
+    return 56;
+  }
+};
+
 class StackViewLayout extends React.Component {
   /**
    * Used to identify the starting point of the position when the gesture starts, such that it can
@@ -89,10 +103,18 @@ class StackViewLayout extends React.Component {
    */
   _immediateIndex = null;
 
-  state = {
-    // Used when card's header is null and mode is float to make switch animation work correctly
-    floatingHeaderHeight: 0,
-  };
+  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;
@@ -119,7 +141,7 @@ class StackViewLayout extends React.Component {
     const {
       mode,
       transitionProps,
-      prevTransitionProps,
+      lastTransitionProps,
       ...passProps
     } = this.props;
 
@@ -154,10 +176,7 @@ class StackViewLayout extends React.Component {
   }
 
   _reset(resetToIndex, duration) {
-    if (
-      Platform.OS === 'ios' &&
-      ReactNativeFeatures.supportsImprovedSpringAnimation()
-    ) {
+    if (Platform.OS === 'ios' && supportsImprovedSpringAnimation()) {
       Animated.spring(this.props.transitionProps.position, {
         toValue: resetToIndex,
         stiffness: 5000,
@@ -197,10 +216,7 @@ class StackViewLayout extends React.Component {
       }
     };
 
-    if (
-      Platform.OS === 'ios' &&
-      ReactNativeFeatures.supportsImprovedSpringAnimation()
-    ) {
+    if (Platform.OS === 'ios' && supportsImprovedSpringAnimation()) {
       Animated.spring(position, {
         toValue,
         stiffness: 5000,
@@ -236,7 +252,7 @@ class StackViewLayout extends React.Component {
         return false;
       }
 
-      position.stopAnimation((value: number) => {
+      position.stopAnimation(value => {
         this._isResponding = true;
         this._gestureStartValue = value;
       });
@@ -244,7 +260,7 @@ class StackViewLayout extends React.Component {
     },
     onMoveShouldSetPanResponder: (event, gesture) => {
       const {
-        transitionProps: { navigation, position, layout, scene, scenes },
+        transitionProps: { navigation, layout, scene },
         mode,
       } = this.props;
       const { index } = navigation.state;
@@ -407,6 +423,7 @@ class StackViewLayout extends React.Component {
   render() {
     let floatingHeader = null;
     const headerMode = this._getHeaderMode();
+
     if (headerMode === 'float') {
       const { scene } = this.props.transitionProps;
       floatingHeader = (
@@ -416,18 +433,10 @@ class StackViewLayout extends React.Component {
       );
     }
     const {
-      transitionProps: { navigation, position, layout, scene, scenes },
+      transitionProps: { scene, scenes },
       mode,
     } = this.props;
-    const { index } = navigation.state;
-    const isVertical = mode === 'modal';
     const { options } = scene.descriptor;
-    const gestureDirection = options.gestureDirection;
-
-    const gestureDirectionInverted =
-      typeof gestureDirection === 'string'
-        ? gestureDirection === 'inverted'
-        : I18nManager.isRTL;
 
     const gesturesEnabled =
       typeof options.gesturesEnabled === 'boolean'
@@ -512,13 +521,14 @@ class StackViewLayout extends React.Component {
     return TransitionConfigs.getTransitionConfig(
       this.props.transitionConfig,
       this.props.transitionProps,
-      this.props.prevTransitionProps,
+      this.props.lastTransitionProps,
       isModal
     );
   };
 
   _renderCard = scene => {
     const { screenInterpolator } = this._getTransitionConfig();
+
     const style =
       screenInterpolator &&
       screenInterpolator({ ...this.props.transitionProps, scene });

src/views/StackView/StackViewTransitionConfigs.js

@@ -1,9 +1,9 @@
 import { Animated, Easing, Platform } from 'react-native';
 import StyleInterpolator from './StackViewStyleInterpolator';
-import * as ReactNativeFeatures from '../../utils/ReactNativeFeatures';
+import { supportsImprovedSpringAnimation } from '../../utils/ReactNativeFeatures';
 
 let IOSTransitionSpec;
-if (ReactNativeFeatures.supportsImprovedSpringAnimation()) {
+if (supportsImprovedSpringAnimation()) {
   // These are the exact values from UINavigationController's animation configuration
   IOSTransitionSpec = {
     timing: Animated.spring,

yarn.lock

@@ -4828,9 +4828,9 @@ react-navigation-deprecated-tab-navigator@1.3.0:
   dependencies:
     react-native-tab-view "^0.0.77"
 
-react-navigation-drawer@0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/react-navigation-drawer/-/react-navigation-drawer-0.3.2.tgz#f9b0bd29c6859500201ec4742e81db992074aec2"
+react-navigation-drawer@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/react-navigation-drawer/-/react-navigation-drawer-0.4.2.tgz#49aa1bc6684923294a9c112dce75d8ec4184c64f"
   dependencies:
     react-native-drawer-layout-polyfill "^1.3.2"