React-native: TextInput does not respect allowFontScaling=false on Android

[llamaluvr]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS High Sierra 10.13.4
Node: 8.4.0
Yarn: 1.6.0
npm: 5.4.2
Watchman: 4.9.0
Xcode: Xcode 9.3 Build version 9E145
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz => 0.54.2

Steps to Reproduce

1. Place a TextInput
2. Set placeholder prop
3. Set allowFontScaling=false
4. On Android, go to Settings-> Accessibility and turn on "Large Text" (this varies a bit depending on the phone - the "Large Text" setting is there on stock Android, but Galaxy S phones have a "Visual" submenu under Accessibility and offer a slider for changing to all sorts of sizes).
5. Run the app on Android. Look at the placeholder and type something in the TextInput.

Expected Behavior

The TextInput's text and placeholder should be the same size when "Large Text" is turned on and when it is turned off.

Actual Behavior

The TextInput's text and placeholder is larger when "Large Text" is turned on, despite allowFontScaling=false.

Reproducible Demo

I have created a Snack demonstrating the issue here: https://snack.expo.io/@llamaluvr/android-textinput-allowfontscaling-not-respected

NOTE: This was originally opened and closed under (https://github.com/facebook/react-native/issues/13944). Opening a new issue with a demo and more detailed information.

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[hramos]

Re-opening. All we need to make this a complete issue is to add back the "Environment" section. Please run react-native info.

[llamaluvr]

@hramos updated!

[nklhrstv]

i need that fix too

[AnotherEye]

Environment:
OS: macOS High Sierra 10.13.4
Node: 6.11.2
Yarn: 1.5.1
npm: 5.8.0
Watchman: Not Found
Xcode: Xcode 9.3.1 Build version 9E501
Android Studio: 3.1 AI-173.4720617

Packages: (wanted => installed)
react: ^16.3.0-alpha.1 => 16.3.0-alpha.2
react-native: 0.54.2 => 0.54.2

same issue here!

[RomanISWG]

Same issue with RN 55.4

[mnsrv]

Same issue with RN 56.0

[NeliHarbuzava]

Guys, I faced with the same problem. I created this lib for resolving this issue in my project. Maybe it will help you: https://github.com/NelGarbuzova/react-native-stylized-placeholder

[huangkaiw3n]

Am on RN 0.56.1. On Android, when TextInput is set with allowFontScaling=false, the text typed into TextInput works correctly with no scaling.

However, the placeholder text in TextInput does not work correctly and still scales.

[anirudha-ani]

For fixing the placeholder font scaling change @NelGarbuzova library works but for the input text part the workaround is to -

1. import PixelRatio from react-native
2. In TextInput style set your fontSize to {intendedFontSize / PixelRatio.getFontScale()}

It will fix your fontSize and won't change because of system settings for both iOS and Android. For this workaround don't set allowTextScaling to false in TextInput.

[alloy]

Hello there 👋 this issue seems to have been inactive for the past few weeks. Because of this, it's likely that the issue is not a high priority anymore or it has been solved by OP; for these reasons, we'll close it. But please, if it's actually still an issue with 0.59 please comment below and we can reopen it or please send us a Pull Request with a fix 😊

[nicolashemonic]

@anirudha-ani solution works well but it's still an issue on RN 0.59.8

[yaronlevi]

It's still an issue in 0.59.10
We've just upgraded to 0.59.10 and using:
Text.allowFontScaling = false;
is not respected.

Suddenly the app's text size if very large on devices that have a larger then default font size.

[NeliHarbuzava]

@yaronlevi

It's still an issue in 0.59.10
We've just upgraded to 0.59.10 and using:
Text.allowFontScaling = false;
is not respected.

Suddenly the app's text size if very large on devices that have a larger then default font size.

use this way at the top of your root component:

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

[andywu0408]

Still not resolved, yet it is closed :/