How to change active labelStyle in MaterialTopTabNavigator?

user_14897787 0
Viewed 601

I would like to change the label's font weight. When it's active it should be 600 and when it's not then 400. I couldn't figure out a way how to detect the active state.

This is the tab I would like to change when active: enter image description here

<TabTop.Navigator 
  tabBarOptions={{
  activeTintColor: "rgba(16,37,68,1)",
  inactiveTintColor: "rgba(16,37,68,1)",
  labelStyle: {fontFamily: "Fira Sans", fontWeight: "400"},
  style: {marginHorizontal: 16, elevation: 0, },
  indicatorStyle: {backgroundColor: "rgba(23,200,115,1)", paddingLeft: 10, elevation: 0}
  }}
  >
    <TabTop.Screen 
      name="Teljesítendő" 
      component={AcceptedRides}  />
    <TabTop.Screen name="Korábbi" component={PreviousRides} />  
</TabTop.Navigator>
react-native reactjs
2 Answers

Working Example: Expo Snack

enter image description here

give your TabTop.Navigator following screen options:

  screenOptions={({ route }) => ({
    tabBarLabel: ({ focused }) => {
      return (
        <View style={{ alignItems: 'center' }}>
          <Text
            style={{
              fontFamily: 'Fira Sans',
              fontWeight: focused ? '800' : '400',
            }}>
            {route.name.toUpperCase()}
          </Text>
        </View>
      );
    },
  })}

The final code should look like this:

<TabTop.Navigator
  screenOptions={({ route }) => ({
    tabBarLabel: ({ focused }) => {
      return (
        <View style={{ alignItems: 'center' }}>
          <Text
            style={{
              fontFamily: 'Fira Sans',
              fontWeight: focused ? '800' : '400',
            }}>
            {route.name.toUpperCase()}
          </Text>
        </View>
      );
    },
  })}
  tabBarOptions={{
    activeTintColor: 'rgba(16,37,68,1)',
    inactiveTintColor: 'rgba(16,37,68,1)',
    tabBarLabel: { fontFamily: 'Fira Sans' },
    style: { marginHorizontal: 16, elevation: 0 },
    indicatorStyle: {
      backgroundColor: 'rgba(23,200,115,1)',
      paddingLeft: 10,
      elevation: 0,
    },
  }}>
  <TabTop.Screen name="Teljesítendő" component={AcceptedRides} />
  <TabTop.Screen name="Korábbi" component={PreviousRides} /> 
</TabTop.Navigator>

Nice question btw.

user_56691200 
<Tab.Navigator
            initialRouteName="Watch"
            screenOptions={({route}) => ({
                headerShown: false,
                tabBarActiveTintColor: '#05ff84',
                tabBarInactiveTintColor: 'white',
                tabBarActiveFontSize: 100,
                tabBarStyle: {
                    backgroundColor: '#032433',
                },
                tabBarLabel: ({focused}) => {
                    return (
                        <View style={{alignItems: 'center'}}>
                            <Text
                                style={{
                                    color: focused ? '#05ff84' : 'white',
                                    fontFamily: focused ? 'GTWalsheimProBold' : 'GTWalsheimProRegular',
                                    fontSize: 11,
                                }}>
                                {route.name}
                            </Text>
                        </View>
                    )
                }
            })}>
            <Tab.Screen name="Tab1" component={Tab1} options={{
                tabBarIcon: ({focused, color}) => (
                    <Entypo name="home" size={focused ? 25 : 25} color={color}/>
                ),
            }}/>
            <Tab.Screen name="Tab2" component={Tab2} options={{
                tabBarIcon: ({focused, color}) => (
                    <Foundation name="graph-pie" size={focused ? 25 : 30} color={color}/>
                ),
            }}/>
            <Tab.Screen name="Tab3" component={Tab3} options={{
                tabBarIcon: ({focused, color}) => (
                    <FontAwesome name="star" size={focused ? 25 : 25} color={color}/>
                ),
            }}/>
        </Tab.Navigator>
user_42912720
Related