From 331b6a4a1aee5e25e6ca3fe1be4333b22fc45eb8 Mon Sep 17 00:00:00 2001
From: Vladislav Shabanov <vshabanov88@gmail.com>
Date: Fri, 15 Jun 2018 22:10:43 +0700
Subject: [PATCH] Make headers of non-standard heights work correctly in
 StackNavigator when header is null (Fixes #4208) (#4353)

* Measure header height dynamically

* Add comment

* StacksOverTopTabs playground example
---
 .../examples/NavigationPlayground/js/App.js   |   6 +
 .../js/StacksOverTopTabs.js                   | 130 +++++++++
 .../NavigationPlayground/package.json         |   3 +-
 .../examples/NavigationPlayground/yarn.lock   |   2 +-
 .../NestedNavigator-test.js.snap              | 218 +++++++-------
 .../__snapshots__/StackNavigator-test.js.snap | 276 +++++++++---------
 .../src/views/StackView/StackViewLayout.js    |  31 +-
 7 files changed, 411 insertions(+), 255 deletions(-)
 create mode 100644 packages/react-navigation/examples/NavigationPlayground/js/StacksOverTopTabs.js

diff --git a/packages/react-navigation/examples/NavigationPlayground/js/App.js b/packages/react-navigation/examples/NavigationPlayground/js/App.js
index 6435338e..e21c9738 100644
--- a/packages/react-navigation/examples/NavigationPlayground/js/App.js
+++ b/packages/react-navigation/examples/NavigationPlayground/js/App.js
@@ -26,6 +26,7 @@ import TabsInDrawer from './TabsInDrawer';
 import ModalStack from './ModalStack';
 import StacksInTabs from './StacksInTabs';
 import StacksOverTabs from './StacksOverTabs';
+import StacksOverTopTabs from './StacksOverTopTabs';
 import StacksWithKeys from './StacksWithKeys';
 import InactiveStack from './InactiveStack';
 import StackWithCustomHeaderBackImage from './StackWithCustomHeaderBackImage';
@@ -105,6 +106,10 @@ const ExampleInfo = {
     name: 'Stacks over Tabs',
     description: 'Nested stack navigation that pushes on top of tabs',
   },
+  StacksOverTopTabs: {
+    name: 'Stacks over Top Tabs with non-standard header height',
+    description: 'Tab navigator in stack with custom header heights',
+  },
   StacksWithKeys: {
     name: 'Link in Stack with keys',
     description: 'Use keys to link between screens',
@@ -146,6 +151,7 @@ const ExampleRoutes = {
   StacksWithKeys: StacksWithKeys,
   StacksInTabs: StacksInTabs,
   StacksOverTabs: StacksOverTabs,
+  StacksOverTopTabs: StacksOverTopTabs,
   LinkStack: {
     screen: SimpleStack,
     path: 'people/Jordan',
diff --git a/packages/react-navigation/examples/NavigationPlayground/js/StacksOverTopTabs.js b/packages/react-navigation/examples/NavigationPlayground/js/StacksOverTopTabs.js
new file mode 100644
index 00000000..93f21868
--- /dev/null
+++ b/packages/react-navigation/examples/NavigationPlayground/js/StacksOverTopTabs.js
@@ -0,0 +1,130 @@
+/**
+ * @flow
+ */
+
+import React from 'react';
+import { View, ScrollView, StatusBar, StyleSheet } from 'react-native';
+import {
+  SafeAreaView,
+  createStackNavigator,
+  createMaterialTopTabNavigator,
+} from 'react-navigation';
+import { Constants } from 'expo';
+import { MaterialTopTabBar } from 'react-navigation-tabs';
+
+import SampleText from './SampleText';
+import { Button } from './commonComponents/ButtonWithMargin';
+
+const HEADER_HEIGHT = 64;
+
+const MyNavScreen = ({ navigation, banner }) => (
+  <ScrollView>
+    <SafeAreaView forceInset={{ horizontal: 'always' }}>
+      <SampleText>{banner}</SampleText>
+      <Button
+        onPress={() => navigation.navigate('Profile', { name: 'Jordan' })}
+        title="Open profile screen"
+      />
+      <Button
+        onPress={() => navigation.navigate('NotifSettings')}
+        title="Open notifications screen"
+      />
+      <Button
+        onPress={() => navigation.navigate('SettingsTab')}
+        title="Go to settings tab"
+      />
+      <Button onPress={() => navigation.goBack(null)} title="Go back" />
+    </SafeAreaView>
+    <StatusBar barStyle="default" />
+  </ScrollView>
+);
+
+const MyHomeScreen = ({ navigation }) => (
+  <MyNavScreen banner="Home Screen" navigation={navigation} />
+);
+
+const MyProfileScreen = ({ navigation }) => (
+  <MyNavScreen
+    banner={`${navigation.state.params.name}s Profile`}
+    navigation={navigation}
+  />
+);
+
+const MyNotificationsSettingsScreen = ({ navigation }) => (
+  <MyNavScreen banner="Notifications Screen" navigation={navigation} />
+);
+
+const MySettingsScreen = ({ navigation }) => (
+  <MyNavScreen banner="Settings Screen" navigation={navigation} />
+);
+
+const styles = StyleSheet.create({
+  stackHeader: {
+    height: HEADER_HEIGHT,
+  },
+  tab: {
+    height: HEADER_HEIGHT,
+  },
+});
+
+function MaterialTopTabBarWithStatusBar(props) {
+  return (
+    <View style={{ paddingTop: Constants.statusBarHeight }}>
+      <MaterialTopTabBar {...props} />
+    </View>
+  );
+}
+
+const TabNavigator = createMaterialTopTabNavigator(
+  {
+    MainTab: {
+      screen: MyHomeScreen,
+      navigationOptions: {
+        title: 'Welcome',
+      },
+    },
+    SettingsTab: {
+      screen: MySettingsScreen,
+      navigationOptions: {
+        title: 'Settings',
+      },
+    },
+  },
+  {
+    tabBarComponent: MaterialTopTabBarWithStatusBar,
+    tabBarOptions: {
+      tabStyle: styles.tab,
+    },
+  }
+);
+
+const StackNavigator = createStackNavigator(
+  {
+    Root: {
+      screen: TabNavigator,
+      navigationOptions: {
+        header: null,
+        headerMode: 'none',
+      },
+    },
+    NotifSettings: {
+      screen: MyNotificationsSettingsScreen,
+      navigationOptions: {
+        title: 'Notifications',
+      },
+    },
+    Profile: {
+      screen: MyProfileScreen,
+      navigationOptions: ({ navigation }) => ({
+        title: `${navigation.state.params.name}'s Profile!`,
+      }),
+    },
+  },
+  {
+    navigationOptions: {
+      headerStyle: styles.stackHeader,
+    },
+  }
+);
+
+export default StackNavigator;
diff --git a/packages/react-navigation/examples/NavigationPlayground/package.json b/packages/react-navigation/examples/NavigationPlayground/package.json
index 299d6efb..ebe1a941 100644
--- a/packages/react-navigation/examples/NavigationPlayground/package.json
+++ b/packages/react-navigation/examples/NavigationPlayground/package.json
@@ -18,7 +18,8 @@
     "react-native-iphone-x-helper": "^1.0.2",
     "react-navigation": "link:../..",
     "react-navigation-header-buttons": "^0.0.4",
-    "react-navigation-material-bottom-tabs": "0.1.3"
+    "react-navigation-material-bottom-tabs": "0.1.3",
+    "react-navigation-tabs": "^0.5.1"
   },
   "devDependencies": {
     "babel-jest": "^22.4.1",
diff --git a/packages/react-navigation/examples/NavigationPlayground/yarn.lock b/packages/react-navigation/examples/NavigationPlayground/yarn.lock
index db22de1b..4f2b0f35 100644
--- a/packages/react-navigation/examples/NavigationPlayground/yarn.lock
+++ b/packages/react-navigation/examples/NavigationPlayground/yarn.lock
@@ -5789,7 +5789,7 @@ react-navigation-tabs@0.2.0-rc.0:
     react-native-safe-area-view "^0.7.0"
     react-native-tab-view "~0.0.77"
 
-react-navigation-tabs@0.5.1:
+react-navigation-tabs@0.5.1, react-navigation-tabs@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.5.1.tgz#ed33bce3a3e21b92646700de25bd94b8fc570371"
   dependencies:
diff --git a/packages/react-navigation/src/navigators/__tests__/__snapshots__/NestedNavigator-test.js.snap b/packages/react-navigation/src/navigators/__tests__/__snapshots__/NestedNavigator-test.js.snap
index 0eef7f36..eeb13bec 100644
--- a/packages/react-navigation/src/navigators/__tests__/__snapshots__/NestedNavigator-test.js.snap
+++ b/packages/react-navigation/src/navigators/__tests__/__snapshots__/NestedNavigator-test.js.snap
@@ -149,49 +149,35 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
               />
             </View>
             <View
-              collapsable={undefined}
-              style={
-                Object {
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
-                }
-              }
+              onLayout={[Function]}
+              pointerEvents="box-none"
             >
               <View
                 collapsable={undefined}
-                onLayout={[Function]}
-                pointerEvents="box-none"
                 style={
                   Object {
-                    "backgroundColor": "#F7F7F7",
-                    "borderBottomColor": "#A7A7AA",
-                    "borderBottomWidth": 0.5,
-                    "height": 64,
-                    "paddingBottom": 0,
-                    "paddingLeft": 0,
-                    "paddingRight": 0,
-                    "paddingTop": 20,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
                   }
                 }
               >
                 <View
+                  collapsable={undefined}
+                  onLayout={[Function]}
+                  pointerEvents="box-none"
                   style={
                     Object {
-                      "bottom": 0,
-                      "left": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                    }
-                  }
-                />
-                <View
-                  style={
-                    Object {
-                      "flex": 1,
+                      "backgroundColor": "#F7F7F7",
+                      "borderBottomColor": "#A7A7AA",
+                      "borderBottomWidth": 0.5,
+                      "height": 64,
+                      "paddingBottom": 0,
+                      "paddingLeft": 0,
+                      "paddingRight": 0,
+                      "paddingTop": 20,
                     }
                   }
                 >
@@ -199,50 +185,69 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
                     style={
                       Object {
                         "bottom": 0,
-                        "flexDirection": "row",
                         "left": 0,
                         "position": "absolute",
                         "right": 0,
                         "top": 0,
                       }
                     }
+                  />
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                      }
+                    }
                   >
                     <View
-                      collapsable={undefined}
-                      pointerEvents="box-none"
                       style={
                         Object {
-                          "alignItems": "center",
-                          "backgroundColor": "transparent",
                           "bottom": 0,
                           "flexDirection": "row",
-                          "justifyContent": "center",
                           "left": 0,
-                          "opacity": 1,
                           "position": "absolute",
                           "right": 0,
                           "top": 0,
                         }
                       }
                     >
-                      <Text
-                        accessibilityTraits="header"
-                        accessible={true}
-                        allowFontScaling={true}
+                      <View
                         collapsable={undefined}
-                        ellipsizeMode="tail"
-                        numberOfLines={1}
-                        onLayout={[Function]}
+                        pointerEvents="box-none"
                         style={
                           Object {
-                            "color": "rgba(0, 0, 0, .9)",
-                            "fontSize": 17,
-                            "fontWeight": "700",
-                            "marginHorizontal": 16,
-                            "textAlign": "center",
+                            "alignItems": "center",
+                            "backgroundColor": "transparent",
+                            "bottom": 0,
+                            "flexDirection": "row",
+                            "justifyContent": "center",
+                            "left": 0,
+                            "opacity": 1,
+                            "position": "absolute",
+                            "right": 0,
+                            "top": 0,
                           }
                         }
-                      />
+                      >
+                        <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>
@@ -253,49 +258,35 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
       </View>
     </View>
     <View
-      collapsable={undefined}
-      style={
-        Object {
-          "transform": Array [
-            Object {
-              "translateX": 0,
-            },
-          ],
-        }
-      }
+      onLayout={[Function]}
+      pointerEvents="box-none"
     >
       <View
         collapsable={undefined}
-        onLayout={[Function]}
-        pointerEvents="box-none"
         style={
           Object {
-            "backgroundColor": "#F7F7F7",
-            "borderBottomColor": "#A7A7AA",
-            "borderBottomWidth": 0.5,
-            "height": 64,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 20,
+            "transform": Array [
+              Object {
+                "translateX": 0,
+              },
+            ],
           }
         }
       >
         <View
+          collapsable={undefined}
+          onLayout={[Function]}
+          pointerEvents="box-none"
           style={
             Object {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            }
-          }
-        />
-        <View
-          style={
-            Object {
-              "flex": 1,
+              "backgroundColor": "#F7F7F7",
+              "borderBottomColor": "#A7A7AA",
+              "borderBottomWidth": 0.5,
+              "height": 64,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 20,
             }
           }
         >
@@ -303,50 +294,69 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
             style={
               Object {
                 "bottom": 0,
-                "flexDirection": "row",
                 "left": 0,
                 "position": "absolute",
                 "right": 0,
                 "top": 0,
               }
             }
+          />
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
           >
             <View
-              collapsable={undefined}
-              pointerEvents="box-none"
               style={
                 Object {
-                  "alignItems": "center",
-                  "backgroundColor": "transparent",
                   "bottom": 0,
                   "flexDirection": "row",
-                  "justifyContent": "center",
                   "left": 0,
-                  "opacity": 1,
                   "position": "absolute",
                   "right": 0,
                   "top": 0,
                 }
               }
             >
-              <Text
-                accessibilityTraits="header"
-                accessible={true}
-                allowFontScaling={true}
+              <View
                 collapsable={undefined}
-                ellipsizeMode="tail"
-                numberOfLines={1}
-                onLayout={[Function]}
+                pointerEvents="box-none"
                 style={
                   Object {
-                    "color": "rgba(0, 0, 0, .9)",
-                    "fontSize": 17,
-                    "fontWeight": "700",
-                    "marginHorizontal": 16,
-                    "textAlign": "center",
+                    "alignItems": "center",
+                    "backgroundColor": "transparent",
+                    "bottom": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
-              />
+              >
+                <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>
diff --git a/packages/react-navigation/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap b/packages/react-navigation/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap
index b0badb14..247a400d 100644
--- a/packages/react-navigation/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap
+++ b/packages/react-navigation/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap
@@ -76,50 +76,36 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
       />
     </View>
     <View
-      collapsable={undefined}
-      style={
-        Object {
-          "transform": Array [
-            Object {
-              "translateX": 0,
-            },
-          ],
-        }
-      }
+      onLayout={[Function]}
+      pointerEvents="box-none"
     >
       <View
         collapsable={undefined}
-        onLayout={[Function]}
-        pointerEvents="box-none"
         style={
           Object {
-            "backgroundColor": "red",
-            "borderBottomColor": "#A7A7AA",
-            "borderBottomWidth": 0.5,
-            "height": 64,
-            "opacity": 0.5,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 20,
+            "transform": Array [
+              Object {
+                "translateX": 0,
+              },
+            ],
           }
         }
       >
         <View
+          collapsable={undefined}
+          onLayout={[Function]}
+          pointerEvents="box-none"
           style={
             Object {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            }
-          }
-        />
-        <View
-          style={
-            Object {
-              "flex": 1,
+              "backgroundColor": "red",
+              "borderBottomColor": "#A7A7AA",
+              "borderBottomWidth": 0.5,
+              "height": 64,
+              "opacity": 0.5,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 20,
             }
           }
         >
@@ -127,70 +113,89 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
             style={
               Object {
                 "bottom": 0,
-                "flexDirection": "row",
                 "left": 0,
                 "position": "absolute",
                 "right": 0,
                 "top": 0,
               }
             }
+          />
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
           >
             <View
-              collapsable={undefined}
-              pointerEvents="box-none"
               style={
                 Object {
-                  "alignItems": "center",
-                  "backgroundColor": "transparent",
                   "bottom": 0,
                   "flexDirection": "row",
-                  "justifyContent": "center",
-                  "left": 70,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 70,
-                  "top": 0,
-                }
-              }
-            >
-              <Text
-                accessibilityTraits="header"
-                accessible={true}
-                allowFontScaling={true}
-                collapsable={undefined}
-                ellipsizeMode="tail"
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgba(0, 0, 0, .9)",
-                    "fontSize": 17,
-                    "fontWeight": "700",
-                    "marginHorizontal": 16,
-                    "textAlign": "center",
-                  }
-                }
-              >
-                Welcome anonymous
-              </Text>
-            </View>
-            <View
-              collapsable={undefined}
-              pointerEvents="box-none"
-              style={
-                Object {
-                  "alignItems": "center",
-                  "backgroundColor": "transparent",
-                  "bottom": 0,
-                  "flexDirection": "row",
-                  "opacity": 1,
+                  "left": 0,
                   "position": "absolute",
                   "right": 0,
                   "top": 0,
                 }
               }
             >
-              <View />
+              <View
+                collapsable={undefined}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "backgroundColor": "transparent",
+                    "bottom": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "left": 70,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 70,
+                    "top": 0,
+                  }
+                }
+              >
+                <Text
+                  accessibilityTraits="header"
+                  accessible={true}
+                  allowFontScaling={true}
+                  collapsable={undefined}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgba(0, 0, 0, .9)",
+                      "fontSize": 17,
+                      "fontWeight": "700",
+                      "marginHorizontal": 16,
+                      "textAlign": "center",
+                    }
+                  }
+                >
+                  Welcome anonymous
+                </Text>
+              </View>
+              <View
+                collapsable={undefined}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "backgroundColor": "transparent",
+                    "bottom": 0,
+                    "flexDirection": "row",
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <View />
+              </View>
             </View>
           </View>
         </View>
