[New Arch][Android] After turning on fabric, the text in the Xiaomi MIUI13 system is not fully displayed

[peaktan]

Description

On Xiaomi MIUI13 system, when the font weight is changed and the fontWeight of the Text component is set to blod, the Text text will be truncated and wrapped; If numberOfLines is set to 1, a different phenomenon will occur, causing the end of the text to become an ellipsis and incomplete display.

MIUI 14 seems to have problems as well, and other devices have not been tested.

This problem only occurs when a new architecture is enabled. There is no problem if newArchEnabled is set to false.

This is the system information：

Set the thickness to maximum：

Steps to reproduce

1. Do not set numberOfLines, and the line will be truncated directly.

<View style={{
              paddingHorizontal: 12,
              marginHorizontal: 4,
              alignItems: "center",
              justifyContent: "center",
              height: 26
            }}>
              <Text style={{
                fontSize: 13,
                fontWeight: "bold",
                backgroundColor: 'red',
              }}>已取件(粗体),未设置了numberOfLines * 121221</Text>
            </View>

2、Set numberOfLines to 1, and an ellipsis appears at the end

<View style={{
              paddingHorizontal: 12,
              marginHorizontal: 4,
              alignItems: "center",
              justifyContent: "center",
              height: 26
            }}>
              <Text style={{
                fontSize: 13,
                fontWeight: "bold",
                backgroundColor: 'red',
              }} numberOfLines={1}>已取件(粗体),设置了numberOfLines=1 * 121221</Text>
            </View>

React Native Version

0.74.1

Affected Platforms

Runtime - Android

Areas

Fabric - The New Renderer

Output of npx react-native info

System:
  OS: macOS 13.4
  CPU: (10) arm64 Apple M2 Pro
  Memory: 123.03 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.0.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.19
    path: /usr/local/bin/yarn
  npm:
    version: 8.6.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.1
    path: /Users/01400926/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.4
      - iOS 16.4
      - macOS 13.3
      - tvOS 16.4
      - watchOS 9.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10671973
  Xcode:
    version: 14.3/14E222b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/01400926/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.1
    wanted: 0.74.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

无

Reproducer

https://github.com/peaktan/fontDemo

Screenshots and Videos

code:

 <View style={{
              paddingHorizontal: 12,
              marginHorizontal: 4,
              alignItems: "center",
              justifyContent: "center",
              height: 26
            }}>
              <Text style={{
                fontSize: 13,
                fontWeight: "bold",
                backgroundColor: 'red',
              }}>已取件(粗体),未设置了numberOfLines * 121221</Text>
            </View>
            <View style={{
              paddingHorizontal: 12,
              marginHorizontal: 4,
              alignItems: "center",
              justifyContent: "center",
              height: 26
            }}>
              <Text style={{
                fontSize: 13,
                fontWeight: "bold",
                backgroundColor: 'red',
              }} numberOfLines={1}>已取件(粗体),设置了numberOfLines=1 * 121221</Text>
            </View>

result:

[react-native-bot]

[!TIP] Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - 0.74.6. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[react-native-bot]

[!TIP] Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[sarthak-d11]

Hi @peaktan, Could you please try testing the issue on React Native version 0.76.5? It would be really helpful to narrow down the cause.

[peaktan]

Hi @peaktan, Could you please try testing the issue on React Native version 0.76.5? It would be really helpful to narrow down the cause.

ok，I'll give you a reply after I try it

[peaktan]

Hi @peaktan, Could you please try testing the issue on React Native version 0.76.5? It would be really helpful to narrow down the cause.

Hello, I verified it on the latest React Native version and this problem still exists @sarthak-d11

[cortinico]

MIUI 14 seems to have problems as well, and other devices have not been tested.

How about other non-MIUI devices? Have you tried on Google Pixel, Samsung Galaxy, Android emulator?

[peaktan]

How about other non-MIUI devices? Have you tried on Google Pixel, Samsung Galaxy, Android emulator?

