fix: support specifying header background color in headerStyle

packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx

@@ -98,7 +98,10 @@ export function forFade({
     leftButtonStyle: { opacity },
     rightButtonStyle: { opacity },
     titleStyle: { opacity },
-    backgroundStyle: { opacity },
+    // For both bakgrounds to cross-fade properly, we don't want to animate the one below from 0
+    // Because 2 semitransparent backgrounds on top of each other will always have some transparency
+    // And this will make the stuff under them visible (usually white) which isn't expected
+    backgroundStyle: { opacity: current },
   };
 }
 

packages/stack/src/types.tsx

@@ -79,7 +79,6 @@ export type HeaderOptions = {
   headerBackImage?: HeaderBackButtonProps['backImage'];
   headerPressColorAndroid?: string;
   headerBackground?: () => React.ReactNode;
-  headerBackgroundStyle?: StyleProp<ViewStyle>;
   headerStyle?: StyleProp<ViewStyle>;
   headerStatusBarHeight?: number;
   headerTransparent?: boolean;

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

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { View, StyleSheet, LayoutChangeEvent, Platform } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  LayoutChangeEvent,
+  Platform,
+  ViewStyle,
+} from 'react-native';
 import Animated from 'react-native-reanimated';
 import { getStatusBarHeight } from 'react-native-safe-area-view';
 import HeaderTitle from './HeaderTitle';
@@ -34,6 +40,18 @@ type State = {
   leftLabelLayout?: Layout;
 };
 
+const warnIfHeaderStyleDefined = (value: any, styleProp: string) => {
+  if (styleProp === 'position' && value === 'absolute') {
+    console.warn(
+      "position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the headerTransparent navigationOption."
+    );
+  } else if (value !== undefined) {
+    console.warn(
+      `${styleProp} was given a value of ${value}, this has no effect on headerStyle.`
+    );
+  }
+};
+
 export const getDefaultHeaderHeight = (layout: Layout) => {
   const isLandscape = layout.width > layout.height;
 
@@ -125,7 +143,6 @@ export default class HeaderSegment extends React.Component<Props, State> {
       headerTransparent,
       headerTintColor,
       headerBackground,
-      headerBackgroundStyle,
       headerRight: right,
       headerBackImage: backImage,
       headerBackTitle: leftLabel,
@@ -160,6 +177,54 @@ export default class HeaderSegment extends React.Component<Props, State> {
       previousTitle ? leftLabelLayout : undefined
     );
 
+    const {
+      height = getDefaultHeaderHeight(layout),
+      alignItems,
+      justifyContent,
+      flex,
+      flexDirection,
+      flexGrow,
+      flexShrink,
+      flexBasis,
+      flexWrap,
+      position,
+      padding,
+      paddingHorizontal,
+      paddingRight,
+      paddingLeft,
+      paddingVertical,
+      paddingTop,
+      paddingBottom,
+      top,
+      right: _right,
+      bottom: _bottom,
+      left: _left,
+      ...safeHeaderStyle
+    } = StyleSheet.flatten(customHeaderStyle || {}) as ViewStyle;
+
+    if (process.env.NODE_ENV !== 'production') {
+      warnIfHeaderStyleDefined(alignItems, 'alignItems');
+      warnIfHeaderStyleDefined(justifyContent, 'justifyContent');
+      warnIfHeaderStyleDefined(flex, 'flex');
+      warnIfHeaderStyleDefined(flexDirection, 'flexDirection');
+      warnIfHeaderStyleDefined(flexGrow, 'flexGrow');
+      warnIfHeaderStyleDefined(flexShrink, 'flexShrink');
+      warnIfHeaderStyleDefined(flexBasis, 'flexBasis');
+      warnIfHeaderStyleDefined(flexWrap, 'flexWrap');
+      warnIfHeaderStyleDefined(padding, 'padding');
+      warnIfHeaderStyleDefined(position, 'position');
+      warnIfHeaderStyleDefined(paddingHorizontal, 'paddingHorizontal');
+      warnIfHeaderStyleDefined(paddingRight, 'paddingRight');
+      warnIfHeaderStyleDefined(paddingLeft, 'paddingLeft');
+      warnIfHeaderStyleDefined(paddingVertical, 'paddingVertical');
+      warnIfHeaderStyleDefined(paddingTop, 'paddingTop');
+      warnIfHeaderStyleDefined(paddingBottom, 'paddingBottom');
+      warnIfHeaderStyleDefined(top, 'top');
+      warnIfHeaderStyleDefined(_right, 'right');
+      warnIfHeaderStyleDefined(_bottom, 'bottom');
+      warnIfHeaderStyleDefined(_left, 'left');
+    }
+
     return (
       <React.Fragment>
         <Animated.View
@@ -169,16 +234,10 @@ export default class HeaderSegment extends React.Component<Props, State> {
           {headerBackground ? (
             headerBackground()
           ) : headerTransparent ? null : (
-            <HeaderBackground style={headerBackgroundStyle} />
+            <HeaderBackground style={safeHeaderStyle} />
           )}
         </Animated.View>
-        <Animated.View
-          pointerEvents="box-none"
-          style={[
-            { height: getDefaultHeaderHeight(layout) },
-            customHeaderStyle,
-          ]}
-        >
+        <Animated.View pointerEvents="box-none" style={[{ height }]}>
           <View
             pointerEvents="none"
             style={{ height: headerStatusBarHeight }}