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

[hramos]

Thanks for opening the issue! It does not appear like a community member will be able to reliably reproduce this issue. This may be for several reasons; perhaps it affects a particular app but a minimal repro has not been provided, or the issue may be sporadic. As it happens, we need a concrete set of steps that can demonstrably reproduce the issue as this will allow your fellow community members to validate a fix. We'll close the issue for now, but feel free to submit a new issue once you're able to reliably reproduce the issue locally. Thanks for your understanding!

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

[mykelaballe]

thank God people took notice of this issue already. quite sometime. thanks guys

[parth3724]

@hkxicor your solution is working... but I don't understand the fix.. Fonts in my app are still Roboto and not lucida grande. I have not set fontfamily to Text component ...

[ItsWendell]

Subscribed, we're facing similar issues with texts on OnePlus devices!

[ramosalx1504]

For me the best solution is to specify the "fontFamily" for the global <Text> component in my application, so, no matter what typography the user has on their device, the application will be displayed as I designed it.

** If not specified, it seems that the <Text> component uses the device's default, and here come the problems (One plus 5T slate default font for example).

[hramos]

It seems like this affects Oppo and OnePlus devices. Has someone looked into what in particular about this class of devices causes this? Is it the lack of the Roboto system font?

[wenkangzhou]

If some devices not install 'lucida grande',it can be work or crash?