React-native: `allowFontScaling={false}` doesn't work with TextInput's placeholder in Android.

Created on 11 Sep 2017  路  11Comments  路  Source: facebook/react-native

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

  1. react-native -v: 0.43.4
  2. node -v: v6.11.2
  3. npm -v: 3.10.10
  4. yarn --version: 0.24.5

Then, specify:

  • Target Platform: Android

  • Development Operating System: macOS

  • Build tools: Android Studio, buildToolsVersion "23.0.1"

Steps to Reproduce

(Write your steps here:)

  1. Use TextInput in the project
  2. set allowFontScaling={false} the component

Expected Behavior

Text and placeholder size shouldn't be scaled when user set font size.

Actual Behavior

  1. Text size don't be scaled.(It's right.)
    image
  2. Placeholder size still be scaled.(I think that it's unreasonable.)
    image

Reproducible Demo

Stale

Most helpful comment

This really is a problem in both ios and android.

All 11 comments

It does not work on iOS either

+1 on ios and android

any solution for this. I am having the same problem.

i have the same problem. since my galaxy s5 only have font size MEDIUM, i have to scroll inside textinput to see the placeholder. How to fix this.
Thanks..

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

I have the same problem in android

This really is a problem in both ios and android.

I found the placeholder of text input component in Android not ignoring the device system font size. Even in the latest react-native 0.54 version, the issue still exist. I finally solved it by making a faked placeholder on top of the text input instead of using the placeholder props of text input.

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 .

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.

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.

This works for me on Android 99%, but still there is a noticeable flash of font size change (intended size -> smaller size -> intended size) when starting to input contents into empty TextInputs.

Was this page helpful?
0 / 5 - 0 ratings