How to change fontSize of labels of the TabBar in react navigation on focus?

Question

I need to change fontSize of the label when it's in focus. I was tried, but nothing works.

I found "activeLabelStyle" prop, but it doesn't work.

Thanks!

My code:

export const AppNavigation = () => {
  const Stack = createStackNavigator();
  const Tab = createBottomTabNavigator();

  const MainTabNavigator = () => {
    return (
      <Tab.Navigator
        tabBarOptions={{
        labelPosition: "beside-icon",
        activeTintColor: "white",
        style: {
        backgroundColor: "black",
      },
      labelStyle: {
        fontSize: 20,
      },
      tabStyle: {
        fontSize: 10,
      },
    }}
  >
    <Tab.Screen name="Main" component={MainScreen} />
    <Tab.Screen name="Stats" component={StatsScreen} />
    <Tab.Screen name="Profile" component={ProfileScreen} />
  </Tab.Navigator>
);
};

return (
  <NavigationContainer>
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Main" component={MainTabNavigator} />
    </Stack.Navigator>
  </NavigationContainer>
);
};

Answer 1

I found that you can use "tabBarIcon" with any component and make it's a text =)

<Tab.Navigator
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused }) => {
        let iconName;
        let fontStyle;
        let fontSize;
        let fontColor;
        let unFocusColor = "rgba(255, 255, 255, 0.5)";

        let focusSetting = () => {
          fontStyle = focused ? "norms-bold" : "norms-regular";
          fontColor = focused ? "white" : unFocusColor;
          fontSize = focused ? 18 : 17;
        };

        if (route.name === "stats") {
          iconName = "stats";
          focusSetting();
        } else if (route.name === "main") {
          iconName = "main";
          focusSetting();
        } else if (route.name === "profile") {
          iconName = "profile";
          focusSetting();
        }

        return (
          <Text
            style={{
              fontFamily: fontStyle,
              fontSize: fontSize,
              color: fontColor,
            }}
          >
            {iconName}
          </Text>
        );
      },
    })}
    tabBarOptions={{
      activeTintColor: "white",
      tabStyle: {
        maxWidth: 70,
      },
      style: {
        alignItems: "center",
        paddingRight: "5%",
        backgroundColor: "black",
        borderTopColor: "rgba(255, 255, 255, 0.35)",
        borderTopWidth: 0.5,
      },
      showLabel: false,
    }}
    listeners={{
      tabPress: Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light),
    }}
  >
    <Tab.Screen name="stats" component={StatsScreen} />
    <Tab.Screen name="main" component={MainScreen} />
    <Tab.Screen name="profile" component={ProfileScreen} />
  </Tab.Navigator>