Text truncates inconsistently on Android

[estrattonbailey]

Description

Hey y’all, we're noticing a tricky issue on Android where text gets truncated unnecessarily, using seemingly arbitrary rules. Did some searching and I wasn't able to find this particular issue mentioned anywhere.

In the screenshots below, the black box is intended to represent our new verification badges, I’ve added in here just to better illustrate the flex-row we’re working with. The dashed line is the parent container, showing that the items are intended to be center aligned within the parent.

iOS renders the text as desired, but on Android it’s truncated unnecessarily. Android seems to be particularly sensitive to text size, letter spacing, and actual text content. Devices also seem to affect it. For example, the Expo team noticed that that one apostrophe changes everything on Pixel, but not Galaxy.

Hoping we're not just holding this wrong, thanks for having a look! 🙏

Steps to reproduce

• load up the app and let it open the home screen
• try adjusting the styles
  • font size
  • letter spacing
  • change the text content

React Native Version

0.76.9

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: macOS 14.4.1
  CPU: (10) arm64 Apple M1 Max
  Memory: 125.69 MB / 64.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.18.3
    path: ~/.nvm/versions/node/v20.18.3/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v20.18.3/bin/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v20.18.3/bin/npm
  Watchman:
    version: 2025.02.17.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/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:
    API Levels:
      - "28"
      - "29"
      - "31"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-25 | Google APIs ARM 64 v8a
      - android-25 | Google APIs Intel x86 Atom
      - android-28 | Google ARM64-V8a Play ARM 64 v8a
      - android-30 | Google Play Intel x86 Atom
      - android-31 | Google APIs ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11076708
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 3.4.2
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

N/A

MANDATORY Reproducer

#50910
https://github.com/estrattonbailey/android-flexbonks

Screenshots and Videos

In reproducer PR:

In attached Expo example:

[react-native-bot]

Warning

Unsupported version: It looks like your issue or the example you provided uses an unsupported version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[react-native-bot]

Warning

Unsupported version: It looks like your issue or the example you provided uses an unsupported version of React Native.

Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[estrattonbailey]

Ah, apologies, I see now I should make a PR to the RNTesterPlayground.js as a better reproducer. Will update the description here with that when I have it.

[migueldaipre]

Hi @estrattonbailey, thanks for reporting this.

Does this issue occur in the latest versions? I ask because version 0.76 is out the current support window.

[estrattonbailey]

Hey thanks for having a look! Yes I see that 76 is unsupported now. I noted in the PR, but it does not repro from main, so I assume it got fixed somewhere along the way. I'm investigating if it's solved in 77, and may try out Expo 53 Beta with 79.

So this issue may be moot in any case, sorry for the noise, but if you have any clues for us let me know 🙏