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.
 

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [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)
@@ -31,7 +36,8 @@ 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.5.3...HEAD
+[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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "Routing and navigation for your React Native apps",
   "main": "src/react-navigation.js",
   "repository": {

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/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/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/StackView/StackViewLayout.js

@@ -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;