Text cut off on Android 13+

diegolmello commented 7 months ago

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):

Steps to reproduce

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 commented 7 months ago

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

cortinico commented 7 months ago

Text is cutting off vertically on Android 13+.

I assume this is not happening on Android 12 right?

diegolmello commented 7 months ago

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

fabOnReact commented 7 months ago

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

arlovip commented 5 months ago

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 commented 1 week ago

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?

facebook / react-native