React-native: [Android] allowFontScaling prop on TextInput does not disable placeholder font scaling

[psahgal]

• [✔️] I have reviewed the documentation
• [✔️] I have searched existing issues
• [✔️] I am using the latest React Native version

I'm using the allowFontScaling prop on Text elements and TextInput elements for some more fine-grained control of the font scaling behavior in my team's app. Specifically, I'm setting allowFontScaling to false and doing the font scaling manually, so I can cap the font scaling at a reasonable amount. This approach worked for everything except the placeholder text on TextInput elements on Android. It appears that allowFontScaling={false} does not turn off the font scaling for placeholder text.

Environment

Environment:
OS: macOS High Sierra 10.13.2
Node: 9.2.0
Yarn: Not Found
npm: 5.8.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.1 AI-173.4670197

Packages: (wanted => installed)
react: 16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: 0.55.0 => 0.55.0

Steps to Reproduce

I have put together a sample project at https://github.com/Elethier/react-native-placeholder-scaling-bug. I reproduced the issue on a Samsung Galaxy J7 running Android 6.0.1 and a Nexus 5X running Android 8.1.0.

I should also note that I was unable to reproduce this issue on a fresh native Android project, which suggests to me that it's a bug specific to React Native.

Expected Behavior

I would expect that if the prop allowFontScaling is set to false, both the placeholder text and the user-inserted text would not scale up based on the phone's system font size.

Actual Behavior

The placeholder text font size scales up with the system font size, even though the user-inserted text does not. Here is a GIF showing the behavior:

For reference, here is a screenshot of the phone's font size settings. This is on a Samsung Galaxy J7.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[8of]

Also in React Native 0.56.0 setting TextInput.defaultProps.allowFontScaling = false; doesn't work at all.

[esdlists]

Any one have ideas how to solve this in React Native 0.56.0 ? We are blocked and appreciate some direction.

[QuYunFengg]

Yes, I have the same problem.

[francismalone]

@8of @esdlists @QuYunFengg
I've used this with success:

TextInput.defaultProps = { ...(TextInput.defaultProps || {}), allowFontScaling: false };

[dungkv-1044]

@francismalone i tried, but it's not work

:(

[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 ..

[anirudha-ani]

For placeholder fontSize change issue @NelGarbuzova 's solution works. To fix font changing while inputting text 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 android and iOS. For this workaround don't set allowFontScaling to false.

[NeliHarbuzava]

@anirudha-ani but your solution don't affect on placeholder size, placeholder still be transformed by user device's settings.

[anirudha-ani]

@NelGarbuzova that's why I have suggested your component along with it to fix placeholder font size

[rigdern]

I have a fix for this: https://github.com/rigdern/react-native/commit/d03806970dab5c36e1229e1b94bfeb6a20e06360

After a prerequisite PR is merged (#22917), I'll send a PR with that fix.