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