【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.

Start by reproducing the issue from App.tsx with the font in android/app/src/main/assets/fonts on an affected Android device such as the OPPO K9x 5G. Compare the Japanese Text rendering with and without lineHeight: the work is complete when the content is fully visible and centered without requiring lineHeight.