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 numberOfLines=1

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 numberOfLines={1}
Put it in a View and set style={{flex: 1}} on both elements.

Expected Behavior

The paragraph inside the text element is adjusted to fit on a single line, with every word visible.

Actual Behavior

The paragraph is scaled to fit, but inconsistently. Sometimes the last word is cut off. Adding/removing a word sometimes fixes this. See screenshot.

Reproducible Demo

https://snack.expo.io/BkXvD4qjb

Issue Analytics

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

Top GitHub Comments

3reactions

zachasmecommented, Sep 28, 2017

For anyone else encountering this, as temporary workaround we’re adding a regular space followed by a non-breaking space: <Text {...props}>Long Paragraph {"\u00a0"}</Text>.

1reaction

chriscohoatcommented, Dec 19, 2017

I’ve been struggling for days on this and I believe the trick is to use a mono-spaced font family as well, like Helvetica Neue. Used in combination with @zachasme’s fix everything seems to render properly.