Pass horizontal prop into tabBarIcon for bottom tabs, fix default background color, fix text sizes

packages/tabs/example/src/BottomTabs.js

@@ -4,8 +4,8 @@ import { MaterialIcons } from '@expo/vector-icons';
 import PhotoGrid from './shared/PhotoGrid';
 import TouchableBounce from 'react-native/Libraries/Components/Touchable/TouchableBounce';
 
-const tabBarIcon = name => ({ tintColor }) => (
-  <MaterialIcons name={name} color={tintColor} size={24} />
+const tabBarIcon = name => ({ tintColor, horizontal }) => (
+  <MaterialIcons name={name} color={tintColor} size={horizontal ? 17 : 24} />
 );
 
 class Album extends React.Component {

packages/tabs/src/utils/createTabNavigator.js

@@ -19,6 +19,7 @@ export type InjectedProps = {
     route: any,
     focused: boolean,
     tintColor: string,
+    horizontal: boolean,
   }) => React.Node,
   renderScene: (props: { route: any }) => ?React.Node,
   onIndexChange: (index: number) => any,
@@ -43,14 +44,19 @@ export default function createTabNavigator(TabView: React.ComponentType<*>) {
       );
     };
 
-    _renderIcon = ({ route, focused = true, tintColor }) => {
+    _renderIcon = ({
+      route,
+      focused = true,
+      tintColor,
+      horizontal = false,
+    }) => {
       const { descriptors } = this.props;
       const descriptor = descriptors[route.key];
       const options = descriptor.options;
 
       if (options.tabBarIcon) {
         return typeof options.tabBarIcon === 'function'
-          ? options.tabBarIcon({ focused, tintColor })
+          ? options.tabBarIcon({ focused, tintColor, horizontal })
           : options.tabBarIcon;
       }
 

packages/tabs/src/views/BottomTabBar.js

@@ -104,7 +104,6 @@ class TabBarBottom extends React.Component<Props> {
             showIcon && this._shouldUseHorizontalLabels()
               ? styles.labelBeside
               : styles.labelBeneath,
-            styles.labelBeneath,
             labelStyle,
           ]}
           allowFontScaling={allowFontScaling}
@@ -142,6 +141,7 @@ class TabBarBottom extends React.Component<Props> {
     return (
       <CrossFadeIcon
         route={route}
+        horizontal={horizontal}
         navigation={navigation}
         activeOpacity={activeOpacity}
         inactiveOpacity={inactiveOpacity}
@@ -253,7 +253,7 @@ const COMPACT_HEIGHT = 29;
 
 const styles = StyleSheet.create({
   tabBar: {
-    backgroundColor: '#F7F7F7', // Default background color in iOS 10
+    backgroundColor: '#fff',
     borderTopWidth: StyleSheet.hairlineWidth,
     borderTopColor: 'rgba(0, 0, 0, .3)',
     flexDirection: 'row',
@@ -290,12 +290,12 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
   labelBeneath: {
-    fontSize: 10,
+    fontSize: 11,
     marginBottom: 1.5,
   },
   labelBeside: {
-    fontSize: 13,
-    marginLeft: 20,
+    fontSize: 12,
+    marginLeft: 15,
   },
 });
 

packages/tabs/src/views/CrossFadeIcon.js

@@ -5,6 +5,7 @@ import { Animated, View, StyleSheet } from 'react-native';
 
 type Props = {
   route: any,
+  horizontal?: boolean,
   activeOpacity: any,
   inactiveOpacity: any,
   activeTintColor: any,
@@ -22,6 +23,7 @@ export default class TabBarIcon extends React.Component<Props> {
       activeTintColor,
       inactiveTintColor,
       renderIcon,
+      horizontal,
       style,
     } = this.props;
 
@@ -33,6 +35,7 @@ export default class TabBarIcon extends React.Component<Props> {
           {renderIcon({
             route,
             focused: true,
+            horizontal,
             tintColor: activeTintColor,
           })}
         </Animated.View>
@@ -40,6 +43,7 @@ export default class TabBarIcon extends React.Component<Props> {
           {renderIcon({
             route,
             focused: false,
+            horizontal,
             tintColor: inactiveTintColor,
           })}
         </Animated.View>