Several improvements to StackNavigation Header (#3568)

* Refactor to remove unused variables, styles, and outer Animated view

* Style cleanup

* Proof of concept blur background

* Clean it up and add flow interface

* Update snapshots

packages/react-navigation/examples/NavigationPlayground/.flowconfig

@@ -65,11 +65,13 @@ module.file_ext=.jsx
 module.file_ext=.json
 module.file_ext=.native.js
 
+suppress_type=$FlowIgnore
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
 
+suppress_comment=\\(.\\|\n\\)*\\$FlowIgnore\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
 suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy

packages/react-navigation/examples/NavigationPlayground/js/App.js

@@ -29,6 +29,7 @@ import StacksOverTabs from './StacksOverTabs';
 import StacksWithKeys from './StacksWithKeys';
 import SimpleStack from './SimpleStack';
 import StackWithHeaderPreset from './StackWithHeaderPreset';
+import StackWithTranslucentHeader from './StackWithTranslucentHeader';
 import SimpleTabs from './SimpleTabs';
 import TabAnimations from './TabAnimations';
 import TabsWithNavigationFocus from './TabsWithNavigationFocus';
@@ -50,6 +51,14 @@ const ExampleInfo = {
     name: 'UIKit-style Header Transitions',
     description: 'Masked back button and sliding header items. iOS only.',
   },
+  StackWithHeaderPreset: {
+    name: 'UIKit-style Header Transitions',
+    description: 'Masked back button and sliding header items. iOS only.',
+  },
+  StackWithTranslucentHeader: {
+    name: 'Translucent Header',
+    description: 'Render arbitrary translucent content in header background.',
+  },
   // MultipleDrawer: {
   //   name: 'Multiple Drawer Example',
   //   description: 'Add any drawer you need',
@@ -114,6 +123,7 @@ const ExampleRoutes = {
   //   screen: MultipleDrawer,
   // },
   StackWithHeaderPreset: StackWithHeaderPreset,
+  StackWithTranslucentHeader: StackWithTranslucentHeader,
   TabsInDrawer: TabsInDrawer,
   CustomTabs: CustomTabs,
   CustomTransitioner: CustomTransitioner,

packages/react-navigation/examples/NavigationPlayground/js/SimpleStack.js

@@ -178,20 +178,18 @@ MyProfileScreen.navigationOptions = props => {
   };
 };
 
-const SimpleStack = StackNavigator(
-  {
-    Home: {
-      screen: MyHomeScreen,
-    },
-    Profile: {
-      path: 'people/:name',
-      screen: MyProfileScreen,
-    },
-    Photos: {
-      path: 'photos/:name',
-      screen: MyPhotosScreen,
-    },
-  }
-);
+const SimpleStack = StackNavigator({
+  Home: {
+    screen: MyHomeScreen,
+  },
+  Profile: {
+    path: 'people/:name',
+    screen: MyProfileScreen,
+  },
+  Photos: {
+    path: 'photos/:name',
+    screen: MyPhotosScreen,
+  },
+});
 
 export default SimpleStack;

packages/react-navigation/examples/NavigationPlayground/js/StackWithTranslucentHeader.js

@@ -0,0 +1,234 @@
+/**
+ * @flow
+ */
+
+import type {
+  NavigationScreenProp,
+  NavigationEventSubscription,
+} from 'react-navigation';
+
+import { isIphoneX } from 'react-native-iphone-x-helper';
+
+import * as React from 'react';
+import { BlurView, Constants } from 'expo';
+import {
+  Button,
+  Dimensions,
+  Platform,
+  ScrollView,
+  StatusBar,
+  View,
+} from 'react-native';
+import { Header, StackNavigator } from 'react-navigation';
+import SampleText from './SampleText';
+
+type MyNavScreenProps = {
+  navigation: NavigationScreenProp<*>,
+  banner: React.Node,
+};
+
+class MyNavScreen extends React.Component<MyNavScreenProps> {
+  render() {
+    const { navigation, banner } = this.props;
+    return (
+      <ScrollView style={{ flex: 1 }} {...this.getHeaderInset()}>
+        <SampleText>{banner}</SampleText>
+        <Button
+          onPress={() => navigation.push('Profile', { name: 'Jane' })}
+          title="Push a profile screen"
+        />
+        <Button
+          onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
+          title="Navigate to a photos screen"
+        />
+        <Button
+          onPress={() => navigation.replace('Profile', { name: 'Lucy' })}
+          title="Replace with profile"
+        />
+        <Button onPress={() => navigation.popToTop()} title="Pop to top" />
+        <Button onPress={() => navigation.pop()} title="Pop" />
+        <Button onPress={() => navigation.goBack(null)} title="Go back" />
+        <StatusBar barStyle="default" />
+      </ScrollView>
+    );
+  }
+
+  // Inset to compensate for navigation bar being transparent.
+  // And improved abstraction for this will be built in to react-navigation
+  // at some point.
+
+  getHeaderInset() {
+    const NOTCH_HEIGHT = isIphoneX() ? 25 : 0;
+
+    // $FlowIgnore: we will remove the HEIGHT static soon enough
+    const BASE_HEADER_HEIGHT = Header.HEIGHT;
+
+    const HEADER_HEIGHT =
+      Platform.OS === 'ios'
+        ? BASE_HEADER_HEIGHT + NOTCH_HEIGHT
+        : BASE_HEADER_HEIGHT + Constants.statusBarHeight;
+
+    return Platform.select({
+      ios: {
+        contentInset: { top: HEADER_HEIGHT },
+        contentOffset: { y: -HEADER_HEIGHT },
+      },
+      android: {
+        contentContainerStyle: {
+          paddingTop: HEADER_HEIGHT,
+        },
+      },
+    });
+  }
+}
+
+type MyHomeScreenProps = {
+  navigation: NavigationScreenProp<*>,
+};
+
+class MyHomeScreen extends React.Component<MyHomeScreenProps> {
+  static navigationOptions = {
+    title: 'Welcome',
+  };
+  _s0: NavigationEventSubscription;
+  _s1: NavigationEventSubscription;
+  _s2: NavigationEventSubscription;
+  _s3: NavigationEventSubscription;
+
+  componentDidMount() {
+    this._s0 = this.props.navigation.addListener('willFocus', this._onWF);
+    this._s1 = this.props.navigation.addListener('didFocus', this._onDF);
+    this._s2 = this.props.navigation.addListener('willBlur', this._onWB);
+    this._s3 = this.props.navigation.addListener('didBlur', this._onDB);
+  }
+  componentWillUnmount() {
+    this._s0.remove();
+    this._s1.remove();
+    this._s2.remove();
+    this._s3.remove();
+  }
+  _onWF = a => {
+    console.log('_willFocus HomeScreen', a);
+  };
+  _onDF = a => {
+    console.log('_didFocus HomeScreen', a);
+  };
+  _onWB = a => {
+    console.log('_willBlur HomeScreen', a);
+  };
+  _onDB = a => {
+    console.log('_didBlur HomeScreen', a);
+  };
+
+  render() {
+    const { navigation } = this.props;
+    return <MyNavScreen banner="Home Screen" navigation={navigation} />;
+  }
+}
+
+type MyPhotosScreenProps = {
+  navigation: NavigationScreenProp<*>,
+};
+class MyPhotosScreen extends React.Component<MyPhotosScreenProps> {
+  static navigationOptions = {
+    title: 'Photos',
+  };
+  _s0: NavigationEventSubscription;
+  _s1: NavigationEventSubscription;
+  _s2: NavigationEventSubscription;
+  _s3: NavigationEventSubscription;
+
+  componentDidMount() {
+    this._s0 = this.props.navigation.addListener('willFocus', this._onWF);
+    this._s1 = this.props.navigation.addListener('didFocus', this._onDF);
+    this._s2 = this.props.navigation.addListener('willBlur', this._onWB);
+    this._s3 = this.props.navigation.addListener('didBlur', this._onDB);
+  }
+  componentWillUnmount() {
+    this._s0.remove();
+    this._s1.remove();
+    this._s2.remove();
+    this._s3.remove();
+  }
+  _onWF = a => {
+    console.log('_willFocus PhotosScreen', a);
+  };
+  _onDF = a => {
+    console.log('_didFocus PhotosScreen', a);
+  };
+  _onWB = a => {
+    console.log('_willBlur PhotosScreen', a);
+  };
+  _onDB = a => {
+    console.log('_didBlur PhotosScreen', a);
+  };
+
+  render() {
+    const { navigation } = this.props;
+    return (
+      <MyNavScreen
+        banner={`${navigation.state.params.name}'s Photos`}
+        navigation={navigation}
+      />
+    );
+  }
+}
+
+const MyProfileScreen = ({ navigation }) => (
+  <MyNavScreen
+    banner={`${navigation.state.params.mode === 'edit' ? 'Now Editing ' : ''}${
+      navigation.state.params.name
+    }'s Profile`}
+    navigation={navigation}
+  />
+);
+
+MyProfileScreen.navigationOptions = props => {
+  const { navigation } = props;
+  const { state, setParams } = navigation;
+  const { params } = state;
+  return {
+    headerBackImage: params.headerBackImage,
+    headerTitle: `${params.name}'s Profile!`,
+    // Render a button on the right side of the header.
+    // When pressed switches the screen to edit mode.
+    headerRight: (
+      <Button
+        title={params.mode === 'edit' ? 'Done' : 'Edit'}
+        onPress={() =>
+          setParams({ mode: params.mode === 'edit' ? '' : 'edit' })
+        }
+      />
+    ),
+  };
+};
+
+const StackWithTranslucentHeader = StackNavigator(
+  {
+    Home: {
+      screen: MyHomeScreen,
+    },
+    Profile: {
+      path: 'people/:name',
+      screen: MyProfileScreen,
+    },
+    Photos: {
+      path: 'photos/:name',
+      screen: MyPhotosScreen,
+    },
+  },
+  {
+    headerTransitionPreset: 'uikit',
+    navigationOptions: {
+      headerTransparent: true,
+      headerBackground: Platform.select({
+        ios: <BlurView style={{ flex: 1 }} intensity={98} />,
+        android: (
+          <View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.7)' }} />
+        ),
+      }),
+    },
+  }
+);
+
+export default StackWithTranslucentHeader;

