Font scale capping for React-Native

README.md

Posible solution for React Native =< 0.58

iOS uses AccessibilityManager fro that (which is not available for Android) https://github.com/facebook/react-native/blob/1151c096dab17e5d9a6ac05b61aacecd4305f3db/IntegrationTests/AccessibilityManagerTest.js

Android uses a native solution, https://stackoverflow.com/questions/21546805/how-to-prevent-system-font-size-changing-effects-to-android-application/32832216#32832216

Important info:

React Native 0.59 will come with maxFontSizeMultiplier prop for Text and TextInput. https://facebook.github.io/react-native/docs/next/text#maxfontsizemultiplier

With it, the app will be able to have a cross-platform solution to set font scale capping from JS only

Probably the app will be able to set it globally with this:

Text.defaultProps.maxFontSizeMultiplier = 1.3;
TextInput.defaultProps.maxFontSizeMultiplier = 1.3;

App.js

import * as React from "react";
import { NativeModules } from "react-native"

export default class App extends React.Component {
  
  componentDidMount() {
     if (IS_IOS) {
      NativeModules.AccessibilityManager.setAccessibilityContentSizeMultipliers({
        extraSmall: 0.823,
        small: 0.882,
        medium: 0.941,
        large: 1.0,
        extraLarge: 1.118,
        extraExtraLarge: 1.235,
        extraExtraExtraLarge: 1.353,
        accessibilityMedium: 1.353,
        accessibilityLarge: 1.353,
        accessibilityExtraLarge: 1.353,
        accessibilityExtraExtraLarge: 1.353,
        accessibilityExtraExtraExtraLarge: 1.353,
      });
    }
  }

  render() {
    // ...
  }
}

MainActivity.java

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

public class MainActivity extends ReactActivity {
  protected void onCreate(Bundle savedInstanceState) {
    // ...

    adjustFontScale(getResources().getConfiguration());
  }

  public void adjustFontScale(Configuration configuration) {
    Float maxFontScale = 1.299f;
    Float fontScale = configuration.fontScale >= maxFontScale ? maxFontScale : configuration.fontScale;

    configuration.fontScale = (float) fontScale;
    DisplayMetrics metrics = getResources().getDisplayMetrics();
    WindowManager wm = (WindowManager) getSystemService(WINDOW_SERVICE);
    wm.getDefaultDisplay().getMetrics(metrics);
    metrics.scaledDensity = configuration.fontScale * metrics.density;
    getApplicationContext().getResources().updateConfiguration(configuration, metrics);
  }
}