How to change active labelStyle in MaterialTopTabNavigator?

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:

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

Solution 1:

Working Example: Expo Snack

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.