How to disable font scaling in React Native for IOS app?
For React native 0.58+
Preferable to keep font scaling but you can limit it by using Text new prop maxFontSizeMultiplier
For React native 0.56+ use Levi's answer
Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;
For React native 0.55 and lower
Add Text.defaultProps.allowFontScaling=false
at the beginning of the app (e.g. main.js or app.js etc ...) to apply this prop on all Text components through out the whole app.
When user increase full font size from setting
Enlargement of size of the device font will not break (Styling wise).
index.js file
import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';
import {Text, TextInput} from 'react-native';
AppRegistry.registerComponent(appName, () => App);
//ADD this
if (Text.defaultProps == null) {
Text.defaultProps = {};
Text.defaultProps.allowFontScaling = false;
}
if (TextInput.defaultProps == null) {
TextInput.defaultProps = {};
TextInput.defaultProps.allowFontScaling = false;
}
<CalendarStrip
shouldAllowFontScaling={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.
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.