How to hide TabBar Text in TabNavigator?

Question

I'm using TabNavigator from 'react-navigation'. I want to hide or remove Text under icons.

Here is a part of TabNavigator. (I'm using Expo)

    Camera: {
      screen: CameraScreen,
    },
    Noti: {
      screen: NotificationScreen,
    },
    Menu: {
      screen: MenuStackNavigator,
    },
  },
  {
    navigationOptions: ({ navigation }) => ({
         header: null, <<<
         tabBarIcon: ({ focused }) => {
                     ...
         },
     }),
     header: null, <<<-
     headerMode: 'none',  <<--       
     tabBarComponent: TabBarBottom,
     tabBarPosition: 'bottom',
     animationEnabled: false,
     swipeEnabled: false,
     backBehavior: 'none',

And this is CamaraScreen

class CameraScreen extends Component {
  static navigationOptions = {
    title: 'Camera'
  }

user_10142502 · Answer

You can hide the label by specifying tabBarShowLabel: false for the screenOptions object:

        headerShown: false,
        tabBarStyle: { backgroundColor: "#000000", borderTopWidth: 0 },
        tabBarShowLabel: false,
      }}```

How to hide TabBar Text in TabNavigator?

2 Answers