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

@@ -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',

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;

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",

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: