Oppo A77 - Some texts gets cut-off

[mykelaballe]

Environment

1. react-native -v: 0.34 through 0.59
2. node -v:4.4.7
3. npm -v: 4.5.0
4. yarn --version:

• Target Platform: Android
• Development Operating System: Windows
• Build tools: The issue is specific to Oppo A77 model. Note that upgrading to latest react-native version is not an option now due to breaking changes and time constraints

Steps to Reproduce

There's no necessary steps to produce these bug. You just have to run the app either in dev or production

Expected Behavior

Texts should not be cut-off

Actual Behavior

Some texts are cut-off as shown below. These cut-off issue doesnt occur in iphone and other phone models except Oppo A77

Screenshots:

Those screenshots are just few of the texts that are cut-off

Sorry i can't provide a link to the project

[johnwook]

@mykelaballe cc @hramos We've had similar issue(some texts getting cut off in Oppo device). Although it's not a complete solution, we found some hacky-way to solve this problem.

in short, (at least in our case) just adding empty space at the end of the text seems work. my colleague @saystone will explain in detail :)

for example, use 1.5.3+space instead of 1.5.3(space at the end of the string)

[asdacap]

As a side note, I also have this issue. It seems to appear on multiple Oppo devices. Probably something to do with fonts.

[jemmyphan]

@johnwook
in short, (at least in our case) just adding empty space at the end of the text seems work. my colleague @saystone will explain in detail :)

do you still use this workaround?

[johnwook]

@jemmyphan Hello! Unfortunately yes :( . As our OPPO user grows, our team think we should SOLVE this problem right. For now there is no progress. If some arises, I'll let you know by commenting here. If you find some better solution please let me know :)

[jemmyphan]

@johnwook yeah, oppo user's grow so fast, anyway didn't expect it to be replied this fast. thanks and appreciate it a lot. ;)

[yeswanth]

I have faced similar issues in OnePlus 5. These issues only happen in a OnePlus 5 phone when you have chosen "OnePlus Slate" font in Settings. If you change the font to Roboto, the issues don't occur. I'm gonna ship Roboto font along with my app in the next version to go around this.

[asdacap]

@yeswanth Can you share how to ship the Roboto font along the app? Will all Text component automatically use the font or we'll have to make a wrapper Text component?

[yeswanth]

Hi @asdacap You can download roboto font and add it to your project(As shown in this link). Unfortunately, you will have to create a wrapper for all Text in order for this to work.

[hkxicor]

this solution works for me, you can try this

