React Native max value for font scaling

Question

I'm aware that I can disable font scaling globally in my React Native app by putting Text.defaultProps.allowFontScaling = false in the constructor of the root component (i.e. in the root index.js or App.js file). However, is there a way to allow a max value for scaling, instead of disabling it completely?

I've tried adjustsFontSizeToFit = true thinking it would prevent text from scaling up to really large sizes (which it does), but now all the text becomes too small and it breaks the styling of the app.

I've tried using minimumFontScale in combination with adjustsFontSizeToFit above, since according to the docs, minimumFontScale "specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled." I set this value to 1.0 but the text still scales up to a ridiculously unreadable size (for example, if the "Larger Accessibility Size" is enabled in iOS and set to max scale) and setting it to a lower value (for example 0.25) allows the text to fit reasonably in my app, but the spacing and relative sizing becomes broken.

It would be nice if the text would remain it's default size, and still be allowed to scale up with "Accessibility Size" enabled in iOS, but only to a certain point–is there a way to achieve this?

Answer 1

You can use

allowFontScaling={false}

along with

Math.min(PixelRatio.getFontScale() * yourFontSizeBase, yourFontSizeBase)

to limit the max font size.

Answer 2

In react native 0.58+ you can use the new prop maxFontSizeMultiplier inside the Text Component https://facebook.github.io/react-native/docs/text#maxfontsizemultiplier