[Android] allowFontScaling prop on TextInput does not disable placeholder font scaling #18827

psahgal · 2018-04-12T15:25:42Z

[✔️] 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.

The text was updated successfully, but these errors were encountered:

stale · 2018-07-11T16:03:33Z

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 · 2018-07-12T19:36:12Z

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

esdlists · 2018-07-17T03:19:15Z

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

QuYunFengg · 2018-07-23T03:52:06Z

Yes, I have the same problem.

francismalone · 2018-07-25T18:37:38Z

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

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

dungkv-1044 · 2018-07-26T07:57:33Z

@francismalone i tried, but it's not work

:(

ghost · 2018-09-10T20:46:06Z

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 · 2018-11-26T13:13:28Z

For placeholder fontSize change issue @NelGarbuzova 's solution works. To fix font changing while inputting text the workaround is to -

import PixelRatio from react-native
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.

ghost · 2018-12-07T09:16:14Z

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

anirudha-ani · 2018-12-07T09:23:19Z

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

Currently, the `TextInput's` placeholder is always sized as though `allowFontScaling` is `true`. Note that `allowFontScaling` works fine for the content of the `TextInput`. The reason is that we set the font size in two places: in the shadow node and in the Android view. The shadow node logic determines the size of the content and the Android view logic determines the size of the placeholder. The handler for the `allowFontScaling` prop is only present in the shadow node logic. Consequently, the Android view logic always uses the default value of `true` for the `allowFontScaling` prop. The fix is to add logic for handling the `allowFontScaling` prop to the Android view. It would be great if we could handle all text props in one spot instead of duplicating code between the shadow node and the Android view. That would eliminate this whole class of bugs. However, I don't have enough familiarity with the history of this code to know how hard that would be or if it's even possible. Fixes facebook#18827. Test Plan: ---------- Verified that `Text`, the content of a `TextInput`, and the placeholder of a `TextInput` are all rendered the same way for all values of `allowFontScaling` (`undefined`, `true`, `false`). Changelog: ---------- [Android] [Fixed] - TextInput: Support `allowFontScaling` on placeholder Adam Comella Microsoft Corp.

rigdern · 2019-01-09T03:35:53Z

I have a fix for this: rigdern@d038069

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

Currently, the `TextInput's` placeholder is always sized as though `allowFontScaling` is `true`. Note that `allowFontScaling` works fine for the content of the `TextInput`. The reason is that we set the font size in two places: in the shadow node and in the Android view. The shadow node logic determines the size of the content and the Android view logic determines the size of the placeholder. The handler for the `allowFontScaling` prop is only present in the shadow node logic. Consequently, the Android view logic always uses the default value of `true` for the `allowFontScaling` prop. The fix is to add logic for handling the `allowFontScaling` prop to the Android view. It would be great if we could handle all text props in one spot instead of duplicating code between the shadow node and the Android view. That would eliminate this whole class of bugs. However, I don't have enough familiarity with the history of this code to know how hard that would be or if it's even possible. Fixes facebook#18827. Test Plan: ---------- Verified that `Text`, the content of a `TextInput`, and the placeholder of a `TextInput` are all rendered the same way for all values of `allowFontScaling` (`undefined`, `true`, `false`). Changelog: ---------- [Android] [Fixed] - TextInput: Support `allowFontScaling` on placeholder Adam Comella Microsoft Corp.

…k#22992) Summary: Currently, the `TextInput's` placeholder is always sized as though `allowFontScaling` is `true`. Note that `allowFontScaling` works fine for the content of the `TextInput`. The reason is that we set the font size in two places: in the shadow node and in the Android view. The shadow node logic determines the size of the content and the Android view logic determines the size of the placeholder. The handler for the `allowFontScaling` prop is only present in the shadow node logic. Consequently, the Android view logic always uses the default value of `true` for the `allowFontScaling` prop. The fix is to add logic for handling the `allowFontScaling` prop to the Android view. It would be great if we could handle all text props in one spot instead of duplicating code between the shadow node and the Android view. That would eliminate this whole class of bugs. However, I don't have enough familiarity with the history of this code to know how hard that would be or if it's even possible. Fixes facebook#18827. Pull Request resolved: facebook#22992 Differential Revision: D13671400 Pulled By: cpojer fbshipit-source-id: 40bae3cfb0ca6298e91a81c05211538935f5a0e8

react-native-bot added Platform: Android Android applications. Component: TextInput Related to the TextInput component. labels Apr 12, 2018

stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jul 11, 2018

stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jul 12, 2018

hramos added the 🔶Components label Sep 21, 2018

rigdern mentioned this issue Jan 15, 2019

Android TextInput: Support allowFontScaling on placeholder #22992

Closed

facebook-github-bot closed this as completed in e605709 Jan 16, 2019

facebook locked as resolved and limited conversation to collaborators Jan 16, 2020

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jan 16, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Android] allowFontScaling prop on TextInput does not disable placeholder font scaling #18827

[Android] allowFontScaling prop on TextInput does not disable placeholder font scaling #18827

psahgal commented Apr 12, 2018

stale bot commented Jul 11, 2018

8of commented Jul 12, 2018 •

edited

Loading

esdlists commented Jul 17, 2018

QuYunFengg commented Jul 23, 2018

francismalone commented Jul 25, 2018

dungkv-1044 commented Jul 26, 2018

ghost commented Sep 10, 2018

anirudha-ani commented Nov 26, 2018

ghost commented Dec 7, 2018

anirudha-ani commented Dec 7, 2018

rigdern commented Jan 9, 2019

[Android] allowFontScaling prop on TextInput does not disable placeholder font scaling #18827

[Android] allowFontScaling prop on TextInput does not disable placeholder font scaling #18827

Comments

psahgal commented Apr 12, 2018

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

stale bot commented Jul 11, 2018

8of commented Jul 12, 2018 • edited Loading

esdlists commented Jul 17, 2018

QuYunFengg commented Jul 23, 2018

francismalone commented Jul 25, 2018

dungkv-1044 commented Jul 26, 2018

ghost commented Sep 10, 2018

anirudha-ani commented Nov 26, 2018

ghost commented Dec 7, 2018

anirudha-ani commented Dec 7, 2018

rigdern commented Jan 9, 2019

8of commented Jul 12, 2018 •

edited

Loading