Fix backgroundColor in Header and TabBar (react-navigation#2871)

davepack · spencercarli · commit 313ec7ab76f4 · 2017-11-01T16:33:50.000-05:00
* Add headerBackgroundColor to navigationOptions

* Add backgroundColor to tabBarOptions

* Update snapshots.

* Update docs.
diff --git a/docs/api/navigators/StackNavigator.md b/docs/api/navigators/StackNavigator.md
@@ -135,6 +135,10 @@ Style object for the header
 
 Style object for the title component
 
+### `headerBackgroundColor`
+
+Color string that overrides default background color.
+
 #### `headerBackTitleStyle`
 
 Style object for the back title
diff --git a/docs/api/navigators/TabNavigator.md b/docs/api/navigators/TabNavigator.md
@@ -106,6 +106,7 @@ Several options get passed to the underlying router to modify navigation logic:
 - `inactiveBackgroundColor` - Background color of the inactive tab.
 - `showLabel` - Whether to show label for tab, default is true.
 - `style` - Style object for the tab bar.
+- `backgroundColor` - Color string that overrides default backgroundColor.
 - `labelStyle` - Style object for the tab label.
 - `tabStyle` - Style object for the tab.
 - `allowFontScaling` - Whether label font should scale to respect Text Size accessibility settings, default is true.
diff --git a/src/TypeDefinition.js b/src/TypeDefinition.js
@@ -360,6 +360,7 @@ export type NavigationStackScreenOptions = {|
   headerPressColorAndroid?: string,
   headerRight?: React.Node,
   headerStyle?: ViewStyleProp,
+  headerBackgroundColor?: string,
   gesturesEnabled?: boolean,
   gestureResponseDistance?: { vertical?: number, horizontal?: number },
 |};
diff --git a/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap b/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap
@@ -78,11 +78,15 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
       onLayout={[Function]}
       style={
         Array [
-          Object {
-            "backgroundColor": "#F7F7F7",
-            "borderBottomColor": "rgba(0, 0, 0, .3)",
-            "borderBottomWidth": 0.5,
-          },
+          Array [
+            Object {
+              "borderBottomColor": "rgba(0, 0, 0, .3)",
+              "borderBottomWidth": 0.5,
+            },
+            Object {
+              "backgroundColor": "#F7F7F7",
+            },
+          ],
           Object {
             "paddingBottom": 0,
             "paddingLeft": 0,
@@ -314,11 +318,15 @@ exports[`StackNavigator renders successfully 1`] = `
       onLayout={[Function]}
       style={
         Array [
-          Object {
-            "backgroundColor": "#F7F7F7",
-            "borderBottomColor": "rgba(0, 0, 0, .3)",
-            "borderBottomWidth": 0.5,
-          },
+          Array [
+            Object {
+              "borderBottomColor": "rgba(0, 0, 0, .3)",
+              "borderBottomWidth": 0.5,
+            },
+            Object {
+              "backgroundColor": "#F7F7F7",
+            },
+          ],
           Object {
             "paddingBottom": 0,
             "paddingLeft": 0,
diff --git a/src/navigators/__tests__/__snapshots__/TabNavigator-test.js.snap b/src/navigators/__tests__/__snapshots__/TabNavigator-test.js.snap
@@ -68,11 +68,15 @@ exports[`TabNavigator renders successfully 1`] = `
     onLayout={[Function]}
     style={
       Array [
-        Object {
-          "backgroundColor": "#F7F7F7",
-          "borderTopColor": "rgba(0, 0, 0, .3)",
-          "borderTopWidth": 0.5,
-        },
+        Array [
+          Object {
+            "borderTopColor": "rgba(0, 0, 0, .3)",
+            "borderTopWidth": 0.5,
+          },
+          Object {
+            "backgroundColor": "#F7F7F7",
+          },
+        ],
         Object {
           "paddingBottom": 0,
           "paddingLeft": 0,
diff --git a/src/views/Header/Header.js b/src/views/Header/Header.js
@@ -302,7 +302,10 @@ class Header extends React.PureComponent<Props, State> {
     } = this.props;
 
     const { options } = this.props.getScreenDetails(scene);
-    const headerStyle = options.headerStyle;
+    const {
+      headerStyle,
+      headerBackgroundColor = Platform.OS === 'ios' ? '#F7F7F7' : '#FFF',
+    } = options;
     const appBarHeight = Platform.OS === 'ios' ? (isLandscape ? 32 : 44) : 56;
     const containerStyles = [
       {
@@ -313,7 +316,7 @@ class Header extends React.PureComponent<Props, State> {
 
     return (
       <SafeAreaView
-        style={styles.container}
+        style={[styles.container, { backgroundColor: headerBackgroundColor }]}
         forceInset={{ top: 'always', bottom: 'never' }}
       >
         <Animated.View {...rest} style={containerStyles}>
@@ -344,7 +347,6 @@ if (Platform.OS === 'ios') {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: Platform.OS === 'ios' ? '#F7F7F7' : '#FFF',
     ...platformContainerStyles,
   },
   appBar: {
diff --git a/src/views/TabView/TabBarBottom.js b/src/views/TabView/TabBarBottom.js
@@ -40,6 +40,7 @@ type Props = {
   getTestIDProps: (scene: TabScene) => (scene: TabScene) => any,
   renderIcon: (scene: TabScene) => React.Node,
   style?: ViewStyleProp,
+  backgroundColor?: string,
   labelStyle?: TextStyleProp,
   tabStyle?: ViewStyleProp,
   showIcon?: boolean,
@@ -164,6 +165,7 @@ class TabBarBottom extends React.PureComponent<Props> {
       inactiveBackgroundColor,
       style,
       tabStyle,
+      backgroundColor = '#F7F7F7', // Default background color in iOS 10
       isLandscape,
     } = this.props;
     const { routes } = navigation.state;
@@ -180,7 +182,7 @@ class TabBarBottom extends React.PureComponent<Props> {
 
     return (
       <SafeAreaView
-        style={styles.tabBarContainer}
+        style={[styles.tabBarContainer, { backgroundColor }]}
         forceInset={{ bottom: 'always' }}
       >
         <Animated.View style={tabBarStyle}>
@@ -236,12 +238,10 @@ const LABEL_LEFT_MARGIN = 20;
 const LABEL_TOP_MARGIN = 15;
 const styles = StyleSheet.create({
   tabBarContainer: {
-    backgroundColor: '#F7F7F7', // Default background color in iOS 10
     borderTopWidth: StyleSheet.hairlineWidth,
     borderTopColor: 'rgba(0, 0, 0, .3)',
   },
   tabBar: {
-    // height: 49, // Default tab bar height in iOS 10+
     flexDirection: 'row',
   },
   tabBarLandscape: {
diff --git a/src/views/__tests__/__snapshots__/TabView-test.js.snap b/src/views/__tests__/__snapshots__/TabView-test.js.snap
@@ -24,11 +24,15 @@ exports[`TabBarBottom renders successfully 1`] = `
     onLayout={[Function]}
     style={
       Array [
-        Object {
-          "backgroundColor": "#F7F7F7",
-          "borderTopColor": "rgba(0, 0, 0, .3)",
-          "borderTopWidth": 0.5,
-        },
+        Array [
+          Object {
+            "borderTopColor": "rgba(0, 0, 0, .3)",
+            "borderTopWidth": 0.5,
+          },
+          Object {
+            "backgroundColor": "#F7F7F7",
+          },
+        ],
         Object {
           "paddingBottom": 0,
           "paddingLeft": 0,
