How to remove auto fontScaling in react native bottom tab bar

Question

I have a bottom tab bar which is create from @react-navigation/material-bottom-tabs

Here I have faced issue with autoFontScaling on bottom tab bar label. I need to make disable autoFontScaling for bottom tab bar.

Here is the things i tried inside of options:

1:

  tabBarLabel: "HOME",
  tabBarIcon: ({color}: {color: string}) => (
    <Home fill={color} stroke={color} width={24} height={24} />
  ),
  tabBarOptions: {
    allowFontScaling: false
   }

2:

 tabBarLabel: <Text style={{fontSize: 12}} allowFontScaling={false}>HOME</Text>,
  tabBarIcon: ({color}: {color: string}) => (
    <Home fill={color} stroke={color} width={24} height={24} />
  )

The both are not working as I expected.

Here is the image of issue I mentioned which having larger text size.

Answer 1

I have fixed this issue by removing font-scaling in whole app. For removing font-scaling in whole paste this code in App.tsx | App.js

If you are using TS:-

interface TextWithDefaultProps extends Text {
    defaultProps?: { allowFontScaling?: boolean };
}

((Text as unknown) as TextWithDefaultProps).defaultProps =
    ((Text as unknown) as TextWithDefaultProps).defaultProps || {};
((Text as unknown) as TextWithDefaultProps).defaultProps!.allowFontScaling = false;

If you are using JS:-

Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;