Other simulators did not find the problem, we have 600,000 users online APP, currently only MIUI related users reported this problem, we can use MIUI devices can also reproduce

[peaktan]

MIUI 14 seems to have problems as well, and other devices have not been tested.

This problem only occurs in the new arch, set newArchEnabled=false and this problem disappears

[cortinico]

Thanks for the clarification. This is a bit complicated for us to handle as I don't have a MIUI device so I can't really test/verify it locally

[peaktan]

Thanks for the clarification. This is a bit complicated for us to handle as I don't have a MIUI device so I can't really test/verify it locally

Xiaomi mobile phones have a very large number of users all over the world. I think the react native development team should pay attention to this problem, otherwise there will be many such problems. Buying a Xiaomi phone is not difficult, please take some time to solve this problem, thank you @cortinico

[peaktan]

Thanks for the clarification. This is a bit complicated for us to handle as I don't have a MIUI device so I can't really test/verify it locally

Many cloud platforms provide cloud real machine services, which can easily adapt and verify various models.

[zhiyuang]

@sarthak-d11 @cortinico @peaktan hi, I have a MIUI device and have some investigation in this issue. Found that it should be related to textMeasureCache strategy, related source code.

For current cache strategy, if users have already have open a RN app, then change the system font weight or font size, it will not trigger new text layout measurement when they return to the app (because it still meet the cached key). It only trigger new text measurement when users kill the app and open it again.

And I think this behavior should not only be related to MIUI system, other system should have the same issue.

About how to fix, not sure you guys have any suggestions? Because text measurement cache should be an optimization, if remove it, could fix this issue, but may hurt performance it other situations.

[alanleedev]

Note: seems like there was text cutoff issue reported with Xiaomi device previously.

• 1st attempt PR: PR #39581 (was reverted due to crash)
• 2nd attempt PR: PR #39711 - closed without review due to inactivity

(cc @NickGerleman )

[alanleedev]

@peaktan I think there could be multiple issues tied to this which could make things confusing. It seems RN currently does not handle system font size /weight change immediately. So I need some clarification.

1. Could you post screenshot for both newArchEnabled false and true. (video would be even better)
2. If posting screenshot, can you also show screen right after system font change and also after you reload or relaunch the app.

Thanks.

[peaktan]

Note: seems like there was text cutoff issue reported with Xiaomi device previously.

• 1st attempt PR: PR #39581 (was reverted due to crash)
• 2nd attempt PR: PR #39711 - closed without review due to inactivity

(cc @NickGerleman )

It should be the same problem. This problem still exists and we don’t know how to solve it.

[peaktan]

@sarthak-d11 @cortinico @peaktan hi, I have a MIUI device and have some investigation in this issue. Found that it should be related to textMeasureCache strategy, related source code.

For current cache strategy, if users have already have open a RN app, then change the system font weight or font size, it will not trigger new text layout measurement when they return to the app (because it still meet the cached key). It only trigger new text measurement when users kill the app and open it again.

And I think this behavior should not only be related to MIUI system, other system should have the same issue.

About how to fix, not sure you guys have any suggestions? Because text measurement cache should be an optimization, if remove it, could fix this issue, but may hurt performance it other situations.

The problem we encounter may be different. In my case, the user did not modify the system font during use, which would directly cause the system to restart. This problem can be reproduced, and it is the same every time the system is restarted.

[peaktan]

At present, I found that this problem only occurs when using the MiSans font and changing the system font weight. MiSans was added after MIUI 13.

At the same time, React Native can solve the problem by turning off the new architecture or turning off fabric load (true, fale, false)

We have contacted the Xiaomi engineering team, and they have confirmed that this is caused by the RN fabric rendering mechanism. Please take the time to locate this issue.Thank you

@cortinico

[peaktan]

I don't know much about react-native source code. Can I use non-fabric rendering for the Text component without affecting other components? This should also solve my problem. @cortinico

[alanleedev]