import React from 'react';
import {
StyleSheet, Text, } from 'react-native';`

const styles = StyleSheet.create({
defaultFontFamily: {
fontFamily: 'lucida grande',
}
});

const oldRender = Text.prototype.render;
Text.prototype.render = function (...args) {
const origin = oldRender.call(this, ...args);
return React.cloneElement(origin, {
style: [origin.props.style, styles.defaultFontFamily]
});
};

[gedeagas]

@hkxicor trying your suggestion. will edit after the result

[asdacap]

I can say that it worked in my case.

[jslok]

@hkxicor do I need to place that code on every one of my js files with affected text or will it solve the issue for my entire app if I only put it in my main app.js? I'd test it myself but I do not personally have an oppo phone to reproduce on. Thank you

[hkxicor]

@jslok just put it on app.js it will work.

[jslok]

I tried the code but it appears to break react-native-vector-icons. All icons get replaced by X.

[hkxicor]

@jslok please update hare if you find any solution

[justjavac]

@hkxicor

 import React from 'react';
 
 import { StyleSheet, Text } from 'react-native';
 
 const styles = StyleSheet.create({
   defaultFontFamily: {
     fontFamily: 'lucida grande',
   },
 });
 
 export default function fixOppoTextCutOff() {
   const oldRender = Text.prototype.render;
   Text.prototype.render = function render(...args) {
     const origin = oldRender.call(this, ...args);
     return React.cloneElement(origin, {
-      style: [origin.props.style, styles.defaultFontFamily],
+      style: [styles.defaultFontFamily, origin.props.style],
     });
   };
 }

[jslok]

Can anybody else confirm if justjavac's solution above still fixes the issue of text getting cutoff? I don't have an oppo device to test, but I can say it does not cause react-native-vector-icons to break.

Also I have found OnePlus (not sure if some or all) devices also have this same issue.

[jslok]

Confirmed working

[justjavac]

@jslok

Perhaps because OnePlus does not have the Lucida Grande font installed by default, you can manually install the Lucida Grande font in your react-native project.

My solution above is to solve "All icons get replaced by X". If there is still a text cutoff problem, check your fonts.

[jslok]

@justjavac
I meant the original issue of text getting cutoff exists on Oneplus devices just like Oppo devices. Your edit solves it on both, and also does not break react-native-vector-icons. Thank you and also thanks to @hkxicor

[ghost]

Setting the following seems to fix the issue:

<Text style={{fontFamily: ""}}>

[mohammadavood]

I have similar issue in LG G3 and react-native v0.53.0
it looks like is a bug in react native that react support team doesn't like accept and fix it.
i solved it temporary by deleting ((alignItems: 'center')) from the component style

[ou2s]

@hramos This issue should be open... (like many others)

Anyway, thanks for the workaround guys.

[justjavac]

5 years have passed, and this issue still hasn't been resolved. Recently, I developed a new app using React Native, and surprisingly, I still employed the same solution as before #15114 (comment). 😂

[fabOnReact]

Hello,

Thanks for the issue. I have been contributing to facebook/react-native for 4 years and specialize in the Text/TextInput components. I currently have 58 facebook/react-native PRs:

https://github.com/facebook/react-native/pulls?q=is%3Apr+author%3Afabriziobertoglio1987+

It is the suggested approach from the react-native core team (see this discussion).

I'm publishing several fixes for Text and TextInput component in a separate library react-native-improved.

• The Component is based on ReactTextView, it is the same implementation from react-native.
• It will include several bug fixes.
• You can use the library until the PR is merged and released with react-native.
• You can use side by side both components from react-native and react-native-improved, depending on where you need the fix.
• I will also publish the PR to facebook/react-native (daily fixes and releases).

The advantages would be:

• Increased engagement with the community, issues are quickly fixed.
• No limitations when merging PRs (react-native main branch is used on facebook marketplace).
• Only Meta employees can merge and review facebook/react-native PRs.
• Allows us to further experiment and develop react-native.

What do you think about this? Should I keep working on this? Thanks

[fabOnReact]

I believe this issue is fixed with #41770

[NaOMi-HaNaKi]

I believe this issue is fixed with #41770

Hello，thank you for the solution.
But when I use 'npm install react-native-improved',The console tells me it cannot install and reported an error
Looking forward to your recovery

React-Native version 0.70
npm 6
node 18.12.1

Looking forward to your recovery

[NaOMi-HaNaKi]

Hello,

Thanks for the issue. I have been contributing to facebook/react-native for 4 years and specialize in the Text/TextInput components. I currently have 58 facebook/react-native PRs:

https://github.com/facebook/react-native/pulls?q=is%3Apr+author%3Afabriziobertoglio1987+

It is the suggested approach from the react-native core team (see this discussion).

I'm publishing several fixes for Text and TextInput component in a separate library react-native-improved.

• The Component is based on ReactTextView, it is the same implementation from react-native.
• It will include several bug fixes.
• You can use the library until the PR is merged and released with react-native.
• You can use side by side both components from react-native and react-native-improved, depending on where you need the fix.
• I will also publish the PR to facebook/react-native (daily fixes and releases).

The advantages would be:

• Increased engagement with the community, issues are quickly fixed.
• No limitations when merging PRs (react-native main branch is used on facebook marketplace).
• Only Meta employees can merge and review facebook/react-native PRs.
• Allows us to further experiment and develop react-native.

What do you think about this? Should I keep working on this? Thanks

I found the problem because of "packageManager": "[email protected]" in the dependency package. Is the yarn version necessary? thanks

[fabOnReact]

@NaOMi-HaNaKi sorry. I only support rn 0.73 for now, in the future I may support more versions (feature request #18). I tested with npm on rn 0.73 (screenshot) and there are no issues.

I believe it is the same issue with #39722 (PR #41770 may fix both).

The root issue was that the Text width was calculated wrong with StaticLayout from the ReactTextShadowNode measure function. The issue reproduces when the text width is higher of it's parent and needs to be cut with an ellipsis. StaticLayout uses line break strategy to decide where to cut the text. It works well with more than one line, but with one line may remove an entire word and the text width is not the full width of the parent.

Using BoringLayout in that case fixed the issue. Your text is boring, does not include gifs, so it should fix this issue too.

I'll update the issue in 1 week with more info, Thanks a lot.

[NaOMi-HaNaKi]

@NaOMi-HaNaKi sorry. I only support rn 0.73 for now, in the future I may support more versions (feature request #18). I tested with npm on rn 0.73 (screenshot) and there are no issues.

I believe it is the same issue with #39722 (PR #41770 may fix both).

The root issue was that the Text width was calculated wrong with StaticLayout from the ReactTextShadowNode measure function. The issue reproduces when the text width is higher of it's parent and needs to be cut with an ellipsis. StaticLayout uses line break strategy to decide where to cut the text. It works well with more than one line, but with one line may remove an entire word and the text width is not the full width of the parent.

Using BoringLayout in that case fixed the issue. Your text is boring, does not include gifs, so it should fix this issue too.

I'll update the issue in 1 week with more info, Thanks a lot.

Thank you so much!

[fabOnReact]

@NaOMi-HaNaKi Can you reproduce it in react-native 0.73? I tested similar issue with custom font OnePlus Slate, but it does not reproduce (see my comment #25481 (comment)). Thanks

[NaOMi-HaNaKi]

@NaOMi-HaNaKi Can you reproduce it in react-native 0.73? I tested similar issue with custom font OnePlus Slate, but it does not reproduce (see my comment #25481 (comment)). Thanks

Regarding the rn version, the project specified 0.70, and I could not actively change it to 0.73. It is very strange that the problem I encountered did not cause problems when it was displayed locally, but after it was distributed to the user and opened, the display was incomplete.

In addition, I don’t have a OnePlus device. I encountered a similar problem when using another device, Redmi K30 - Xiaomi's default font. When I adjusted the device font to Big Mac Bold, the content was not fully displayed.And I have tried testing the same font on other Xiaomi phones and the problem did not occur.I started to wonder if the problem was related to rn…

[NaOMi-HaNaKi]

A similar situation also appeared in RedMi K30 MIUI13 setting MiSans font, Big Mac thick. All numbers involved will be truncated at the end.

[ClaudiaSkyeB]

Any progress on whether there will be a bugfix for this?

[sayo96]

This issue still occurs on one plus 5 as on 27 June 2024. The workaround for me was setting font-family:"" which did not seem like the ideal solution

[JPStrydom]

This seems to happen whenever the text is a multiple of 5 characters (5, 10, 15, etc.). Our solution to this, which feels very dirty, is:

const fixedText = useMemo(
  () => (text && !(text?.length % 5) ? ` ${text} ` : text),
  [text]
);

Really strange that this issue has been around for so long.

[arlovip]

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);

[johnsimeroth]

Hi, I'm just another voice calling into the abyss for help. We have the same issue on both pixel and galaxy devices. Hopefully #41770 fixes this and gets merged soon... 🤞

[umrashrf]

Dang, a MeetRyde.com customer just reported that on Samsung S22 Ultra some texts are truncated. That's odd because I tested the app on Galaxy S9+ which is also Android and it works perfectly fine.

[majih93]

@umrashrf That is probably due to the new default font Samsung applied on its devices after OneUI 6 (The new font name is One UI Sans). Galaxy S9+ doesnt have OneUI 6 so you would not have seen this issue on your device.

[umrashrf]

@majih93 that's what I guessed reading the internet and someone suggested to hardcode the font with font-family property which I did and will test soon at Samsung Experience Center :)

[AspireOne]

Most of the previous solutions alone did not work for me, but after combining them, this worked for me in latest expo 50, React Native 0.73.6. Tested it on the new Samsung font that seems to be causing trouble.

1. Patching the global Text component using react-fast-hoc to add properties:

   • style: [{ fontFamily: "Roboto" }, props.style],
   • textBreakStrategy: "simple"
   • numberOfLines: 0

2. Overriding the Text.render function to:

   • add a Roboto font

patch-text-component.ts

import * as RN from "react-native";
import { createTransformProps } from "react-fast-hoc";

export default () => {
  if (RN.Platform.OS !== "android") {
    return;
  }

  const styles = RN.StyleSheet.create({
    font: { fontFamily: "Roboto" },
  });

  const transform = createTransformProps(
    (props) => ({
      textBreakStrategy: "simple",
      numberOfLines: 0,
      ...props,
      style: [styles.font, props.style],
    }),
    {
      namePrefix: "Reset.",
      mimicToNewComponent: false,
    },
  );

  Object.assign(RN.Text, transform(RN.Text));
};

patch-text-render.ts

import { Platform, Text, StyleSheet } from "react-native";
import React from "react";

export default () => {
  if (Platform.OS !== "android") {
    return;
  }

  // @ts-expect-error
  const oldRender = Text.render ?? Text.prototype?.render;
  const style = StyleSheet.create({ font: { fontFamily: "Roboto" } });
  if (!oldRender) {
    console.error(
      "Text.render or Text.prototype.render is not defined, cannot patch font.",
    );
    return;
  }

  if (Text.prototype?.render) {
    Text.prototype.render = function (...args: any[]) {
      const origin = oldRender.call(this, ...args);
      return React.cloneElement(origin, {
        style: [style.font, origin.props.style],
      });
    };
    // @ts-expect-error
  } else if (Text.render) {
    // @ts-expect-error
    Text.render = function (...args: any[]) {
      const origin = oldRender.call(this, ...args);
      return React.cloneElement(origin, {
        style: [style.font, origin.props.style],
      });
    };
  } else {
    console.error(
      "Text.render or Text.prototype.render is not defined, cannot patch font.",
    );
  }
};

Usage:
src/app/_layout.tsx

// ...
try {
  patchTextComponent();
  patchTextRender();
} catch (e) {
  console.error("Failed to patch text component", e);
  // You might want to log it to sentry or somewhere.
}
// ...

[mieradi]

Seeing this issue on a Pixel 8 device as well. Has there been any progress?