how to hide label in bottom tab navigator react navigation v5

Question

im trying to hide the Label. and showLabel: false is not working.

import React, {useLayoutEffect} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {useNavigation} from '@react-navigation/native';

import HomeTopTabNavigator from '../routes/home.top.tab';
import {NAVIGATOR} from '../constants/screen.constants';
import THEME from '../constants/theme.constants';
import Icon from '../components/atoms/Icon';

const HomeStack = createStackNavigator();

function HomeStackNavigator() {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      showLabel: false,
      tabBarIcon: () => (
        <Icon
          type="MaterialCommunityIcons"
          name="home"
          size={24}
          color={THEME.PRIMARY}
        />
      ),
    });
  }, [navigation]);

  return (
    <HomeStack.Navigator
      screenOptions={{headerStyle: {elevation: 0, shadowOpacity: 0}}}>
      <HomeStack.Screen
        name={NAVIGATOR.HomeTopTab}
        component={HomeTopTabNavigator}
      />
    </HomeStack.Navigator>
  );
}

export default HomeStackNavigator;

Watchdog

are u using tabBar? – Sulphone

Yes. the parent of this HomeStackNavigator() is a TabNavigator – Plumbery

Answer 1

For Tab bar pass like the ,

options={{
    tabBarShowLabel: false,
    // Custom Name
    // tabBarLabel: 'Name', 
}}

Sulphone

<Tab.Navigator screenOptions={{ tabBarShowLabel: false }} ... – Erastatus

Not working for @react-navigation/bottom-tabs vesion 6 for bottom tabs – Mccullough

Works ok for me on version 6.5.11 @react-navigation/bottom-tabs – Lilybelle

Answer 2

With BottomTabNavigator, you can play with tabBarLabelStyle and CSS properties.

Set display: "none" in screenOptions to globally hide labels. Then, for each tab that needs a label, simply add display: "flex" in its option.

const AppTabs = createBottomTabNavigator<AppTabsParamList>();

const AppTabsScreen = () => {
  return (
    <AppTabs.Navigator 
      screenOptions={{
        tabBarLabelStyle: {
          display: "none" 👈
        },
      }}
    >
      <AppTabs.Screen
        name="FirstScreen"
        component={FirstScreen}
        options={() => ({
          tabBarIcon: ({ color }) => (
            <TabBarIcon name="home" color={color} />
          ),
          tabBarLabelStyle: { display: "flex" } 👈
          title: "Accueil",
        })}
      />
      <AppTabs.Screen
        name="SecondScreen"
        component={SecondScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <TabBarIcon name="plus-circle" color={color} />
          ),
        }}
      />
      <AppTabs.Screen
        name="ThirdScreen"
        component={ThirdScreen}
        options={() => ({
          tabBarIcon: ({ color }) => (
            <TabBarIcon name="user" color={color} />
          ),
          tabBarLabelStyle: { display: "flex" } 👈
          title: "Vous",
        })}
      />
    </AppTabs.Navigator>
  )
}

In the end, you get something like this:

Weaver

Answer 3

I solved the problem by doing this:

<Tab.Navigator screenOptions={{ tabBarShowLabel: false, }}/>

Miller

Answer 4

There is a property called labeled in the TabNavigator. Whether to show labels in tabs. When false, only icons will be displayed.

    <Tab.Navigator
      labeled={false}
       ....

Kokoruda

Worked for me using react-navigation/material-bottom-tabs – Corinecorinna

Answer 5

If you use https://reactnavigation.org/docs/bottom-tab-navigator

please kindly check out this one instead

https://reactnavigation.org/docs/material-bottom-tab-navigator/

Something like

import React from 'react';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import FeedScreen from './Feed';
import AddScreen from './Add';
import ProfileScreen from './Profile';

const Tab = createMaterialBottomTabNavigator();

const MainScreen = () => {
  return (
    <Tab.Navigator labeled={false}>
      <Tab.Screen
        name='FeedTab'
        component={FeedScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name='home' color={color} size={26} />
          ),
        }}
        
      />
      <Tab.Screen
        name='AddTab'
        component={AddScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name='plus-box' color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name='ProfileTab'
        component={ProfileScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons
              name='account-circle'
              color={color}
              size={26}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

export default MainScreen;

Vitalis