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

[arlovip]

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.

[arlovip]

Updates: The issue can be reproduced using Android emulator Nexus S (API 33).

Screenshot

The reproduced demo repository link: Demo

[cortinico]

0.73.9

This version of React Native doens't exist

[arlovip]

@cortinico Oh..Sorry. It should be 0.71.10(The latest version), I have already updated the comment above.

[arlovip]

Any updates? It still exists on React native 0.72.3.

[zoeyfrisart]

This is probably related to #15114

[arlovip]

Finally I fixed it to add nested outer Text wrapper like:

import React, {memo} from "react";
import {Text} from "react-native";
import PropTypes from "prop-types";

function CLText(props) {
	const {children, allowFontScaling = false} = props;
	// Note that `allowFontScaling` must be set between two `Text` below.
	return (
		<Text allowFontScaling={allowFontScaling}>
			<Text {...props} allowFontScaling={allowFontScaling}>
				{children}
			</Text>
		</Text>
	);
}

CLText.propTypes = {
	style: PropTypes.oneOfType([
		PropTypes.object,
		PropTypes.array,
	]),
	allowFontScaling: PropTypes.bool,
	lineBreakMode: PropTypes.string,
	numberOfLines: PropTypes.number,
	onPress: PropTypes.func,
	textBreakStrategy: PropTypes.string,
};

export default memo(CLText);