After update to MIUI 12,Text is cut off

[jinshiyi11]

Description

After update to MIUI 12, Text is cut off.

the actual text is QQ,but only Q is displayed

React Native version:

React Native version: 0.60.5
model： MI 10 Pro
android：10
MIUI：12.0.1
Fingerprint -> Xiaomi/cmi/cmi:10/QKQ1.191117.002/V12.0.1.0.QJACNXM:user/release-keys

Steps To Reproduce

updrade XiaoMi Phone's system to MIUI 12

Expected Results

full text is expected to display,like below

[xiaohui-hiwintech]

yeah, i have the same issue in miui 12 but it is fine in miui 10 and 9. Not sure it's a issue in react-native or miui.
My rn version is 0.59.9.

The phone number and the word 'message' disappeared.

[jinshiyi11]

currently ,we hook Text render to make it work correctly.
`
const originTextRender = Text.render;

Text.render = function render(props, ref) {

    return originTextRender.apply(this, [{ ...props,  style: [isMiUi12() ? {fontFamily:''} : null, props.style] }, ref]);  

};  

`

[sapjax]

This is caused by the default FontFamily of MIUI 12: "小米兰亭 PRO". It's a variable opentype Font, look like react-native doesn't support it.

[sapjax]

@jinshiyi11
What is your code to detect MIUI12 in isMiUi12?

[github-actions]

⚠️	Missing Environment Information
ℹ️	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[github-actions]

⚠️	Using Old Version
ℹ️	It looks like you are using an older version of React Native. Please upgrade to the latest version, and verify if the issue persists. If it does not, 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 current release.

[bashen1]

The same issue in miui 12

[Foveluy]

currently ,we hook Text render to make it work correctly.
`
const originTextRender = Text.render;

Text.render = function render(props, ref) {

    return originTextRender.apply(this, [{ ...props,  style: [isMiUi12() ? {fontFamily:''} : null, props.style] }, ref]);  

};  

`

cannot fix the problem

[AKB48]

It did work to set a default property - {fontFamily: ''} in style property of Text

[KingAmo]

same here,

[everfire130]

The same issue in RN0.63.2

[jinshiyi11]

@jinshiyi11
What is your code to detect MIUI12 in isMiUi12?

the code likes below

import {  Platform, NativeModules } from 'react-native';

function isMiUi12() {
    if(Platform.OS === 'android' && NativeModules.PlatformConstants){
        const fingerprint = NativeModules.PlatformConstants.Fingerprint && NativeModules.PlatformConstants.Fingerprint.toLowerCase();
      
        // MiUi12 fingerprint:Xiaomi/cmi/cmi:10/QKQ1.191117.002/V12.0.1.0.QJACNXM:user/release-keys
        if(fingerprint && fingerprint.startsWith('xiaomi') && fingerprint.indexOf('v12')!==-1){
            return true;
        }
    }
   
    return false;
}

[fangasvsass]

any update ?

[onegaop]

MIUI 12.0.5 , same here

[michael2h4ng]

This looks more like a MIUI 12 issue to me.

We had the same problem, but when we changed the system's font weight to another value (in Settings - Display - Text size & font weight), the issue disappeared. When we changed it back to the original value, the rendering remained perfect.

[inkCrazy]

最后你们怎么解决问题的，RN0.62.2 小米10， MIUI12.0.8同样问题。

[magicismight]

if (Platform.OS === 'android' && NativeModules.PlatformConstants) {
  const fingerprint = NativeModules.PlatformConstants.Fingerprint;

  if (fingerprint?.match(/^(xiaomi|redmi|mi|mix|poco).*\/v12\..*/i)) {
    const originTextRender = Text.render;

    Text.render = function render(props, ref) {
      return originTextRender.apply(this, [
        {
          ...props,
          style: [{ fontFamily: '' }, props.style]
        },
        ref
      ]);
    };
  }
}

[inkCrazy]

if (Platform.OS === 'android' && NativeModules.PlatformConstants) {
  const fingerprint = NativeModules.PlatformConstants.Fingerprint;

  if (fingerprint?.match(/^(xiaomi|redmi|mi|mix|poco).*\/v12\..*/i)) {
    const originTextRender = Text.render;

    Text.render = function render(props, ref) {
      return originTextRender.apply(this, [
        {
          ...props,
          style: [{ fontFamily: '' }, props.style]
        },
        ref
      ]);
    };
  }
}

这个是写在app.js里面，全局设置字体？

[hussainahmad]

if (Platform.OS === 'android' && NativeModules.PlatformConstants) {
  const fingerprint = NativeModules.PlatformConstants.Fingerprint;

  if (fingerprint?.match(/^(xiaomi|redmi|mi|mix|poco).*\/v12\..*/i)) {
    const originTextRender = Text.render;

    Text.render = function render(props, ref) {
      return originTextRender.apply(this, [
        {
          ...props,
          style: [{ fontFamily: '' }, props.style]
        },
        ref
      ]);
    };
  }
}

@magicismight where this code be put?

[yorickshan]

fontFamily: 'System'

it works for me

[github-actions]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions]

This issue was closed because the author hasn't provided the requested feedback after 7 days.