Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TextInput does not respect allowFontScaling=false on Android #17898

Closed
keith-kurak opened this issue Feb 7, 2018 · 15 comments
Closed

TextInput does not respect allowFontScaling=false on Android #17898

keith-kurak opened this issue Feb 7, 2018 · 15 comments
Labels
Bug Component: TextInput Related to the TextInput component. Platform: Android Android applications. Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.

Comments

@keith-kurak
Copy link

keith-kurak commented Feb 7, 2018

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 (#13944). Opening a new issue with a demo and more detailed information.

@react-native-bot

This comment has been minimized.

@react-native-bot react-native-bot added Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon. labels Feb 24, 2018
@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Feb 24, 2018
@hramos hramos reopened this Apr 10, 2018
@hramos

This comment has been minimized.

@keith-kurak

This comment has been minimized.

@nklhtv

This comment has been minimized.

@hramos hramos added the Component: TextInput Related to the TextInput component. label May 14, 2018
@AnotherEye

This comment has been minimized.

@hramos hramos added the Platform: Android Android applications. label May 25, 2018
@RomanISWG

This comment has been minimized.

@mnsrv
Copy link

mnsrv commented Jul 24, 2018

Same issue with RN 56.0

@ghost
Copy link

ghost commented Sep 10, 2018

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
Copy link

huangkaiw3n commented Sep 19, 2018

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
Copy link

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
Copy link
Contributor

alloy commented Mar 19, 2019

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
Copy link

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

@yaronlevi
Copy link

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.

@ghost
Copy link

ghost commented Jul 30, 2019

@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
Copy link

Still not resolved, yet it is closed :/

@facebook facebook locked as resolved and limited conversation to collaborators Mar 19, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 19, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Component: TextInput Related to the TextInput component. Platform: Android Android applications. Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests