TextInput allow font scaling false

Question

I'm building an app with React Native. The problem is that, when the font size is changed through the phone's settings, the font sizes also change in the app, even though they're all set a fixed font size.

For example, consider the following Text element with font size 12:

<Text style={{fontSize: 12}}>Hello World</Text>

I've found out that there's a prop named allowFontScaling for this issue.So, I go to App.js and add the following line for disabling the font scaling throughout the app:

Text.defaultProps.allowFontScaling = false;

It works perfectly. However, the same prop doesn't seem be not implemented for TextInput element. When I try doing the same for TextInput, I get the following error:

undefined is not an object (evaluating '_reactNative.TextInput.defaultProps.allowFontScaling = false')

Therefore, I may set a fixed font size for Text, but not TextInput. Is there any workaround for this issue? My react-native version is 0.48.4.

Thanks in advance.

Answer 1

An easy solution to solve this is to add the following code on top of my App.js file:

Text.defaultProps = {
  ...(Text.defaultProps || {}),
  allowFontScaling: false,
};
TextInput.defaultProps = {
  ...(TextInput.defaultProps || {}),
  allowFontScaling: false,
};

Cheers.

Answer 2

As allowFontScaling prop of "TextInput" does not work on android the workaround for both iOS and android is to -

1. import PixelRatio from react-native
2. In TextInput style set your fontSize to {intendedFontSize / PixelRatio.getFontScale()}

It will fix your fontSize and won't change because of system settings

Answer 3

You can add this code in your app.js file. This is the valid way to use in .jsx file instead .ts

useEffect(() => {
    Text.defaultProps = Text.defaultProps || {};
    Text.defaultProps.allowFontScaling = false;
    TextInput.defaultProps = TextInput.defaultProps || {};
    TextInput.defaultProps.allowFontScaling = false;
    View.defaultProps = View.defaultProps || {};
    View.defaultProps.allowFontScaling = false;
  }, [])