Apply StyleSheet.flatten properly to headerStyle. Fixes #3608

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

@@ -1,15 +1,22 @@
 import React, { Component } from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import renderer from 'react-test-renderer';
 
 import StackNavigator from '../StackNavigator';
 
+const styles = StyleSheet.create({
+  header: {
+    opacity: 0.5,
+  },
+});
+
 class HomeScreen extends Component {
   static navigationOptions = ({ navigation }) => ({
     title: `Welcome ${
       navigation.state.params ? navigation.state.params.user : 'anonymous'
     }`,
     gesturesEnabled: true,
+    headerStyle: [{ backgroundColor: 'red' }, styles.header],
   });
 
   render() {

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

@@ -441,10 +441,7 @@ class Header extends React.PureComponent {
 
     const { options } = this.props.getScreenDetails(scene);
     const { headerStyle = {} } = options;
-    const headerStyleObj =
-      typeof headerStyle === 'number'
-        ? StyleSheet.flatten(headerStyle)
-        : headerStyle;
+    const headerStyleObj = StyleSheet.flatten(headerStyle);
     const appBarHeight = getAppBarHeight(isLandscape);
 
     const {