Improved header + tab bar styles on iOS

Author: Adam Miskiewicz

src/views/Header.js

@@ -296,18 +296,30 @@ class Header extends React.PureComponent<void, HeaderProps, HeaderState> {
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    paddingTop: STATUSBAR_HEIGHT,
-    backgroundColor: Platform.OS === 'ios' ? '#EFEFF2' : '#FFF',
-    height: STATUSBAR_HEIGHT + APPBAR_HEIGHT,
+let platformContainerStyles;
+if (Platform.OS === 'ios') {
+  platformContainerStyles = {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: 'rgba(0, 0, 0, .3)',
+  };
+} else {
+  platformContainerStyles = {
     shadowColor: 'black',
     shadowOpacity: 0.1,
     shadowRadius: StyleSheet.hairlineWidth,
     shadowOffset: {
       height: StyleSheet.hairlineWidth,
     },
     elevation: 4,
+  };
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingTop: STATUSBAR_HEIGHT,
+    backgroundColor: Platform.OS === 'ios' ? '#F7F7F7' : '#FFF',
+    height: STATUSBAR_HEIGHT + APPBAR_HEIGHT,
+    ...platformContainerStyles,
   },
   appBar: {
     flex: 1,

src/views/TabView/TabBarBottom.js

@@ -39,8 +39,11 @@ type Props = {
   showIcon: boolean,
 };
 
-export default class TabBarBottom
-  extends PureComponent<DefaultProps, Props, void> {
+export default class TabBarBottom extends PureComponent<
+  DefaultProps,
+  Props,
+  void
+> {
   // See https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/UIKitUICatalog/UITabBar.html
   static defaultProps = {
     activeTintColor: '#3478f6', // Default active tint color in iOS 10
@@ -177,8 +180,8 @@ const styles = StyleSheet.create({
     height: 49, // Default tab bar height in iOS 10
     flexDirection: 'row',
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: 'rgba(0, 0, 0, .2)',
-    backgroundColor: '#f4f4f4', // Default background color in iOS 10
+    borderTopColor: 'rgba(0, 0, 0, .3)',
+    backgroundColor: '#F7F7F7', // Default background color in iOS 10
   },
   tab: {
     flex: 1,