packages/react-navigation/examples/NavigationPlayground/package.json

@@ -14,11 +14,12 @@
     "expo": "^25.0.0",
     "react": "16.2.0",
     "react-native": "^0.52.0",
+    "react-native-iphone-x-helper": "^1.0.2",
     "react-navigation": "link:../.."
   },
   "devDependencies": {
-    "babel-plugin-transform-remove-console": "^6.9.0",
     "babel-jest": "^21.0.0",
+    "babel-plugin-transform-remove-console": "^6.9.0",
     "flow-bin": "^0.61.0",
     "jest": "^21.0.1",
     "jest-expo": "^25.1.0",

packages/react-navigation/examples/NavigationPlayground/yarn.lock

@@ -5173,13 +5173,17 @@ react-native-gesture-handler@1.0.0-alpha.39:
     invariant "^2.2.2"
     prop-types "^15.5.10"
 
+react-native-iphone-x-helper@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.0.2.tgz#7dbca530930f7c1ce8633cc8fd13ba94102992e1"
+
 react-native-maps@0.19.0:
   version "0.19.0"
   resolved "https://registry.yarnpkg.com/react-native-maps/-/react-native-maps-0.19.0.tgz#ce94fad1cf360e335cb4338a68c95f791e869074"
 
-react-native-safe-area-view@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.6.0.tgz#ce01eb27905a77780219537e0f53fe9c783a8b3d"
+react-native-safe-area-view@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.7.0.tgz#38f5ab9368d6ef9e5d18ab64212938af3ec39421"
   dependencies:
     hoist-non-react-statics "^2.3.1"
 

packages/react-navigation/flow/react-navigation.js

@@ -381,6 +381,7 @@ declare module 'react-navigation' {
 
   declare export type NavigationStackScreenOptions = NavigationScreenOptions & {
     header?: ?(React$Node | (HeaderProps => React$Node)),
+    headerTransparent?: boolean,
     headerTitle?: string | React$Node | React$ElementType,
     headerTitleStyle?: AnimatedTextStyleProp,
     headerTitleAllowFontScaling?: boolean,
@@ -393,6 +394,7 @@ declare module 'react-navigation' {
     headerPressColorAndroid?: string,
     headerRight?: React$Node,
     headerStyle?: ViewStyleProp,
+    headerBackground?: React$Node | React$ElementType,
     gesturesEnabled?: boolean,
     gestureResponseDistance?: { vertical?: number, horizontal?: number },
     gestureDirection?: 'default' | 'inverted',

packages/react-navigation/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap

@@ -75,163 +75,108 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
       />
     </View>
     <View
-      cardStyle={undefined}
       collapsable={undefined}
-      getScreenDetails={[Function]}
-      headerMode={undefined}
-      headerTransitionPreset={undefined}
-      index={0}
-      layout={
+      onLayout={[Function]}
+      pointerEvents="box-none"
+      style={
         Object {
-          "height": 0,
-          "initHeight": 0,
-          "initWidth": 0,
-          "isMeasured": false,
-          "width": 0,
+          "backgroundColor": "#F7F7F7",
+          "borderBottomColor": "rgba(0, 0, 0, .3)",
+          "borderBottomWidth": 0.5,
+          "height": 64,
+          "paddingBottom": 0,
+          "paddingLeft": 0,
+          "paddingRight": 0,
+          "paddingTop": 20,
         }
       }
-      leftButtonInterpolator={[Function]}
-      leftInterpolator={[Function]}
-      leftLabelInterpolator={[Function]}
-      mode="float"
-      navigation={
-        Object {
-          "addListener": [Function],
-          "dispatch": [Function],
-          "getParam": [Function],
-          "goBack": [Function],
-          "navigate": [Function],
-          "pop": [Function],
-          "popToTop": [Function],
-          "push": [Function],
-          "replace": [Function],
-          "setParams": [Function],
-          "state": Object {
-            "index": 0,
-            "isTransitioning": false,
-            "key": "StackRouterRoot",
-            "routes": Array [
-              Object {
-                "key": "id-0-1",
-                "routeName": "Home",
-              },
-            ],
-          },
-        }
-      }
-      rightInterpolator={[Function]}
-      router={
-        Object {
-          "getActionForPathAndParams": [Function],
-          "getComponentForRouteName": [Function],
-          "getComponentForState": [Function],
-          "getPathAndParamsForState": [Function],
-          "getScreenConfig": [Function],
-          "getScreenOptions": [Function],
-          "getStateForAction": [Function],
-        }
-      }
-      titleFromLeftInterpolator={[Function]}
-      titleInterpolator={[Function]}
-      transitionConfig={undefined}
-      transitionPreset="fade-in-place"
     >
       <View
-        collapsable={undefined}
-        onLayout={[Function]}
-        pointerEvents="box-none"
         style={
           Object {
-            "backgroundColor": "#F7F7F7",
-            "borderBottomColor": "rgba(0, 0, 0, .3)",
-            "borderBottomWidth": 0.5,
-            "height": 64,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 20,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "flex": 1,
           }
         }
       >
         <View
           style={
             Object {
-              "flex": 1,
+              "bottom": 0,
+              "flexDirection": "row",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
+            collapsable={undefined}
+            pointerEvents="box-none"
             style={
-              Array [
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                },
-                Object {
-                  "flexDirection": "row",
-                },
-              ]
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "transparent",
+                "bottom": 0,
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "left": 70,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 70,
+                "top": 0,
+              }
             }
           >
-            <View
+            <Text
+              accessibilityTraits="header"
+              accessible={true}
+              allowFontScaling={true}
               collapsable={undefined}
-              pointerEvents="box-none"
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              onLayout={[Function]}
               style={
                 Object {
-                  "alignItems": "center",
-                  "backgroundColor": "transparent",
-                  "bottom": 0,
-                  "justifyContent": "center",
-                  "left": 70,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 70,
-                  "top": 0,
+                  "color": "rgba(0, 0, 0, .9)",
+                  "fontSize": 17,
+                  "fontWeight": "700",
+                  "marginHorizontal": 16,
+                  "textAlign": "center",
                 }
               }
             >
-              <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,
-                  "justifyContent": "center",
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
+              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>
       </View>
@@ -315,145 +260,90 @@ exports[`StackNavigator renders successfully 1`] = `
       />
     </View>
     <View
-      cardStyle={undefined}
       collapsable={undefined}
-      getScreenDetails={[Function]}
-      headerMode={undefined}
-      headerTransitionPreset={undefined}
-      index={0}
-      layout={
+      onLayout={[Function]}
+      pointerEvents="box-none"
+      style={
         Object {
-          "height": 0,
-          "initHeight": 0,
-          "initWidth": 0,
-          "isMeasured": false,
-          "width": 0,
+          "backgroundColor": "#F7F7F7",
+          "borderBottomColor": "rgba(0, 0, 0, .3)",
+          "borderBottomWidth": 0.5,
+          "height": 64,
+          "paddingBottom": 0,
+          "paddingLeft": 0,
+          "paddingRight": 0,
+          "paddingTop": 20,
         }
       }
-      leftButtonInterpolator={[Function]}
-      leftInterpolator={[Function]}
-      leftLabelInterpolator={[Function]}
-      mode="float"
-      navigation={
-        Object {
-          "addListener": [Function],
-          "dispatch": [Function],
-          "getParam": [Function],
-          "goBack": [Function],
-          "navigate": [Function],
-          "pop": [Function],
-          "popToTop": [Function],
-          "push": [Function],
-          "replace": [Function],
-          "setParams": [Function],
-          "state": Object {
-            "index": 0,
-            "isTransitioning": false,
-            "key": "StackRouterRoot",
-            "routes": Array [
-              Object {
-                "key": "id-0-0",
-                "routeName": "Home",
-              },
-            ],
-          },
-        }
-      }
-      rightInterpolator={[Function]}
-      router={
-        Object {
-          "getActionForPathAndParams": [Function],
-          "getComponentForRouteName": [Function],
-          "getComponentForState": [Function],
-          "getPathAndParamsForState": [Function],
-          "getScreenConfig": [Function],
-          "getScreenOptions": [Function],
-          "getStateForAction": [Function],
-        }
-      }
-      titleFromLeftInterpolator={[Function]}
-      titleInterpolator={[Function]}
-      transitionConfig={undefined}
-      transitionPreset="fade-in-place"
     >
       <View
-        collapsable={undefined}
-        onLayout={[Function]}
-        pointerEvents="box-none"
         style={
           Object {
-            "backgroundColor": "#F7F7F7",
-            "borderBottomColor": "rgba(0, 0, 0, .3)",
-            "borderBottomWidth": 0.5,
-            "height": 64,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 20,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      />
+      <View
+        style={
+          Object {
+            "flex": 1,
           }
         }
       >
         <View
           style={
             Object {
-              "flex": 1,
+              "bottom": 0,
+              "flexDirection": "row",
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
+            collapsable={undefined}
+            pointerEvents="box-none"
             style={
-              Array [
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                },
-                Object {
-                  "flexDirection": "row",
-                },
-              ]
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "transparent",
+                "bottom": 0,
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              }
             }
           >
-            <View
+            <Text
+              accessibilityTraits="header"
+              accessible={true}
+              allowFontScaling={true}
               collapsable={undefined}
-              pointerEvents="box-none"
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              onLayout={[Function]}
               style={
                 Object {
-                  "alignItems": "center",
-                  "backgroundColor": "transparent",
-                  "bottom": 0,
-                  "justifyContent": "center",
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "color": "rgba(0, 0, 0, .9)",
+                  "fontSize": 17,
+                  "fontWeight": "700",
+                  "marginHorizontal": 16,
+                  "textAlign": "center",
                 }
               }
             >
-              <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>
+              Welcome anonymous
+            </Text>
           </View>
         </View>
       </View>

packages/react-navigation/src/views/Header/Header.js

@@ -373,14 +373,14 @@ class Header extends React.PureComponent {
       hasRightComponent: !!right,
     });
 
-    const wrapperProps = {
-      style: [StyleSheet.absoluteFill, styles.header],
-      key: `scene_${props.scene.key}`,
-    };
-
     const { isLandscape, transitionPreset } = this.props;
     const { options } = this.props.getScreenDetails(props.scene);
 
+    const wrapperProps = {
+      style: styles.header,
+      key: `scene_${props.scene.key}`,
+    };
+
     if (
       options.headerLeft ||
       options.headerBackImage ||
@@ -418,8 +418,9 @@ class Header extends React.PureComponent {
 
   render() {
     let appBar;
+    const { mode, scene, isLandscape } = this.props;
 
-    if (this.props.mode === 'float') {
+    if (mode === 'float') {
       const scenesByIndex = {};
       this.props.scenes.forEach(scene => {
         scenesByIndex[scene.index] = scene;
@@ -438,37 +439,62 @@ class Header extends React.PureComponent {
       });
     }
 
-    // eslint-disable-next-line no-unused-vars
-    const {
-      scenes,
-      scene,
-      position,
-      screenProps,
-      progress,
-      isLandscape,
-      ...rest
-    } = this.props;
-
     const { options } = this.props.getScreenDetails(scene);
-    const { headerStyle } = options;
+    const { headerStyle = {} } = options;
+    const headerStyleObj =
+      typeof headerStyle === 'number'
+        ? StyleSheet.flatten(headerStyle)
+        : headerStyle;
     const appBarHeight = getAppBarHeight(isLandscape);
+
+    const {
+      alignItems,
+      justifyContent,
+      flex,
+      flexDirection,
+      flexGrow,
+      flexShrink,
+      flexBasis,
+      flexWrap,
+      ...safeHeaderStyle
+    } = headerStyleObj;
+
+    if (__DEV__) {
+      warnIfHeaderStyleDefined(alignItems, 'alignItems');
+      warnIfHeaderStyleDefined(justifyContent, 'justifyContent');
+      warnIfHeaderStyleDefined(flex, 'flex');
+      warnIfHeaderStyleDefined(flexDirection, 'flexDirection');
+      warnIfHeaderStyleDefined(flexGrow, 'flexGrow');
+      warnIfHeaderStyleDefined(flexShrink, 'flexShrink');
+      warnIfHeaderStyleDefined(flexBasis, 'flexBasis');
+      warnIfHeaderStyleDefined(flexWrap, 'flexWrap');
+    }
+
+    // TODO: warn if any unsafe styles are provided
     const containerStyles = [
-      styles.container,
-      {
-        height: appBarHeight,
-      },
-      headerStyle,
+      options.headerTransparent
+        ? styles.transparentContainer
+        : styles.container,
+      { height: appBarHeight },
+      safeHeaderStyle,
     ];
 
     return (
-      <Animated.View {...rest}>
-        <SafeAreaView
-          style={containerStyles}
-          forceInset={{ top: 'always', bottom: 'never' }}
-        >
-          <View style={styles.appBar}>{appBar}</View>
-        </SafeAreaView>
-      </Animated.View>
+      <SafeAreaView
+        forceInset={{ top: 'always', bottom: 'never' }}
+        style={containerStyles}
+      >
+        <View style={StyleSheet.absoluteFill}>{options.headerBackground}</View>
+        <View style={{ flex: 1 }}>{appBar}</View>
+      </SafeAreaView>
+    );
+  }
+}
+
+function warnIfHeaderStyleDefined(value, styleProp) {
+  if (value !== undefined) {
+    console.warn(
+      `${styleProp} was given a value of ${value}, this has no effect on headerStyle.`
     );
   }
 }
@@ -496,15 +522,18 @@ const styles = StyleSheet.create({
     backgroundColor: Platform.OS === 'ios' ? '#F7F7F7' : '#FFF',
     ...platformContainerStyles,
   },
-  appBar: {
-    flex: 1,
+  transparentContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    ...platformContainerStyles,
   },
   header: {
+    ...StyleSheet.absoluteFillObject,
     flexDirection: 'row',
   },
   item: {
-    justifyContent: 'center',
-    alignItems: 'center',
     backgroundColor: 'transparent',
   },
   iconMaskContainer: {
@@ -528,23 +557,29 @@ const styles = StyleSheet.create({
   },
   title: {
     bottom: 0,
+    top: 0,
     left: TITLE_OFFSET,
     right: TITLE_OFFSET,
-    top: 0,
     position: 'absolute',
-    alignItems: Platform.OS === 'ios' ? 'center' : 'flex-start',
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: Platform.OS === 'ios' ? 'center' : 'flex-start',
   },
   left: {
     left: 0,
     bottom: 0,
     top: 0,
     position: 'absolute',
+    alignItems: 'center',
+    flexDirection: 'row',
   },
   right: {
     right: 0,
     bottom: 0,
     top: 0,
     position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
   },
 });