@@ -276,50 +281,36 @@ exports[`StackNavigator renders successfully 1`] = `
       />
     </View>
     <View
-      collapsable={undefined}
-      style={
-        Object {
-          "transform": Array [
-            Object {
-              "translateX": 0,
-            },
-          ],
-        }
-      }
+      onLayout={[Function]}
+      pointerEvents="box-none"
     >
       <View
         collapsable={undefined}
-        onLayout={[Function]}
-        pointerEvents="box-none"
         style={
           Object {
-            "backgroundColor": "red",
-            "borderBottomColor": "#A7A7AA",
-            "borderBottomWidth": 0.5,
-            "height": 64,
-            "opacity": 0.5,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 20,
+            "transform": Array [
+              Object {
+                "translateX": 0,
+              },
+            ],
           }
         }
       >
         <View
+          collapsable={undefined}
+          onLayout={[Function]}
+          pointerEvents="box-none"
           style={
             Object {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            }
-          }
-        />
-        <View
-          style={
-            Object {
-              "flex": 1,
+              "backgroundColor": "red",
+              "borderBottomColor": "#A7A7AA",
+              "borderBottomWidth": 0.5,
+              "height": 64,
+              "opacity": 0.5,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 20,
             }
           }
         >
@@ -327,52 +318,71 @@ exports[`StackNavigator renders successfully 1`] = `
             style={
               Object {
                 "bottom": 0,
-                "flexDirection": "row",
                 "left": 0,
                 "position": "absolute",
                 "right": 0,
                 "top": 0,
               }
             }
