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.

adjustsFontSizeToFit can't handle explicit line breaks

See original GitHub issue

Description

I recently experienced an issue with the <Text /> component, in particular with the automatic font size shrinking on iOS. When rendering Text with explicit line break and adjustsFontSizeToFit enabled it does not render any characters after the newline. I would expect that it takes the longest line into account and then shrinks the font size of the whole text so that the longest line fits in the container.

It renders correctly without the explicit line break. I think the view has an incorrect height and therefore only renders the first line. The second line will be visible when setting an explicit height. If you guys have any workaround in mind or some advice where to get started fixing this, I would love to hear some feedback.

Example:

 <Text 
    adjustsFontSizeToFit
    numberOfLines={2}
    style={styles.welcome}
>
    {"First Line\nSecond line with some more text"}
</Text>
screenshot 2019-01-31 at 23 08 39

Reproducible Demo

I created a demo to reproduce the issue. Clone it, install npm dependencies and run on your iOS device/simulator.

https://github.com/michaelknoch/AdjustFontSizeToFitIos-Reproduction

Environment

react-native info

  React Native Environment Info:
    System:
      OS: macOS 10.14.2
      CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
      Memory: 139.47 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.11.3 - /usr/local/bin/node
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.7.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 24, 25, 26, 27
        Build Tools: 23.0.1, 23.0.2, 23.0.3, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 27.0.0, 27.0.3, 28.0.3
        System Images: android-22 | Google APIs ARM EABI v7a
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3 
      react-native: 0.58.3 => 0.58.3 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7
      react-native: 0.56.0

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7

github_iconTop GitHub Comments

1reaction
michaelknochcommented, Aug 2, 2019

actually it’s still a thing

0reactions
stale[bot]commented, Nov 7, 2019

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

Read more comments on GitHub >

github_iconTop Results From Across the Web

RN23237 - adjustsFontSizeToFit line breaks - Expo Snack
Try this project on your phone! Use Expo's online editor to make changes and save your own copy.
Read more >
How do I preserve line breaks when getting text from a textarea?
The easiest solution is to simply style the element you're inserting the text into with the following CSS property: white-space: pre-wrap;.
Read more >
Where Lines Break is Complicated. Here's all the ... - CSS-Tricks
“If a word can't break and would therefore overflow, then it can break anywhere to avoid overflow.” A Heavier Fix, Sometimes: hyphens: auto;....
Read more >
How to add a forced line break inside a table cell - TeX
I have some text in a table and I want to add a forced line break. I want to insert a forced line...
Read more >
Force line breaks to be rendered on screen using CSS and no ...
Without knowing too much I can quickly whip up some amazing visuals without wrangling dirty hacks and/or JavaScript workarounds. A coupla lines ......
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