【RN v0.71.10】Text doesn't show all content on Android(some devices)

Description

Init a new project, just add Text component to show some texts on Android. The Text doesn't show all content for Japanese with custom font fontFamily--BarlowCondensed-Regular on Android(some devices only) such as OPPO K9x 5G.

React Native Version

0.71.10

Output of npx react-native info

➜ newrnversion npx react-native info

info Fetching system and libraries information...
System:
    OS: macOS 12.5
    CPU: (8) arm64 Apple M2
    Memory: 86.42 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.6.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.4.0 - /opt/homebrew/bin/npm
    Watchman: 2023.02.06.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.17 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.10 => 0.71.10 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Init a new project using npx react-native init newrnversion.
2. Create a font directory assets/fonts inside newrnversion/android/app/src/main.
3. Add a custom font BarlowCondensed-Regular file to newrnversion/android/app/src/main/assets/fonts.
4. Edit App.tsx file, adds a Text component with Japanese.
5. Sets the fontFamily as BarlowCondensed-Regular.
6. Run android only.
7. The content in Text does not show incomplete.

Snack, code example, screenshot, or link to a repository

Codes

import React from "react";
import { Text, View } from "react-native";
import { Header } from "react-native/Libraries/NewAppScreen";

function App(): JSX.Element {
  return (
    <View>
      <Header />
      <Text style={{
        fontSize: 16,
        backgroundColor: "red",
        marginTop: 200,
        alignSelf: "center",
        textAlign: 'center',
        fontFamily: "BarlowCondensed-Regular"
      }}>
        番号を変更
      </Text>
    </View>
  );
}

export default App;

Screenshot

Actual behaviour

The text does not align center and the content shows incomplete. It seems that it's cut off and moves down!

Expected behaviour

The text aligns center and the content shows complete. For example:

However, if I sets lineHeight: 20 like

<Text style={{
  fontSize: 16,
  backgroundColor: "red",
  marginTop: 200,
  alignSelf: "center",
  textAlign: 'center',
  fontFamily: "BarlowCondensed-Regular",
  lineHeight: 20, // here!
}}>
  番号を変更
</Text>

Everything works well on all devices! But I think we shouldn't always set lineHeight to avoid this problem. It should be a bug on Android. Any ideas or how to fix it using a efficient way?

At last, the font file(BarlowCondensed-Regular) can be downloaded via the link: BarlowCondensed-Regular.

Any help will be appreciated.

まず、OPPO K9x 5G などの影響を受ける Android デバイスで、android/app/src/main/assets/fonts にあるフォントを使って App.tsx から問題を再現します。lineHeight を指定した場合と指定しない場合の Japanese Text のレンダリングを比較します。lineHeight を必要とせずにコンテンツが完全に表示され、中央揃えになることが完了条件です。