topTabNavigator label not showing

Question

I have the following tobtabNavigator but the labels are not showing and I am not sure why. It is just blank as shown bellow

import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();
const DeustchScreen = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarLabelStyle: {fontSize: 12, color: 'red'},
      }}>
      <Tab.Screen name="a" component={Deutsch} />
      <Tab.Screen name="b" component={Deutsch} />
      <Tab.Screen name="c" component={Deutsch} />
      <Tab.Screen name="d" component={Deutsch} />
      <Tab.Screen name="e" component={Deutsch} />
      <Tab.Screen name="f" component={Deutsch} />
      <Tab.Screen name="g" component={Deutsch} />
    </Tab.Navigator>
  );
};

score 1 · Answer 1 · answered Sep 12 '22 at 15:51

1

you can check here in this snack, your code is working :

https://snack.expo.dev/-aQ4MaWt7

Hope it helps .feel free for doubts

answered Sep 12 '22 at 15:51

Gaurav Roy

11,175
3
24
45

You are using the top tab navigation directly inside the navigation container. I however put it afterwards into a stack navigator which in turn is used in the drawer navigation. So I am wondering if it is the nesting that is causing the issue – Babou Sep 12 '22 at 17:18
Share an expo snack please – Gaurav Roy Sep 12 '22 at 17:52
I tried to create this minimal code but I am still facing the same issue. I even tried removing the stack navigator and adding the tab navigator directly same issue. I am not sure why it is not working on my actual project and it is working here https://snack.expo.dev/@yousser/configuring-the-header-bar-%7C-react-navigation – Babou Sep 13 '22 at 04:12
@Babou i can see its working here – Gaurav Roy Sep 13 '22 at 04:14
umm what should i do to rpelicate – Gaurav Roy Sep 13 '22 at 04:14
That is the problem I am not able to replica it through snack – Babou Sep 13 '22 at 04:15
umm then surely some problem in your code , coz ideally it should work – Gaurav Roy Sep 13 '22 at 04:20
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/248005/discussion-between-babou-and-gaurav-roy). – Babou Sep 13 '22 at 04:22

score 0 · Answer 2 · answered Sep 13 '22 at 15:07

0

I was using @react-native-community/viewpager instead of react-native-pager-view. Also in the screenOptions, I needed to specify tabBarItemStyle: {width:100}

answered Sep 13 '22 at 15:07

Babou

151
1
12

topTabNavigator label not showing

2 Answers2