react-navigation Android Tabbar not displaying correctly - react-navigation

Question

I followed the react-navigation API instructions as in the link (https://reactnavigation.org/docs/tab-based-navigation.html) and created Tabbar app with TabNavigator stack and each tab has StackNavigator screens. I purposefully commented the tabBarComponent and tabBarPosition because I want the Tabs to appear like native for Android (Top Tabbbar) and IOS (Bottom Tabbar) with same code base. The IOS Tab bar works correctly but when I look at the Android tabbar, the top portion of the tab bar is overlap/overflowing to the Android status bar (I mean the section where the time, battery and wifi symbols appear). Also, the icons and label font size are bigger compared to IOS tab bar size which makes the label to wrap to next line (see "Abcd's ef" tab). What needs to be done, in order for the Android Tabbar to show correctly like the IOS tabbar but at the top i.e., without overflow, wrap text and correct icon and label size. I have provided below the code as well as screenshots of Android and IOS Tabbar.
FYI, I am using Expo on Android and IOS device (not simulators) with create-react-native-app application
[IOS][1]
[Android][2]
[Android Screen with issue details][3]
***Commented Code:***
//tabBarComponent: TabBarBottom,
//tabBarPosition: 'bottom',
***Codes:***
<code>
import React, { Component } from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
import FirstScreen from './tabs/FirstScreen';
//import SecondScreen from './tabs/SecondScreen';
import FagsHome from './FagsHome';
import Movies from './Movies';
import MenuSecondScreen from './MenuSecondScreen';
import ThirdScreen from './tabs/ThirdScreen';
import FourthScreen from './tabs/FourthScreen';
import FifthScreen from './tabs/FifthScreen';
import { TabNavigator, TabBarBottom, StackNavigator } from 'react-navigation';
import IconOcticons from 'react-native-vector-icons/Octicons';
import IconFontAwesome from 'react-native-vector-icons/FontAwesome';
// What's Up
const WhatsupStackMain = StackNavigator(
{
FirstScreen: {
screen: FirstScreen,
},
Movies: {
screen: Movies,
},
},
{
initialRouteName: 'FirstScreen',
}
);
const WhatsupStack = StackNavigator(
{
Main: {
screen: WhatsupStackMain,
},
MenuFags: {
screen: MenuSecondScreen,
},
},
{
mode: 'card',
headerMode: 'none',
}
);
// Fags
const FagsStackMain = StackNavigator(
{
FagsHome: {
screen: FagsHome,
},
Movies: {
screen: Movies,
},
},
{
initialRouteName: 'FagsHome',
}
);
const FagsStack = StackNavigator(
{
Main: {
screen: FagsStackMain,
},
MenuFags: {
screen: MenuSecondScreen,
},
},
{
mode: 'card',
headerMode: 'none',
}
);
// Tags
const TagsStackMain = StackNavigator(
{
ThirdScreen: {
screen: ThirdScreen,
},
Movies: {
screen: Movies,
},
},
{
initialRouteName: 'ThirdScreen',
}
);
const TagsStack = StackNavigator(
{
Main: {
screen: TagsStackMain,
},
MenuFags: {
screen: MenuSecondScreen,
},
},
{
mode: 'card',
headerMode: 'none',
}
);
// Settings
const SettingsStackMain = StackNavigator(
{
FourthScreen: {
screen: FourthScreen,
},
Movies: {
screen: Movies,
},
},
{
initialRouteName: 'FourthScreen',
}
);
const SettingsStack = StackNavigator(
{
Main: {
screen: SettingsStackMain,
},
MenuFags: {
screen: MenuSecondScreen,
},
},
{
mode: 'card',
headerMode: 'none',
}
);
// Profile
const ProfileStackMain = StackNavigator(
{
FifthScreen: {
screen: FifthScreen,
},
Movies: {
screen: Movies,
},
},
{
initialRouteName: 'FifthScreen',
}
);
const ProfileStack = StackNavigator(
{
Main: {
screen: ProfileStackMain,
},
MenuFags: {
screen: MenuSecondScreen,
},
},
{
mode: 'card',
headerMode: 'none',
}
);
// Tabs
export default TabNavigator(
{
'Abcd\'s ef': { screen: WhatsupStack },
Ghij: { screen: FagsStack },
Klmn: { screen: TagsStack },
Settings: { screen: SettingsStack },
Profile: { screen: ProfileStack },
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Abcd\'s ef') {
//iconName = `ios-information-circle${focused ? '' : '-outline'}`;
//return <Icon name={focused ? 'globe' : 'globe'} size={22}
//style={{ color: focused ? '#ff0066' : 'black'}}/>;
return <IconOcticons name={'globe'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>;
} else if (routeName === 'Ghij') {
//iconName = `ios-options${focused ? '' : '-outline'}`;
return <IconFontAwesome name={'users'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>
} else if (routeName === 'Klmn') {
//iconName = `ios-options${focused ? '' : '-outline'}`;
return <IconFontAwesome name={'heart'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>
} else if (routeName === 'Settings') {
//iconName = `ios-options${focused ? '' : '-outline'}`;
return <IconOcticons name={'gear'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>
} else if (routeName === 'Profile') {
//iconName = `ios-options${focused ? '' : '-outline'}`;
return <IconFontAwesome name={'user'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>
}
// You can return any component that you like here! We usually use an
// icon component from react-native-vector-icons
//return <Ionicons name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: '#ff0066',
inactiveTintColor: 'gray',
showIcon: true,
upperCaseLabel: false,
},
//tabBarComponent: TabBarBottom,
//tabBarPosition: 'bottom',
animationEnabled: true,
swipeEnabled: true,
}
);
</code>
[1]: https://i.stack.imgur.com/0oVwG.png
[2]: https://i.stack.imgur.com/QQhN4.png
[3]: https://i.stack.imgur.com/oFeiG.png

Answer 1

use allowFontScaling:false in tabBarOptions , by adding this font size will not scale on the basis of devices fontSize.
tabBarOptions:{
allowFontScaling:false
}