Hide labels in TabNavigator - ReactNavigation

Question

How do I hide the labels in TabNavigator and show only icons? If I do the following:

const Tabs = TabNavigator({
  Home: {
    screen:MainHome,
    navigationOptions: ({ navigation }) => ({
        title: "Home",  //Tried to hide this for next tab Search.
        tabBarIcon: ({ tintColor, focused }) => <View><MaterialIcons name="home"/></View>
      })
  },
  Search: {
    screen:TestComp1,
    navigationOptions: ({ navigation }) => ({
      //If no title it shows the name as Search.
      tabBarIcon: ({ tintColor, focused }) => <View><MaterialIcons name="accessibility"/></View>
    })

  }
}, { 

   tabBarPosition: 'bottom',

   tabBarOptions: {
    showIcon: true,
    activeTintColor: '#e91e63',  //Not working for icons.
    inactiveBackgroundColor: 'green', // Not working at all.
    style: {backgroundColor: '#3498DB', height: 60, padding:0, margin:0}
  }
});

If I remove title from the navigationOptions it shows the name of the Tab (Home or Search). I want to only show the icons and change the color of the active icon. activeTintColor not working for icons.

Solution 1

TabNavigator has showLabel prop that you can set. For more info please refer to docs for v1 or docs for v2.

showIcon - whether to show icon for tab, default is false

showLabel - whether to show label for tab, default is true

Solution 2

Here is an example of showing Icon without Label.

tabBarOptions: {
  showLabel: false,
  showIcon: true,
  tintColor: '#333',
  activeTintColor: '#aaa',
}

I defined tintColor and activeTintColor for changing active tab's label color.for changing active tab's icon color you need to define tabBarIcon for each tab and pass tintColor to it. for example if you have a search tab you can do it like this:

Search: {
  screen: SearchScreen,
  navigationOptions:{
    tabBarIcon: ({ tintColor }) => (
      <Icon name="ios-search" style={{color:tintColor}} />
    )
  }
},