+          />
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
           >
             <View
-              collapsable={undefined}
-              pointerEvents="box-none"
               style={
                 Object {
-                  "alignItems": "center",
-                  "backgroundColor": "transparent",
                   "bottom": 0,
                   "flexDirection": "row",
-                  "justifyContent": "center",
                   "left": 0,
-                  "opacity": 1,
                   "position": "absolute",
                   "right": 0,
                   "top": 0,
                 }
               }
             >
-              <Text
-                accessibilityTraits="header"
-                accessible={true}
-                allowFontScaling={true}
+              <View
                 collapsable={undefined}
-                ellipsizeMode="tail"
-                numberOfLines={1}
-                onLayout={[Function]}
+                pointerEvents="box-none"
                 style={
                   Object {
-                    "color": "rgba(0, 0, 0, .9)",
-                    "fontSize": 17,
-                    "fontWeight": "700",
-                    "marginHorizontal": 16,
-                    "textAlign": "center",
+                    "alignItems": "center",
+                    "backgroundColor": "transparent",
+                    "bottom": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "left": 0,
+                    "opacity": 1,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
               >
-                Welcome anonymous
-              </Text>
+                <Text
+                  accessibilityTraits="header"
+                  accessible={true}
+                  allowFontScaling={true}
+                  collapsable={undefined}
+                  ellipsizeMode="tail"
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgba(0, 0, 0, .9)",
+                      "fontSize": 17,
+                      "fontWeight": "700",
+                      "marginHorizontal": 16,
+                      "textAlign": "center",
+                    }
+                  }
+                >
+                  Welcome anonymous
+                </Text>
+              </View>
             </View>
           </View>
         </View>
