react-navigation-tabs - icons not aligned and covering text

Question

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 style={{textAlignVertical: 'center'}} for the icons (from another question on SO) but that did not work either

Below is 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}) => (
  <IconFA
    name="user-circle"
    size={35}
    color={tintColor}
  />
);
const SearchTabBarIcon = ({tintColor}) => (
  <IconMCI
    name="account-search"
    size={45}
    color={tintColor}
    /*onPress={() => {
      console.log('HELP!!');
      this.props.navigation.navigate('Search');
    }}*/
  />
);
const MessageTabBarIcon = ({tintColor}) => (
  <IconFA
    name="envelope"
    size={35}
    color={tintColor}
  />
);



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,
  }, 
); 

....but this is what it looks like :(

Can anyone help?

Answer 1

I added an empty tabBarLabel in the tab screen, and included the text inside the tabBarIcon.

 <Tab.Screen
    name="Home"
    component={MainStackNavigator}
    options=
    {{
       tabBarLabel:"",
       tabBarIcon:() =>
       {
         return(
            <View>
              <Text>Home</Text>
            <Image 
            style={{ width:20,height:20 }}
source{require('./assets/home_white.png')}>
             </Image>
              </View>
               )
        }
    }} 
 />

Answer 2

set resizeMode in your style section such as :

<Image
    source={iconName}
    style={{ width: 25, height: 25, tintColor }}
    resizeMode={"contain"}
/>

Answer 3

I styled the first icon and you can change it as necessary to fit your needs and then apply those to the other two icons as well. If you need to understand what is going on better go ahead and apply backgroundColor attr to different elements. Simply, I wrapped the icon component in a View and then gave that view some styling to fit the icon appropriately.

import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
import IconFA from 'react-native-vector-icons/FontAwesome';
import IconMCI from 'react-native-vector-icons/MaterialCommunityIcons';

import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';

import React from 'react';
import { StyleSheet, View } from 'react-native';

const ProfileTabBarIcon = ({tintColor}) => (

  <View style={styles.container}>
    <IconFA
      style={styles.iconStyle}
      name="user-circle"
      size={35}
      color={tintColor}
    />
  </View>

);

const SearchTabBarIcon = ({tintColor}) => (
  <IconMCI
    name="account-search"
    size={45}
    color={tintColor}
    /*onPress={() => {
      console.log('HELP!!');
      this.props.navigation.navigate('Search');
    }}*/
  />
);

const MessageTabBarIcon = ({tintColor}) => (
  <IconFA
    name="envelope"
    size={35}
    color={tintColor}
  />
);



export default SignedInTabNav = createMaterialTopTabNavigator(
  {
    Profile: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarLabel: 'Me',
        tabBarIcon: ProfileTabBarIcon,
      },
    },
    Search: {
      screen: LinksScreen,
      navigationOptions: {
        tabBarLabel: 'Search',
        tabBarIcon: SearchTabBarIcon,
      },
    },
    Message: {
      screen: SettingsScreen,
      navigationOptions: {
        tabBarLabel: 'Message',
        tabBarIcon: MessageTabBarIcon,
      },
    },
  },
  {
    tabBarOptions: {
      showIcon: true,
      upperCaseLabel: false,
      activeTintColor: '#42CBC8',
      inactiveTintColor: '#9A9F99',
      labelStyle: {
        fontSize: 12,
        margin: 0
      },
      iconStyle: {
        flex: 1
      },
      style: {
        backgroundColor: '#F8F8FF',
        height: 65,
        borderBottomColor: '#D3D3D3',
      },
    },
    animationEnabled: false,
  }, 
); 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: 50,
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'center',
  }
});