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.

Inconsistent scaling with adjustsFontSizeToFit and without numberOfLines set

See original GitHub issue

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: Linux 4.12 Node: 8.5.0 Yarn: 1.0.1 npm: 5.3.0 Watchman: 4.7.0 Xcode: N/A Android Studio: Not Found

Packages: (wanted => installed) react: 16.0.0-alpha.12 => 16.0.0-alpha.12 react-native: 0.48.4 => 0.48.4

Target Platform: iOS (9.3.5)

Steps to Reproduce

Create a Text element with adjustsFontSizeToFit and some fixed dimensions.
Try different heights

Expected Behavior

The paragraph is always visible with no text cut off.

Actual Behavior

At some heights the scaling results in the top of the first line and the bottom of the last line being cut off. See screenshot

Reproducible Demo

Try the following snack, changing the height up/down a few pecentage points until the issue occurs (as in screenshot above).

https://snack.expo.io/BkMMmrqo-

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:6

Top GitHub Comments

2reactions

CharlieOrlandocommented, Nov 15, 2017

Yeah. I saw that solution in your other post (quite clever, i might add). Was wondering if there’s been any official word on a fix to the react native prop itself. I’d also be curious to know what causes the issue in the first place. It’s quite perplexing. Anyway, appreciate the reply and the workaround. It seriously took me days before I found it.

2reactions

zachasmecommented, Nov 15, 2017

For anyone else encountering this, as temporary workaround we’re wrapping text in a pair of line-breaks and non-breaking spaces: <Text {...props}>{"\u00a0\n"}Long Paragraph{"\n\u00a0"}</Text>.

Top Results From Across the Web

Are there any alternatives to adjustsFontSizeToFit for Android?

For IOS I am using the properties adjustsFontSizeToFit and minimumFontScale props for Text to achieve the ideal font size and scaling. I want ......

Inconsistent Font Scaling in Widgets - Unreal Engine Forums

I've tried wrapping with SizeBoxes or ScaleBoxes to no avail. The chosen font doesn't matter. It's not a resolution problem (my game is ......

Hands-On Design Patterns with React Native [Book] - O'Reilly

Scaling the font down. This is possible on iOS right now: <Text style={styles.text} numberOfLines={1} adjustsFontSizeToFit> {this.state.likeCount}</Text>.

Text - React Native Archive

Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). Type, Required, Platform. number, No, iOS ...

React Native — How to center Text and auto adjust font size ...

... to to the Component (that currently not available on their Text ... caught my eye adjustsFontSizeToFit and allowFontScaling and ended up ...