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

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

I'm kinda late, but if anyone wants a answer with Typescript, here it is

interface TextWithDefaultProps extends Text {
  defaultProps?: { allowFontScaling?: boolean };
}

(Text as unknown as TextWithDefaultProps).defaultProps = {
   ...((Text as unknown as TextWithDefaultProps).defaultProps || {}),
   allowFontScaling: false,
 };

Answer 5

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

I kept this piece of code inside the constructor of index.js.It really worked well. By the I am using react native version 0.59.9 FYI.

Answer 6

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

For example, my AppText permit to do things like:

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

Answer 7

In another file, import the actual Text component as ScaledText so as a backup, and then redefine Text, overriding the allowFontScaling prop.

export function Text(props) {
  return <ScaledText {...props} allowFontScaling={false} />;
}

Then, import your locally defined Text component, instead of the built-in React Native Text. This is also useful if you want to elegantly disable font scaling on only certain parts of your app.

Answer 8

For webview we can use textZoom={100} props to handle font-size change if font size is changed from mobile setting.

if imported from react-native-webview

<WebView
    textZoom={100}
    source={}/>

Answer 9

For IOS

index.js

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);

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

Note that some components like Alert, PickerIOS, DatePickerIOS, TabBarIOS, and SegmentedControlIOS won't obey font scaling settings as they are natively drawn and don't rely on the Text component.

For Android

import android.content.res.Configuration;
import android.util.DisplayMetrics;
import android.view.WindowManager;

public class MainApplication extends Application {
  @Override
  public void onCreate() {
    super.onCreate();
    adjustFontScale(getResources().getConfiguration());
  }

  private void adjustFontScale(Configuration configuration) {
    configuration.fontScale = (float) 1.0;
    DisplayMetrics metrics = getResources().getDisplayMetrics();
    WindowManager wm = (WindowManager) getSystemService(WINDOW_SERVICE);
    wm.getDefaultDisplay().getMetrics(metrics);
    metrics.scaledDensity = configuration.fontScale * metrics.density;
    getBaseContext().getResources().updateConfiguration(configuration, metrics);
  }
}