chore: publish

- @react-navigation/bottom-tabs@5.0.4
 - @react-navigation/compat@5.0.4
 - @react-navigation/core@5.1.3
 - @react-navigation/drawer@5.0.4
 - @react-navigation/material-bottom-tabs@5.0.4
 - @react-navigation/material-top-tabs@5.0.4
 - @react-navigation/native-stack@5.0.4
 - @react-navigation/native@5.0.4
 - @react-navigation/stack@5.0.4

example/android/ReactNavigationExample.iml

@@ -13,7 +13,7 @@
     <content url="file://$MODULE_DIR$">
       <excludeFolder url="file://$MODULE_DIR$/.gradle" />
     </content>
-    <orderEntry type="inheritedJdk" />
+    <orderEntry type="jdk" jdkName="1.8" jdkType="JavaSDK" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
 </module>

example/android/app/app.iml

@@ -161,32 +161,33 @@
     <orderEntry type="library" name="Gradle: com.facebook.fresco:imagepipeline-okhttp3:2.0.0@aar" level="project" />
     <orderEntry type="library" name="Gradle: io.nlopez.smartlocation:library:3.2.11@aar" level="project" />
     <orderEntry type="library" name="Gradle: org.webkit:android-jsc:r245459@aar" level="project" />
-    <orderEntry type="module" module-name="android-expo-permissions" />
-    <orderEntry type="module" module-name="android-expo-constants" />
-    <orderEntry type="module" module-name="android-unimodules-image-loader-interface" />
-    <orderEntry type="module" module-name="android-expo-web-browser" />
-    <orderEntry type="module" module-name="android-unimodules-react-native-adapter" />
-    <orderEntry type="module" module-name="android-expo-file-system" />
-    <orderEntry type="module" module-name="android-expo-location" />
-    <orderEntry type="module" module-name="android-expo-error-recovery" />
-    <orderEntry type="module" module-name="android-unimodules-permissions-interface" />
-    <orderEntry type="module" module-name="android-unimodules-core" />
-    <orderEntry type="module" module-name="android-expo-app-loader-provider" />
-    <orderEntry type="module" module-name="android-expo-font" />
-    <orderEntry type="module" module-name="android-expo-keep-awake" />
-    <orderEntry type="module" module-name="android-expo-linear-gradient" />
-    <orderEntry type="module" module-name="android-expo-sqlite" />
-    <orderEntry type="module" module-name="android-unimodules-barcode-scanner-interface" />
-    <orderEntry type="module" module-name="android-unimodules-camera-interface" />
-    <orderEntry type="module" module-name="android-unimodules-constants-interface" />
-    <orderEntry type="module" module-name="android-unimodules-face-detector-interface" />
-    <orderEntry type="module" module-name="android-unimodules-file-system-interface" />
-    <orderEntry type="module" module-name="android-unimodules-font-interface" />
-    <orderEntry type="module" module-name="android-unimodules-sensors-interface" />
-    <orderEntry type="module" module-name="android-unimodules-task-manager-interface" />
-    <orderEntry type="module" module-name="android-@react-native-community_masked-view" />
-    <orderEntry type="module" module-name="android-react-native-gesture-handler" />
-    <orderEntry type="module" module-name="android-react-native-reanimated" />
+    <orderEntry type="module" module-name="expo-permissions" />
+    <orderEntry type="module" module-name="expo-constants" />
+    <orderEntry type="module" module-name="unimodules-image-loader-interface" />
+    <orderEntry type="module" module-name="expo-web-browser" />
+    <orderEntry type="module" module-name="unimodules-react-native-adapter" />
+    <orderEntry type="module" module-name="expo-file-system" />
+    <orderEntry type="module" module-name="expo-location" />
+    <orderEntry type="module" module-name="expo-error-recovery" />
+    <orderEntry type="module" module-name="unimodules-permissions-interface" />
+    <orderEntry type="module" module-name="unimodules-core" />
+    <orderEntry type="module" module-name="expo-app-loader-provider" />
+    <orderEntry type="module" module-name="expo-font" />
+    <orderEntry type="module" module-name="expo-keep-awake" />
+    <orderEntry type="module" module-name="expo-linear-gradient" />
+    <orderEntry type="module" module-name="expo-sqlite" />
+    <orderEntry type="module" module-name="unimodules-barcode-scanner-interface" />
+    <orderEntry type="module" module-name="unimodules-camera-interface" />
+    <orderEntry type="module" module-name="unimodules-constants-interface" />
+    <orderEntry type="module" module-name="unimodules-face-detector-interface" />
+    <orderEntry type="module" module-name="unimodules-file-system-interface" />
+    <orderEntry type="module" module-name="unimodules-font-interface" />
+    <orderEntry type="module" module-name="unimodules-sensors-interface" />
+    <orderEntry type="module" module-name="unimodules-task-manager-interface" />
+    <orderEntry type="module" module-name="@react-native-community_masked-view" />
+    <orderEntry type="module" module-name="react-native-gesture-handler" />
+    <orderEntry type="module" module-name="react-native-reanimated" />
+    <orderEntry type="module" module-name="react-native-restart" />
     <orderEntry type="module" module-name="react-native-safe-area-context" />
     <orderEntry type="module" module-name="react-native-screens" />
   </component>

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.4](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.3...@react-navigation/bottom-tabs@5.0.4) (2020-02-14)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 ## [5.0.3](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.2...@react-navigation/bottom-tabs@5.0.3) (2020-02-12)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs

