How to get side by side icon and label in tab navigator

Question

I am trying to achieve row-wise icon and label for a tab navigator in one of my project. I am able to set icon and label as per the default settings, but i want the icon to be on the left side and label on the right not as icon on top and label on bottom.

This is my code:

export const InnerTab = TabNavigator({
Map: {
    screen: MapStack,
    navigationOptions: {
          tabBarLabel: 'Map',
          tabBarIcon:  (
                <Image source={require('../logos/map.png')}
                       style={[styles.innerTabIcon, {color: '#ffffff'}]}
                />
          )
    },
},
List: {
    screen: ListStack,
    navigationOptions: {
          tabBarLabel: 'List',
          tabBarIcon:  (
                <Image source={require('../logos/list.png')}
                       style={[styles.innerTabIcon, {color: '#ffffff'}]}
                />
          )
    },
},
},
{
tabBarPosition: 'top',
animationEnabled: false,
swipeEnabled:false,
lazy:true,
tabBarOptions: {
upperCaseLabel: false,
showIcon: true,
activeBackgroundColor:'#2394C7',
inactiveBackgroundColor:'#77909F',
tabStyle:{
  marginTop:(Platform.OS === 'ios') ? 0 : 0,
  height : 40,

},
 indicatorStyle: {
    backgroundColor : '#2394C7',
    height :(Platform.OS === 'ios') ? 53 :  63,
  },

 style :{
     backgroundColor:'#77909F'
 },
labelStyle: {
    fontSize: 18,
    fontWeight:'bold',
     marginTop: 0,
     color :'#ffffff'
},
},
});

I have gone through the docs but found none. But tried few ways but didnt work.

Is there any way i can achieve it??

Answer 1

You can add flexDirection:'row' to tabStyle under tabBarOptions.

Reference:

https://reactnavigation.org/docs/navigators/tab

tabBarOptions: {
upperCaseLabel: false,
showIcon: true,
activeBackgroundColor:'#2394C7',
inactiveBackgroundColor:'#77909F',
tabStyle:{
  marginTop:(Platform.OS === 'ios') ? 0 : 0,
  height : 40,
  flexDirection: 'row'
},