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

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

Answer 2

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 3

set resizeMode in your style section
such as :
<Image
source={iconName}
style={{ width: 25, height: 25, tintColor }}
resizeMode={"contain"}
/>