packages/bottom-tabs/package.json

@@ -10,7 +10,7 @@
     "android",
     "tab"
   ],
-  "version": "5.0.3",
+  "version": "5.0.4",
   "license": "MIT",
   "repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs",
   "main": "lib/commonjs/index.js",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.9.3",
-    "@react-navigation/native": "^5.0.3",
+    "@react-navigation/native": "^5.0.4",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.19",
     "@types/react-native": "^0.60.30",

packages/bottom-tabs/src/types.tsx

@@ -176,8 +176,8 @@ export type BottomTabBarOptions = {
    */
   tabStyle?: StyleProp<ViewStyle>;
   /**
-   * Whether the label is renderd below the icon or beside the icon.
-   * By default, in `vertical` orinetation, label is rendered below and in `horizontal` orientation, it's renderd beside.
+   * Whether the label is rendered below the icon or beside the icon.
+   * By default, in `vertical` orinetation, label is rendered below and in `horizontal` orientation, it's rendered beside.
    */
   labelPosition?: LabelPosition;
   /**

packages/compat/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.4](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.3...@react-navigation/compat@5.0.4) (2020-02-14)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 ## [5.0.3](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.2...@react-navigation/compat@5.0.3) (2020-02-12)
 
 **Note:** Version bump only for package @react-navigation/compat

packages/compat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/compat",
   "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "license": "MIT",
   "repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/compat",
   "bugs": {
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.9.3",
-    "@react-navigation/native": "^5.0.3",
+    "@react-navigation/native": "^5.0.4",
     "@types/react": "^16.9.19",
     "react": "~16.9.0",
     "typescript": "^3.7.5"

packages/core/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.3](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.2...@react-navigation/core@5.1.3) (2020-02-14)
+
+
+### Bug Fixes
+
+* return false for canGoBack if navigator hasn't finished mounting ([c8ac5fa](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/c8ac5fab61cf127985431075a3c59c1f3dfa42da))
+* throw a descriptive error if navigation object hasn't initialized ([b6accd0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/b6accd03f69dd438e595094d8bf8599cc12e71ac))
+* update links in error messages ([f964200](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/f964200b0dcbc19d5f88ad2dd1eb8e5576973497))
+
+
+
+
+
 ## [5.1.2](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.1...@react-navigation/core@5.1.2) (2020-02-12)
 
 

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "5.1.2",
+  "version": "5.1.3",
   "keywords": [
     "react",
     "react-native",

packages/core/src/BaseNavigationContainer.tsx

@@ -22,6 +22,9 @@ type State = NavigationState | PartialState<NavigationState> | undefined;
 const MISSING_CONTEXT_ERROR =
   "We couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/en/getting-started.html for setup instructions.";
 
+const NOT_INITIALIZED_ERROR =
+  "The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. You can ensure that all navigators have mounted after the callback to 'useEffect' is called in your root component. See https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html#handling-initialization for more details.";
+
 export const NavigationStateContext = React.createContext<{
   isDefault?: true;
   state?: NavigationState | PartialState<NavigationState>;
@@ -195,10 +198,18 @@ const BaseNavigationContainer = React.forwardRef(
     const dispatch = (
       action: NavigationAction | ((state: NavigationState) => NavigationAction)
     ) => {
+      if (listeners[0] == null) {
+        throw new Error(NOT_INITIALIZED_ERROR);
+      }
+
       listeners[0](navigation => navigation.dispatch(action));
     };
 
     const canGoBack = () => {
+      if (listeners[0] == null) {
+        return false;
+      }
+
       const { result, handled } = listeners[0](navigation =>
         navigation.canGoBack()
       );
@@ -277,7 +288,7 @@ const BaseNavigationContainer = React.forwardRef(
           hasWarnedForSerialization = true;
 
           console.warn(
-            "We found non-serializable values in the navigation state, which can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/en/header-buttons.html#header-interaction-with-its-screen-component for docs."
+            "We found non-serializable values in the navigation state, which can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/en/troubleshooting.html#i-get-the-warning-we-found-non-serializable-values-in-the-navigation-state for more details."
           );
         }
       }

packages/core/src/__tests__/BaseNavigationContainer.test.tsx

@@ -501,3 +501,51 @@ it('emits state events when the state changes', () => {
     ],
   });
 });
+
+it('throws if there is no navigator rendered', () => {
+  expect.assertions(1);
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const element = <BaseNavigationContainer ref={ref} children={null} />;
+
+  render(element);
+
+  act(() => {
+    expect(() => ref.current?.dispatch({ type: 'WHATEVER' })).toThrow(
+      "The 'navigation' object hasn't been initialized yet."
+    );
+  });
+});
+
+it("throws if the ref hasn't finished initializing", () => {
+  expect.assertions(1);
+
+  const ref = React.createRef<NavigationContainerRef>();
+
+  const TestNavigator = (props: any) => {
+    const { state, descriptors } = useNavigationBuilder(MockRouter, props);
+
+    return descriptors[state.routes[state.index].key].render();
+  };
+
+  const TestScreen = () => {
+    React.useEffect(() => {
+      expect(() => ref.current?.dispatch({ type: 'WHATEVER' })).toThrow(
+        "The 'navigation' object hasn't been initialized yet."
+      );
+    }, []);
+
+    return null;
+  };
+
+  const element = (
+    <BaseNavigationContainer ref={ref}>
+      <TestNavigator>
+        <Screen name="foo" component={TestScreen} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element);
+});

packages/drawer/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.4](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.0.3...@react-navigation/drawer@5.0.4) (2020-02-14)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
 ## [5.0.3](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.0.2...@react-navigation/drawer@5.0.3) (2020-02-12)
 
 **Note:** Version bump only for package @react-navigation/drawer

packages/drawer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/drawer",
   "description": "Drawer navigator component with animated transitions and gesturess",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,7 +40,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.9.3",
-    "@react-navigation/native": "^5.0.3",
+    "@react-navigation/native": "^5.0.4",
     "@types/react": "^16.9.19",
     "@types/react-native": "^0.60.30",
     "del-cli": "^3.0.0",

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.4](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.0.3...@react-navigation/material-bottom-tabs@5.0.4) (2020-02-14)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 ## [5.0.3](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.0.2...@react-navigation/material-bottom-tabs@5.0.3) (2020-02-12)
 
 **Note:** Version bump only for package @react-navigation/material-bottom-tabs

packages/material-bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-bottom-tabs",
   "description": "Integration for bottom navigation component from react-native-paper",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.9.3",
-    "@react-navigation/native": "^5.0.3",
+    "@react-navigation/native": "^5.0.4",
     "@types/react": "^16.9.19",
     "@types/react-native": "^0.60.30",
     "@types/react-native-vector-icons": "^6.4.5",

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.4](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.0.3...@react-navigation/material-top-tabs@5.0.4) (2020-02-14)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 ## [5.0.3](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.0.2...@react-navigation/material-top-tabs@5.0.3) (2020-02-12)
 
 **Note:** Version bump only for package @react-navigation/material-top-tabs

packages/material-top-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-top-tabs",
   "description": "Integration for the animated tab view component from react-native-tab-view",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.9.3",
-    "@react-navigation/native": "^5.0.3",
+    "@react-navigation/native": "^5.0.4",
     "@types/react": "^16.9.19",
     "@types/react-native": "^0.60.30",
     "del-cli": "^3.0.0",

packages/native-stack/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.4](https://github.com/react-navigation/react-navigation/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.3...@react-navigation/native-stack@5.0.4) (2020-02-14)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
 ## [5.0.3](https://github.com/react-navigation/react-navigation/tree/master/packages/native-stack/compare/@react-navigation/native-stack@5.0.2...@react-navigation/native-stack@5.0.3) (2020-02-12)
 
 **Note:** Version bump only for package @react-navigation/native-stack

packages/native-stack/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native-stack",
   "description": "Native stack navigator component for iOS and Android",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "keywords": [
     "react",
     "react-native",
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.9.3",
-    "@react-navigation/native": "^5.0.3",
+    "@react-navigation/native": "^5.0.4",
     "del-cli": "^3.0.0",
     "react-native-screens": "^2.0.0-beta.2",
     "typescript": "^3.7.5"

packages/native/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.4](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.0.3...@react-navigation/native@5.0.4) (2020-02-14)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
 ## [5.0.3](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.0.2...@react-navigation/native@5.0.3) (2020-02-12)
 
 **Note:** Version bump only for package @react-navigation/native

packages/native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -31,7 +31,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.1.2"
+    "@react-navigation/core": "^5.1.3"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.9.3",

packages/stack/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.4](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.0.3...@react-navigation/stack@5.0.4) (2020-02-14)
+
+
+### Bug Fixes
+
+* hard code header height for animation ([8f40a98](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/8f40a980862a182a9e86dbb1e4764a39d824cd70)), closes [#6818](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/issues/6818)
+
+
+
+
+
 ## [5.0.3](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.0.2...@react-navigation/stack@5.0.3) (2020-02-12)
 
 

packages/stack/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/stack",
   "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,7 +40,7 @@
   "devDependencies": {
     "@react-native-community/bob": "^0.9.3",
     "@react-native-community/masked-view": "^0.1.6",
-    "@react-navigation/native": "^5.0.3",
+    "@react-navigation/native": "^5.0.4",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.19",
     "@types/react-native": "^0.60.30",

packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx

@@ -230,6 +230,7 @@ export function forSlideRight({
 export function forSlideUp({
   current,
   next,
+  layouts: { header },
 }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
   const progress = add(
     current.progress.interpolate({
@@ -248,7 +249,7 @@ export function forSlideUp({
 
   const translateY = progress.interpolate({
     inputRange: [0, 1, 2],
-    outputRange: ['-100%', '0%', '-100%'],
+    outputRange: [-header.height, 0, -header.height],
   });
 
   const transform = [{ translateY }];

packages/stack/src/types.tsx

@@ -548,6 +548,10 @@ export type StackHeaderInterpolationProps = {
    * Layout measurements for various items we use for animation.
    */
   layouts: {
+    /**
+     * Layout of the header
+     */
+    header: Layout;
     /**
      * Layout of the whole screen.
      */

packages/stack/src/views/Header/HeaderSegment.tsx

@@ -56,7 +56,7 @@ const warnIfHeaderStylesDefined = (styles: Record<string, any>) => {
 export const getDefaultHeaderHeight = (
   layout: Layout,
   statusBarHeight: number
-) => {
+): number => {
   const isLandscape = layout.width > layout.height;
 
   let headerHeight;
@@ -120,12 +120,17 @@ export default class HeaderSegment extends React.Component<Props, State> {
       current: Animated.AnimatedInterpolation,
       next: Animated.AnimatedInterpolation | undefined,
       titleLayout: Layout | undefined,
-      leftLabelLayout: Layout | undefined
+      leftLabelLayout: Layout | undefined,
+      headerHeight: number
     ) =>
       styleInterpolator({
         current: { progress: current },
         next: next && { progress: next },
         layouts: {
+          header: {
+            height: headerHeight,
+            width: layout.width,
+          },
           screen: layout,
           title: titleLayout,
           leftLabel: leftLabelLayout,
@@ -172,23 +177,10 @@ export default class HeaderSegment extends React.Component<Props, State> {
 
     const { leftLabelLayout, titleLayout } = this.state;
 
-    const {
-      titleStyle,
-      leftButtonStyle,
-      leftLabelStyle,
-      rightButtonStyle,
-      backgroundStyle,
-    } = this.getInterpolatedStyle(
-      styleInterpolator,
-      layout,
-      scene.progress.current,
-      scene.progress.next,
-      titleLayout,
-      previousTitle ? leftLabelLayout : undefined
-    );
+    const defaultHeight = getDefaultHeaderHeight(layout, headerStatusBarHeight);
 
     const {
-      height = getDefaultHeaderHeight(layout, headerStatusBarHeight),
+      height = defaultHeight,
       minHeight,
       maxHeight,
       backgroundColor,
@@ -281,6 +273,22 @@ export default class HeaderSegment extends React.Component<Props, State> {
       }
     }
 
+    const {
+      titleStyle,
+      leftButtonStyle,
+      leftLabelStyle,
+      rightButtonStyle,
+      backgroundStyle,
+    } = this.getInterpolatedStyle(
+      styleInterpolator,
+      layout,
+      scene.progress.current,
+      scene.progress.next,
+      titleLayout,
+      previousTitle ? leftLabelLayout : undefined,
+      typeof height === 'number' ? height : defaultHeight
+    );
+
     const leftButton = left
       ? left({
           backImage,