Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Enlargement of size of the device font will sometimes break (Styling wise).

like image 694
A-J-A Avatar asked Jan 23 '17 13:01

A-J-A


People also ask

How do you handle font scaling in react native?

Restrict device font scaling. The last method to scale your React Native app allows you to apply an app-wide maximum font scale that any text element can reach. This means that whatever maximum font multiplier you set, the text in your app will never exceed that maximum size.

What is default font for iOS in react native?

San Francisco is the system font on iOS. There are two variants of this font: SF UI Text for text 19 points or smaller, and SF UI Display for text 20 points or larger.


1 Answers

Disabling font scaling can hurt the accessibility of your app, ideally if you want to limit scaling for Apps using React native 0.58.0 and above; use the maxFontSizeMultiplier prop on specific Text components.

However if you absolutely want to disable font scaling across your entire Application, you can do so by globally setting the allowFontScaling prop in the defaultProps of Text.

You should place these lines in your root entrypoint (normally index.js) before AppRegistry.registerComponent.

For React Native 0.56.0+

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

For earlier versions of React Native you should only need the second line, but having both won't hurt. The first line just protects against the Text component not having defaultProps which is the case for React Native 0.56.0 and above.

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

This prop will only affect Text components and you may want to apply the same changes to TextInput which can be done with a similar snippet:

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

Also note that some components wont obey font scaling settings, for example: Alert, PickerIOS, DatePickerIOS, TabBarIOS, SegmentedControlIOS as these are all natively drawn and don't rely on the Text component.

like image 73
levi Avatar answered Sep 20 '22 12:09

levi