The problem we encounter may be different. In my case, the user did not modify the system font during use, which would directly cause the system to restart. This problem can be reproduced, and it is the same every time the system is restarted.

@peaktan Could you clarify? So the problem happens when RN app is launched for the first time after user reboots the device? So user doesn't need to touch the system font settings?

[peaktan]

The problem we encounter may be different. In my case, the user did not modify the system font during use, which would directly cause the system to restart. This problem can be reproduced, and it is the same every time the system is restarted.

@peaktan Could you clarify? So the problem happens when RN app is launched for the first time after user reboots the device? So user doesn't need to touch the system font settings?

Hi, this problem occurs under the following conditions: This problem only occurs when using the Xiaomi MIUI system, using the MiSans font, and changing the system font weight.

This problem will occur when the above conditions are met, not just when starting the RN application for the first time.

There are two ways to solve this problem:

1. Adjust the font weight to normal;
2. Turn off the new architecture （newArchEnabled=false） or turn off Fabric rendering (load (true, fale, false));

So the problem is obvious, it is caused by react-native fabric rendering

@alanleedev

[peaktan]

The problem we encounter may be different. In my case, the user did not modify the system font during use, which would directly cause the system to restart. This problem can be reproduced, and it is the same every time the system is restarted.

@peaktan Could you clarify? So the problem happens when RN app is launched for the first time after user reboots the device? So user doesn't need to touch the system font settings?

@alanleedev I would also like to ask how to turn off fabric rendering for the Text component alone, which can also temporarily solve my problem. Thank you.

[alanleedev]

turn off fabric rendering for the Text component alone @peaktan This is not possible, we cannot disable it for select components.

I am still not clear about your description. Let's ignore user changing the system font weight for now and please describe the other issue. (We already know that we are not responding to system font changes properly currently.)

Are you saying that everytime app launches the font appears cutoff if the font weight is not in the default system setting?

[peaktan]

turn off fabric rendering for the Text component alone @peaktan This is not possible, we cannot disable it for select components.

I am still not clear about your description. Let's ignore user changing the system font weight for now and please describe the other issue. (We already know that we are not responding to system font changes properly currently.)

Are you saying that everytime app launches the font appears cutoff if the font weight is not in the default system setting?

@alanleedev Yes, the demo I gave can already illustrate this point. In addition, the content of the text is also related. If it is pure Chinese or English and Arabic numerals, there will be no problem. If it is a mixture of Chinese, English and Arabic, there will be problems.

[cortinico]

Just a heads up that I asked help from folks at Expo, namely @lukmccall, to try to reproduce this on a Xiaomi device. He mentioned this does not reproduce on MIUI14 but he was not able to test on MIUI 13.

[wangchongwei]

I face the same issue. and it's not just happen in MIUI 13. I upgrede react-native version to 0.78 newArchEnabled=true Text allowFontScaling=false

I found many Text can't fully displayed

Galaxy A55 5G One UI Version：7.0 Android Version：15

Galaxy Note20 5G One UI Version: 5.1 Android Version: 13

And when I change newArchEnabled to false, this problem disappears

[yandadaFreedom]

A similar problem. In my case, even though users did not change the system font weight, the text still cannot be fully displayed. The problem can be reproduced when using the MiSans font on Xiaomi HyperOS version 2.x.xx.

[WenBin0201]

这个问题解决了吗

[Lshane97]

Same here. Just turning to fabric. Xiaomi HyperOS 2.x (Android 15)+ react-native 0.79.5

A hack method works for me:

import React, { memo } from 'react';
import { Text, TextProps, Platform } from 'react-native';

const BaseText = (props: TextProps) => {
  if (Platform.OS === 'ios') return <Text {...props} />;

  return (
    <Text {...props}>
      {props.children}
      {/** add a SPACE and small text to prevent last character not display */}
      <Text style={{ fontSize: 8 }}> </Text>
    </Text>
  );
};

export default memo(BaseText);