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;

Yes. the parent of this `HomeStackNavigator()` is a `TabNavigator` — Кріс, Jan 28 '21 at 15:00

score 7 · Answer 1 · edited Aug 03 '23 at 02:39

7

For Tab bar pass like the ,

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

edited Aug 03 '23 at 02:39

Zahir Masoodi

546
7
23

answered Jan 28 '21 at 14:43

Rajshekhar

571
5
9

15

– nishi Mar 08 '22 at 08:06
2

Not working for @react-navigation/bottom-tabs vesion 6 for bottom tabs – Deep Adhia Mar 16 '22 at 05:13

score 2 · Answer 2 · answered Apr 13 '23 at 17:20

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:

score 2 · Answer 3 · edited Jun 10 '23 at 16:49

2

I solved the problem by doing this:

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

edited Jun 10 '23 at 16:49

maxime G

1,660
1
10
27

answered Jun 07 '23 at 17:02

Talha Sheikh

21
1

score 2 · Answer 4 · answered Jun 19 '23 at 16:01

2

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}
       ....

answered Jun 19 '23 at 16:01

Roshan Maddumage

130
3
12

1

Worked for me using react-navigation/material-bottom-tabs – wtmcm Jul 05 '23 at 07:32

Nutt Chokwittaya · Answer 5 · 2021-06-04T14:59:19.077

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;

how to hide label in bottom tab navigator react navigation v5

5 Answers5