hide/remove Icon or Icon view from bottom tab navigation

Question

I want to remove the Icon space/View from the Bottom tab Navigator. I tried to remove the Icon by removing tabBarIcon but it didn't work. Here is the code I tried and the outcome I received. It is not looking that good, the label is not at the center. They looks like they have gone below the visible screen. Code used:

const TabNavigator = createMaterialBottomTabNavigator(
{
    Home: {
        screen: screen1,
        navigationOptions: {
            // tiitle: "hello"
            // tabBarIcon: () => {
            //     <View></View>
            // },
            tabBarLabel: <Text style={{ fontSize: 15, textDecorationLine: 'underline', }}>Screen1</Text>,
        }
    },
    People: {
        screen: screen2,
        navigationOptions: {
            tabBarLabel: <Text style={{ fontSize: 15, textDecorationLine: 'underline' }}>Screen2</Text>,
            activeColor: '#E8947F',
            inactiveColor: '#C4C9CB',
        }
    },
    Connects: {
        screen: screen3,
        navigationOptions: {
            tabBarLabel: <Text style={{ fontSize: 15, textDecorationLine: 'underline' }}>Screen3</Text>,
            activeColor: '#E8947F',
            inactiveColor: '#C4C9CB',

            // barStyle: { backgroundColor: '#2c6d6a' },
        }
    },
},
{
    initialRouteName: 'Home',
    activeColor: '#E8947F',
    inactiveColor: '#C4C9CB',
    barStyle: { backgroundColor: '#00000000' },
});

Outcome:

I am new to React-Native. Please help me.

score 10 · Answer 1 · edited Sep 20 '21 at 05:52

You just have to add screenOptions={{tabBarIconStyle: { display: "none" }}} like below example.

<Tab.Navigator
  screenOptions={{
    tabBarLabelPosition: "beside-icon",
    tabBarLabelStyle: {
      fontWeight: "700",
      fontSize: 15
    },
    tabBarIconStyle: { display: "none" },
  }}
>
  <Tab.Screen
    component={DemoComponent}
    name="Demo"
    options={{ tabBarLabel: "My Demo" }}
  />
</Tab.Navigator>

score 8 · Answer 2 · answered Dec 20 '21 at 10:11

8

Just you need to add this options in Tab.Screen which you want to hide in TabNavigator like below.

<Tab.Screen name="Home" component={HomeStack} options={{
    tabBarButton: () => null,
    tabBarVisible: false,
  }} />

answered Dec 20 '21 at 10:11

Jemish Rajpara

119
1
3

1

This answer worked for me with React Navigation v6.x, as `tabBarIconStyle` was removed in the 6.x version. – Kurt Lagerbier Sep 28 '22 at 15:28

score 0 · Answer 3 · answered Sep 16 '20 at 04:40

I had the same problem today and I didn't found a single solution in the whole internet.

Fortunately, I managed to solve it with the following styles:

tabBarOptions={{
  labelStyle: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    textAlignVertical: 'center',
  },
}}

score 0 · Answer 4 · answered Feb 11 '21 at 11:23

I solved this problem with below tabBarOptions,

tabBarOptions: {
  style: {
    backgroundColor: 'white',
    alignItems: 'center',
  },
  labelStyle: {
    fontSize: 16,
  },
  activeTintColor: '#444444',
  inactiveTintColor: 'lightgrey',
  showIcon: false,
}

score 0 · Answer 5 · edited Dec 17 '21 at 08:28

0

For me, worked only

tabBarLabelStyle: {
    position: 'absolute'
}

If you want to see the differences, add borderWith: 1 to make sure

edited Dec 17 '21 at 08:28

Nikita Skrebets

1,518
2
13
19

answered Dec 16 '21 at 17:24

Dara Silvera

1

score -2 · Answer 6 · answered Jun 23 '20 at 09:02

-2

Add this to your navigation code:

tabBarOptions: {
    showIcon: false
},

Ref: React Navigation Documentation

answered Jun 23 '20 at 09:02

Brian H.

1,603
11
16

1

I tried this too. It is not working either. Does this work with createMaterialBottomTabNavigator? – Vikas Bansal Jun 23 '20 at 09:32

hide/remove Icon or Icon view from bottom tab navigation

6 Answers6