Text with adjustFontSizeToFit and numberOfLine equal to 1 leads to text being cut off or having extra width

[itsramiel]

Description

I have a row of the 3 items. Each item contains two texts. I want that the left text shrinks in size if needed, so I have set flexShrink: 1, adjustFontSizeToFit, and numberOfLines={1}. While it works for some, it breaks for others in two ways:

1. The text is for some reason cut off
   Android:
   iOS:

2. The text is taking more space than needed:
   Android:
   iOS: doesnt seem to happen here

Steps to reproduce

1. Clone the repo
2. Run the app on iOS/Android

React Native Version

0.75.4

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.6.1
  CPU: (14) arm64 Apple M3 Max
  Memory: 98.53 MB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.11.1
    path: ~/.nvm/versions/node/v20.11.1/bin/node
  Yarn:
    version: 3.6.4
    path: ~/.nvm/versions/node/v20.11.1/bin/yarn
  npm:
    version: 10.2.4
    path: ~/.nvm/versions/node/v20.11.1/bin/npm
  Watchman:
    version: 2024.08.26.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/itsramiel/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2412.12266719
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.0.0
    path: /Users/itsramiel/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.4
    wanted: 0.75.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

### Stacktrace or Logs

```text
No Crash or failure

Reproducer

https://github.com/itsramiel/SingleLineText

Screenshots and Videos

iOS	Android
Simulator.Screen.Recording.-.iPhone.15.-.2024-10-16.at.09.40.21.mp4	Screen.Recording.2024-10-16.at.9.39.42.AM.mov

[cortinico]

@itsramiel is this happening also on New Architecture?

@coado @j-piasecki do you have any context on this one?

[itsramiel]

Yes same behavior on new arch. Can be test on new-arch branch

[j-piasecki]

@cortinico Nothing from the top of my head, but we can take a closer look at this.

[j-piasecki]

This is an interesting one. The code for scaling down the font size when adjustsFontSizeToFit effectively doesn't run for single-character text. On Android it relies on line breaks to check whether the text doesn't fit in the container and single character cannot be broken. On iOS it relies on truncatedGlyphRangeInLineFragmentForGlyphAtIndex which seems to always return NSNotFound when the string has only one character.

[itsramiel]

@j-piasecki Interesting finding. That is consistent with the seen effect, where it only happens to single character in the screenshots above.

Do you have a fix in mind, is it easy to implement?

[j-piasecki]

@itsramiel I'm not sure whether it's the perfect solution, but I've opened a PR which is fixing the problem in the repro you've provided. Could you verify that it works for you?

[itsramiel]

@j-piasecki

I am not sure what the easiest way to test it, but I copied your changes to my react-native files in my node_modules. iOS worked but Android didnt.

I tried with a nightly version of react native and got the same result. However, it could easily be that I am copying the code wrongly or missing something, so I would love to know the easiest way to test this.

[cortinico]

I am not sure what the easiest way to test it, but I copied your changes to my react-native files in my node_modules. iOS worked but Android didnt.

Android doesn't work with patch package unless you enable build from source:
https://reactnative.dev/contributing/how-to-build-from-source

[itsramiel]

I am not sure what the easiest way to test it, but I copied your changes to my react-native files in my node_modules. iOS worked but Android didnt.

Android doesn't work with patch package unless you enable build from source: reactnative.dev/contributing/how-to-build-from-source

Thank you, now able to test!

@itsramiel I'm not sure whether it's the perfect solution, but I've opened a PR which is fixing the problem in the repro you've provided. Could you verify that it works for you?

Tested and seems to work!! Maybe add some reviewers to collect feedback?

[cortinico]

We're discussing the PR internally and we'll get back to you whenever we can (please note that this week we might be slower to respond and do reviews than usual)

[YasinAkimura]

I had a similar issue using this on react native 0.76.1 using iOS it's caused a little bit differently by a setting the lineHeight bigger then the original fontSize: result it completely glitches out per render cycle either by a too small font or sometimes back to normal.
In my case it was easily fixed by tweaking the lineHeight or removing it but that did not happen in the old arch using 0.75

[rastapasta]

@YasinAkimura Thanks.

Running into same issue on 0.76.3 (iOS and Android), removing the lineHeight also helped in my case and on both platforms. My texts got miniturized as soon as an adjust was neccesary.