adjustsFontSizeToFit can't handle explicit line breaks

[michaelknoch]

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>

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

[CatapultJesse]

Looks like there's an order with with calculations are done in as the container itself can include extra spacing when not needed
Snack Repro: https://snack.expo.io/@jkcooper/rn23237---adjustsfontsizetofit-line-breaks

[CatapultJesse]

Could be related to: #19117

[kelset]

👋 there - I can confirm that on RN 0.59 this issue is still present.

We are going to look into it more over the next few months, but please feel free to work more on it if you have time / feel that you may have a good idea of a fix 🤗

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[michaelknoch]

actually it's still a thing

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

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.