Implement allowFontScaling on Android

Android Text components are wanting the ability to disallow font scaling. This is a key feature for design in order to prevent breaking layouts when the user sets their font sizes to huge. Allowing font scaling by default is fine, but there should be a convenient way to disallow it when needed so that apps work well for all users. It is an accessibility concern.

I currently work around this applying the following function in my style sheets:

  // Returns a scale-invariant font size.
  // On iOS this is a no-op, since we can use `allowFontScaling` to disable
  // scaling there. On Android, this reduces the font size so that when Android scales it
  // it will give the desired font size.
  function fixedFont(size) {
    // NOTE: Font Scale should always be the same as the Pixel Ratio on iOS, making this
    // a no-op.
    return size * ReactNative.PixelRatio.get() / ReactNative.PixelRatio.getFontScale();
  }

I have a general idea of how to fix this, but my Java skills chops aren’t really up to the task of creating a pull request. The issue seems to be that in ReactTextShadowNode.java:390 we compute the font size from Android’s SP units, which scale. What we want, instead, is to do this from DIP units when allowFontScaling is false. This is the recommended way to handle non-scaling font sizes in Android.

So, we would want something like:

if (allowFontScaling) {
  fontSize = (float) Math.ceil(PixelUtil.toPixelFromSP(fontSize));
else {
  fontSize = (float) Math.ceil(PixelUtil.toPixelFromDIP(fontSize));
}

[mmckinley8]

@sibelius if you setText.defaultProps.allowFontScaling = false in index.ios.js, it will set it globally.

[zweifisch]

I’ve replace StyleSheet.create with the following function

export const createStyleSheet = dict => {
    for (let key of Object.keys(dict)) {
        for (let name of Object.keys(dict[key])) {
            if (name === 'fontSize' || name === 'lineHeight') {
                dict[key][name] = fixedFont(dict[key][name])
            }
        }
    }
    return StyleSheet.create(dict)
}