title: react-navigation-tabs - icons not aligned and covering text
body: <p>I cant seem to get the icons to align using the new react-navigation-tabs.....some icons are sitting higher than others.
  Also the icons are covering the labels and Id like to have some margin between icon and label.
  I tried the code <code>style={{textAlignVertical: 'center'}}</code> for the icons (from another question on SO) but that did not work either</p>
  
  <p>Below is code</p>
  
  <pre><code>import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
  import IconFA from 'react-native-vector-icons/FontAwesome';
  import IconMCI from 'react-native-vector-icons/MaterialCommunityIcons';
  
  
  const ProfileTabBarIcon = ({tintColor}) =&gt; (
    &lt;IconFA
      name="user-circle"
      size={35}
      color={tintColor}
    /&gt;
  );
  const SearchTabBarIcon = ({tintColor}) =&gt; (
    &lt;IconMCI
      name="account-search"
      size={45}
      color={tintColor}
      /*onPress={() =&gt; {
        console.log('HELP!!');
        this.props.navigation.navigate('Search');
      }}*/
    /&gt;
  );
  const MessageTabBarIcon = ({tintColor}) =&gt; (
    &lt;IconFA
      name="envelope"
      size={35}
      color={tintColor}
    /&gt;
  );
  
  
  
  const SignedInTabNav = createMaterialTopTabNavigator(
    {
      Profile: {
        screen: Profile,
        navigationOptions: {
          tabBarLabel: 'Me',
          tabBarIcon: ProfileTabBarIcon,
        },
      },
      Search: {
        screen: Search,
        navigationOptions: {
          tabBarLabel: 'Search',
          tabBarIcon: SearchTabBarIcon,
        },
      },
      Message: {
        screen: Message,
        navigationOptions: {
          tabBarLabel: 'Message',
          tabBarIcon: MessageTabBarIcon,
        },
      },
    },
    {
      tabBarOptions: {
        showIcon: true,
        upperCaseLabel: false,
        activeTintColor: '#42CBC8',
        inactiveTintColor: '#9A9F99',
        iconStyle: {
          width: 'auto',
          height: 20,
        },
        labelStyle: {
          fontSize: 12,
        },
  
        style: {
          backgroundColor: '#F8F8FF',
          //borderBottomWidth: 2,
          borderBottomColor: '#D3D3D3',
          paddingVertical: 2,
          height: 60,
        },
      },
      animationEnabled: false,
    }, 
  ); 
  </code></pre>
  
  <p>....but this is what it looks like :(</p>
  
  <p><a href="https://i.stack.imgur.com/8nXvw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8nXvw.png" alt="enter image description here"></a></p>
  
  <p>Can anyone help?</p>