Text cut off on Android 13+

[diegolmello]

Description

Text is cutting off vertically on Android 13+.
Tested both on old and new arch.

There's a couple of issues with similar topics (none mentioning new arch, nor with an easy repro):

• Oppo A77 - Some texts gets cut-off #15114
• 【RN v0.71.10】Text doesn't show all content on Android(some devices) #37764
• Text Component ellipsis is not displayed correctly in Android (the three dots are cut-off)  #41559
• Text Cut Off on Android 13 #36992
• Text Component ellipsis is not displayed correctly in Android (sometimes the three dots are cut-off) #36336
• Text Component ellipsis is not displayed correctly in Android using custom font (the three dots are cut-off) #36350

Steps to reproduce

1. Use ༼ つ ◕_◕ ༽つ test text anywhere

React Native Version

0.73.4

Affected Platforms

Runtime - Android

Areas

Fabric - The New Renderer

Output of npx react-native info

System:
    OS: macOS 14.3
    CPU: (8) arm64 Apple M1 Pro
    Memory: 121.52 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: Not Found
  SDKs:
    iOS SDK:
      Platforms: DriverKit 23.2, iOS 17.2, macOS 14.2, tvOS 17.2, visionOS 1.0, watchOS 10.2
    Android SDK:
      API Levels: 23, 28, 30, 31, 33, 34
      Build Tools: 23.0.1, 23.0.2, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.3, 28.0.3, 29.0.0, 29.0.1, 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0, 33.0.0, 33.0.1, 34.0.0
      System Images: android-31 | ARM 64 v8a, android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play ARM 64 v8a, android-33-ext5 | Google Play ARM 64 v8a
      Android NDK: 23.0.7344513-beta4
  IDEs:
    Android Studio: 2022.2 AI-222.4459.24.2221.9862592
    Xcode: 15.2/15C500b - /usr/bin/xcodebuild
  Languages:
    Java: 17.0.8 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: RocketChat/react-native#1b987e4ae3d5e912fda77da5215912ec15f14327 => 0.68.7
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

### Stacktrace or Logs

```text
n/a

Reproducer

https://snack.expo.dev/@diegolmello/gimme-text-cutoff

Screenshots and Videos

SDK 33

SDK 31

[diegolmello]

@fabOnReact https://github.com/fabOnReact/react-native-improved doesn't fix it (tested on old arch, of course)

[cortinico]

Text is cutting off vertically on Android 13+.

I assume this is not happening on Android 12 right?

[diegolmello]

@cortinico Right, tested on SDK 31 (see attached screenshot).
Haven't tested on SDK 32 though.

[fabOnReact]

I believe measure does not calculate correct height for ༼ つ ◕_◕ ༽つ

[arlovip]

The similar issue on XiaoMi 12 Pro.

System font settings

The result

Codes

	return <View style={{flex: 1, backgroundColor: 'white', justifyContent: 'center', alignItems: 'center'}}>
		<Text
			allowFontScaling={false}
			style={{
				fontSize: 24, 
				fontWeight: 'bold', 
				color: HFColors.black,
				backgroundColor: 'red',
			}}>
			00:00
		</Text>
	</View>;

• If system font setting uses the normal size, everything works well.
• Or the fontSize sets to a value less than 20, for example, fontSize: 16, everything works well.
• Or remove the fontWeight, everything works well.
• Or add a space after 00:00, everything works well.

[cani1see]

How can this kind of bug linger for this long? The cut off at the line end can cause serious issues, like number of finances. Do Facebook's own apps have this issue?

[jcdhlzq]

The similar issue on XiaoMi 12 Pro.

System font settings

The result

Codes

	return <View style={{flex: 1, backgroundColor: 'white', justifyContent: 'center', alignItems: 'center'}}>
		<Text
			allowFontScaling={false}
			style={{
				fontSize: 24, 
				fontWeight: 'bold', 
				color: HFColors.black,
				backgroundColor: 'red',
			}}>
			00:00
		</Text>
	</View>;

• If system font setting uses the normal size, everything works well.
• Or the fontSize sets to a value less than 20, for example, fontSize: 16, everything works well.
• Or remove the fontWeight, everything works well.
• Or add a space after 00:00, everything works well.

Text-cutoff problem may be caused by many reasons. But this text-cutoff on Xiaomi 12 Pro with xxs light MiSans font is resulted from some bugs with variable fonts.
While texts using variable fonts, the text measurement algorithm will adjust the axes weight for width, weight, size, etc.
I fix this type text-cutoff in our produce environment with the help of Xiaomi rom developers. And the solution is mentioned in #39581