How to disable font scaling in React Native for iOS app?

Question

The font extension of the device is sometimes interrupted (styling wise).

Answer 1

For React native 0. 58+

It is advisable to keep the font scaling, but you can limit it using Text new prop maxFontSizeMultiplier

For React native 0. 56+ use Levy's answer

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

For native React 0.55 and below

Add Text.defaultProps.allowFontScaling=false at the beginning of the application (for example, main.js or app.js, etc.) to apply this support to all Text components in the entire application.

Answer 2

Disabling font scaling can degrade the availability of your application, ideally if you want to limit the scaling for applications using React native 0.58.0 and higher; use maxFontSizeMultiplier prop for specific Text components.

However, if you absolutely want to disable font scaling throughout the application, you can do this globally by setting allowFontScaling prop to defaultProps in Text .

For React Native 0.56. 0+

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

For earlier versions of React Native, you only need the second line, but having both will not hurt. The first line simply protects the component Text , not having defaultProps , as in the case React Native 0.56.0 and above.

Add the above lines to the entry point file of your React Native application (usually index.js , app.js or main.js ) to apply this support to all Text components in your application.

This attribute only affects the Text components, and you can apply the same changes to TextInput , which can be done using a similar fragment:

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

Also note that some components do not obey the font scaling settings, for example: Alert , PickerIOS , DatePickerIOS , TabBarIOS , SegmentedControlIOS , since all of them are initially drawn and are not dependent on the Text components.

Answer 3

Create a <AppText> component and use it with your presets instead of the original ones, with your own default settings, including scaling the font false. This is better because you can enrich it with your own API.

For example, my AppText allows you to do things like:

<AppText id="some.translation.key" color="primary" size="l" underline italic bold/>

Answer 4

  if (Text.defaultProps == null) { Text.defaultProps = {}; Text.defaultProps.allowFontScaling = false; } 

I saved this piece of code inside the index.js constructor index.js It really worked well. In addition, I use the reactive version 0.59.9 FYI.