diff --git a/packages/react-navigation/src/views/StackView/StackViewLayout.js b/packages/react-navigation/src/views/StackView/StackViewLayout.js
index 2f64ccc5..d0aedfe7 100644
--- a/packages/react-navigation/src/views/StackView/StackViewLayout.js
+++ b/packages/react-navigation/src/views/StackView/StackViewLayout.js
@@ -89,6 +89,11 @@ 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,
+  };
+
   _renderHeader(scene, headerMode) {
     const { options } = scene.descriptor;
     const { header } = options;
@@ -395,12 +400,20 @@ class StackViewLayout extends React.Component {
     },
   });
 
+  _onFloatingHeaderLayout = e => {
+    this.setState({ floatingHeaderHeight: e.nativeEvent.layout.height });
+  };
+
   render() {
     let floatingHeader = null;
     const headerMode = this._getHeaderMode();
     if (headerMode === 'float') {
       const { scene } = this.props.transitionProps;
-      floatingHeader = this._renderHeader(scene, headerMode);
+      floatingHeader = (
+        <View pointerEvents="box-none" onLayout={this._onFloatingHeaderLayout}>
+          {this._renderHeader(scene, headerMode)}
+        </View>
+      );
     }
     const {
       transitionProps: { navigation, position, layout, scene, scenes },
@@ -518,21 +531,7 @@ class StackViewLayout extends React.Component {
     const headerMode = this._getHeaderMode();
     let marginTop = 0;
     if (!hasHeader && headerMode === 'float') {
-      const { isLandscape } = this.props;
-      let headerHeight;
-      if (Platform.OS === 'ios') {
-        if (isLandscape && !Platform.isPad) {
-          headerHeight = 52;
-        } else if (IS_IPHONE_X) {
-          headerHeight = 88;
-        } else {
-          headerHeight = 64;
-        }
-      } else {
-        headerHeight = 56;
-        // TODO (Android only): Need to handle translucent status bar.
-      }
-      marginTop = -headerHeight;
+      marginTop = -this.state.floatingHeaderHeight;
     }
 
     return (