question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:12
  • Comments:11

github_iconTop GitHub Comments

12reactions
levynircommented, Feb 5, 2018

This really is a problem in both ios and android.

1reaction
anirudha-anicommented, Nov 26, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

allowFontScaling={false}` doesn't work with TextInput's ...
When I set allowFontScaling={false} for TextInput must be Text size don't be scaled.(It's right.) but Placeholder size still be scaled (I ...
Read more >
[Android] allowFontScaling prop on TextInput does not disable ...
This approach worked for everything except the placeholder text on TextInput elements on ... allowFontScaling = false; doesn't work at all.
Read more >
TextInput - React Native
A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, ...
Read more >
placeholder - CSS: Cascading Style Sheets - MDN Web Docs
The ::placeholder CSS pseudo-element represents the placeholder text in an or element.
Read more >
Text in Compose - Jetpack - Android Developers
Working with fonts. Text has a fontFamily parameter to allow setting the font used in the composable. By default, serif, sans ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found