React-native: 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)

[zlllya]

Need to set a fixed width for Text

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

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

[justjavac]

@wenkangzhou Not crash, it will fall back to using the default font

[wenkangzhou]

@justjavac ,good,thx.

[rpavlovs]

Same issue on iPhone X (iOS obviously) with 0.55.4, but it seems to show up only after I browse in the app for a bit.

I also found a stale issue with reproducible demo: https://github.com/facebook/react-native/issues/17960

[hramos]

@rpavlos does it repro on 0.56?

[craigdanj]

We had the same problem with a one plus 3. Changing the font to Roboto fixed this.

as @yeswanth had suggested.

[byCedric]

I can confirm that this happens on React Native 0.55.x with various custom fonts on Android. I haven't tried using the latest 0.56.x, will try it when I can use it in Expo! For us the problem caused the React Navigation's header title being cut off with an ellipsis. If you have the same problem, you can simply set width: '100%' to this header title as a temporary workaround.

[Fitzpasd]

We can repro this on Android with RN 0.55.4, without using a custom font. None of the suggested 'fixes'/workarounds in this thread work

[hramos]

Please let us know if this can be reproduced in 0.56. If you've only tested on earlier releases, no need to +1.

[Fitzpasd]

Yes, it repos on 0.56.

[Eyosias5]

Its been a year and this issue is still here on the Oneplus 6 too.

[craigdanj]

So this goes away if you remove the one plus font called slate. Switch to
roboto and you should see this go away.

[Eyosias5]

Yeah that worked. But wouldn't that mean I have to tell everyone who has
got a OnePlus to turn off the Slate font when they use my app? Isn't there
a way to force the device to change the font as you load the app?

On Sat, Aug 4, 2018, 18:02 Craig Johnson [e-mail] wrote:

So this goes away if you remove the one plus font called slate. Switch to
robot and you should see this go away.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/15114#issuecomment-410455506,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AefC-MytKO7RFy4NciuWoO7ME4KxSlm8ks5uNbeMgaJpZM4OdgNs
.

[craigdanj]

I'm not an expert but can't you just set the font for your app to some
other font like roboto? That would override the system font.

[Eyosias5]

Yep that works great. Thanks :)

On Sat, Aug 4, 2018, 19:53 Craig Johnson [e-mail] wrote:

I'm not an expert but can't you just set the font for your app to some
other font like roboto? That would override the system font.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/15114#issuecomment-410462554,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AefC-A5o502Qe13h5vz5q297wJu49D7xks5uNdGEgaJpZM4OdgNs
.

[hramos]

So, what can we do to fix this in the framework itself? Is React Native making a false assumption about the system font, and can we address this via a PR? Or is this something any developer might run into when targeting these devices even without RN?

[justjavac]

In an APP that is not developed using RN, this problem does not exist. I wrote a simple demo using Flutter and there is no such problem. Maybe this is a RN's problem.

[ou2s]

My 2 cents hypothesis even if I don't have an affected model in my hands:

• Since it has to do with layout measurement, maybe we should have a look at the layout engine behind RN, Yoga and open an issue there.
• I suspect that Yoga is doing all its measurement with the default system font and that the customized version of Android on these models replaces the system font with another one, making the layout calculation for the label size wrong.

[SamMatthewsIsACommonName]

Hi guys, has there been an accepted universal solution for this, even a workaround? We cant simulalte either device so hoping one has been verified to work and we can send that out live and hope for the best. Im just asking because some later commenters have said some of these fixes still don't work for them.

[rpavlovs]

The cut-off line seems to slowly move further throughout the app use.
See the recording: https://streamable.com/59hx4

[vitorreis]

it seems to be related to #21729

[gagangoku]

Latest React Native does not have Text.prototype.render, use Text.render instead !

See https://stackoverflow.com/questions/35255645/how-to-set-default-font-family-in-react-native/47350760#47350760

[gagangoku]

Question: Is lucida grande font available on all android devices ? What happens if it's not ?

[gauravds]

export default function enableFontPatch() {
    const React = require('react');
    const { Platform, Text } = require('react-native');

    const defaultFontFamily = {
        ...Platform.select({
            android: { fontFamily: 'Roboto' }
        })
    };

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

When you want to use this solution use as:

import enableFontPatch from './enableFontPatch';
enableFontPatch();

Alternative: if you want denied the external calling you can use this as

const React = require('react');
const { Platform, Text } = require('react-native');

const defaultFontFamily = {
    ...Platform.select({
        android: { fontFamily: 'Roboto' }
    })
};

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

When you want to use this solution use as:

import './enableFontPatch';

[SamMatthewsIsACommonName]

Hi @gauravds thanks for the solution. I'm slightly confused by the use. Is this something we import as a replacement component for the Text element or do we simply import this file once in our app to cause a global change to all Text elements?
Thanks

[gauravds]

@SamMatthewsIsACommonName Simply import this file once in your app to cause a global change to all Text elements. One shot for all. 😄

[SamMatthewsIsACommonName]

Awesome thanks!

[LuisUrrutia]

Same issue with 0.59.0

[rammmukul]

For people using expo as we do, this worked for us

import { setCustomTextInput, setCustomText } from "react-native-global-props";

import { Font } from "expo";

export default function () {
  Font.loadAsync({
    HelveticaNeue: require("../Assets/fonts/HelveticaNeue.ttf"),
    "HelveticaNeue Bold": require("../Assets/fonts/HelveticaNeue-Bold.ttf")
  }).then(() => {
    const customTextInputProps = {
      underlineColorAndroid: "rgba(0,0,0,0)"
    };

    const customTextProps = {
      style: {
        fontSize: 14,
        fontFamily: "HelveticaNeue"
      }
    };
    setCustomText(customTextProps);
    setCustomTextInput(customTextInputProps);
  });
} 

[nbstr]

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

Unhandled JS Exception: Cannot read property 'render' of undefined

[snios]

No news on when this will be fixed? Almost 2 years old now....

[hramos]

@snios we'd be happy to take a look at a pull request that fixes this. Let me know if you're interested.

[snios]

@hramos thought there would be att least some one working on the development of this framework from Facebooks side.

And sorry but i just started using it so i probably wont figure it out in a few years.

[gaodeng]

And sorry but i just started using it so i probably wont figure it out in a few years.

even you send the PR,It will take years to be merged.

[hramos]

@gaodeng we've closed 1,057 pull requests in the last six months, with 730 getting merged into the repository. As I said, we'd be happy to see a PR.

[Jyrno42]

I might look into this over the weekend (unless someone beats me to the punch).

[MartinCura]

@Jyrno42 I'm not familiar with the RN code but i looked at it for a couple of minutes (i have a OP5T with system font set to OnePlus Slate). (Disclaimer: i'm using RN 0.56 as it's what i have at hand.) The following may help you (or whoever):

• It is reproducible with a Text component with fontWeight set to whatever
• The cut-off seems to be follow the same rules that it would for wrapping a line, but without noticing it has done that
• Cut-off text isn't visible but space for it is still there, so there's some mixed logic: it wraps but still leaves horizontal space as if it hadn't

A bunch of examples and their result:

    <View>
      <Button title="I have enough space so nothing's cut-off" style={{ borderRadius: 10 }} />
      <View style={{ position: 'absolute', top: 60, left: 30 }}>
        <Button title="This text will get cut-off!" style={{ position: 'absolute', borderRadius: 10 }} />
      </View>
      <View style={{ top: 80 }}>
        <Text style={{ backgroundColor: 'red', alignSelf: 'center' }}>First second third</Text>
        <Text style={{ backgroundColor: 'red', alignSelf: 'center', fontWeight: '500' }}>
          First second third
        </Text>
        <Text style={{ alignSelf: 'center', fontWeight: '500' }}>0123456789</Text>
        <Text style={{ alignSelf: 'center', fontWeight: '500' }}>01234567890j</Text>
        <Text style={{ backgroundColor: 'red', alignSelf: 'center', fontWeight: '500' }}>
          The following would get cut off longwordfortesting!
        </Text>
        <Text style={{ backgroundColor: 'green', alignSelf: 'center', fontWeight: '500', height: 70 }}>
          The following would get cut off longwordfortesting!
        </Text>
        <Text style={{ backgroundColor: 'red', alignSelf: 'center', fontWeight: '500', height: 70 }}>
          The following would get cut off longerwordmakesmorepace
        </Text>
        <Text style={{ backgroundColor: 'green', alignSelf: 'center' }}>
          The following would get cut off longerwordmakesmorepace
        </Text>
        <Text style={{ alignSelf: 'center' }}>
          Normal behaviour is for text to get wrapped when too long for a single line
        </Text>
      </View>
    </View>

tl;dr: it seems to me that the font weight (and maybe other things) isn't taken into account to determine correct size for the text box. If i can be of any help just tell me.

[vnd-ranga]

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

Not working in htc 3t

[akhilsanker]

Hi @hramos

Any permanent solution for this bug. Its been almost 2 years since this task is been opened.

Thanks

[hramos]

@akhilsanker see my earlier comment.

[akhilsanker]

@hramos ,

I wonder, since Instagram is build upon react-native, how this issue been solved in that. 🤔

Thanks

[BuriedInTheGround]

@akhilsanker,

As far as I know Instagram is only partially built upon react-native, and suffers this issue, for example in post's "insights".

[Jyrno42]

Anyone know of an avd image that can reproduce this?

[sauravexodus]

Anyone know of an avd image that can reproduce this?

I think you can use Font Installer app on Android and then use OnePlus Slate font to reproduce the same. I haven't tried it myself.

[Jyrno42]

Wasn't able to repro on the emulator even when I manually replaced all the font files under /system/fonts with the files found here. The replaced font is rendered but the issue does not occur (see image below). I also made sure to match the screen dimensions of OP5T but that did not make any difference.

Can also confirm this is not happening on OnePlus One (A0001) which uses Cynagenmod (so the default font is Roboto).

E.g. I am still looking for a way to repro this either on an emulator, or by finding a person willing to lend me a valid Oneplus device. I do not think I can figure out a way to deal with this blindly.

[MartinCura]

Wasn't able to repro on the emulator even when I manually replaced all the font files under /system/fonts with the files found here. The replaced font is rendered but the issue does not occur (see image below). I also made sure to match the screen dimensions of OP5T but that did not make any difference.

Can also confirm this is not happening on OnePlus One (A0001) which uses Cynagenmod (so the default font is Roboto).

E.g. I am still looking for a way to repro this either on an emulator, or by finding a person willing to lend me a valid Oneplus device. I do not think I can figure out a way to deal with this blindly.

Thanks for trying! I guess it doesn't repro on an emulator.
I'd try to fix it but i don't have much experience on this. In my case i just switched the font on my OP5T.

[simondobson]

I also ran into this bug, I think that it is because the HTC phone I was using had the font set to "OnePlus Slate". If you switch the phone font (settings > display > font) to Roboto then the bug doesn't appear. A way around this was to override the fontFamily to be Roboto across the react-native project

[hammadzz]

You now have to remove proptype from the examples above in later versions of react-native. Here is what works for me in react-native 0.57.8

Enjoy :)

// utils.js
// One Plus Fix for Oxygen OS and its painful Slate font truncating on bold text
// https://github.com/facebook/react-native/issues/15114
export const opoFontFix = () => {
  if(Platform.OS !== 'android') {
    return
  }

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

// App.js
import {opoFontFix} from './utils'

// One Plus Fix for Oxygen OS
opoFontFix()

//... rest of your code
export default class App extends Component<Props> {
}

[hammadzz]

Environment： react-native ：0.59.9
In my project, we used the offline bundle, and i add the command "--reset-cache" in the react-native bundle command ，we fixed it。

Tested a beta release on 0.59.10 on One Plus device and it did not work.

[Jyrno42]

Found this - https://docs.kobiton.com/devices-list/ looking into their free trial over the weekend. :)

[urtheone]

You now have to remove proptype from the examples above in later versions of react-native. Here is what works for me in react-native 0.57.8

Enjoy :)

// utils.js
// One Plus Fix for Oxygen OS and its painful Slate font truncating on bold text
// https://github.com/facebook/react-native/issues/15114
export const opoFontFix = () => {
  if(Platform.OS !== 'android') {
    return
  }

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

// App.js
import {opoFontFix} from './utils'

// One Plus Fix for Oxygen OS
opoFontFix()

//... rest of your code
export default class App extends Component<Props> {
}

do you know why is "robot", can anything else replace it ?
can replace 'robot' with '' ? @ hammadzz

[Jyrno42]

No luck with the remote devices (tried all Oneplus variants from kobiton.com and testin.net).

[hammadzz]

@urtheone sure pick whatever font you want to be defaulted in your app if none is specified. Roboto was picked as it has been Android's default system font. Not sure how true that is today.

[urtheone]

@urtheone sure pick whatever font you want to be defaulted in your app if none is specified. Roboto was picked as it has been Android's default system font. Not sure how true that is today.

well, thanks.

[rsp8055]

I got this issue in OnePlus 7. After some workaround got to the following solution:

imp: this issue only got for the text which was having { fontWeight: 'bold' } property

initially, my Text component was:

fontSize: 20,
fontWeight: 'bold'
}}>
SOMETHING

After got issue tried solution for all Text component which was having a bold property I download and add (Roboto_Bold) font because by default there is different font in OnePlus 7(OnePlus Slate font) :

fontSize: 20,
fontFamily: 'Roboto_Bold',
}}>
SOMETHING

Hope this will help.

[dulmandakh]

This is known issue, and its duplicate of https://github.com/facebook/react-native/issues/25481. Workaround is to set fontFamily.

[treyp]

@dulmandakh -- this issue has been around much longer and has much more history. Shouldn't the newer one be closed? Also, setting fontFamily isn't a workaround but actually produces the bug. Avoiding font weights is one workaround, but not a very useful one.

[gaodeng]

@dulmandakh please reopen this issue.

[dulmandakh]

I think it doesn't matter how we track the issue, but I find https://github.com/facebook/react-native/issues/25481 has clear technical information about the issue.

[gaodeng]

@dulmandakh
This issue is subscribed by many people. This problem has not been solved. You simply closed it, which will cause the previously subscribed users unable to track the latest status of this issue.

[sapjax]

@dulmandakh
This issue is subscribed by many people. This problem has not been solved. You simply closed it, which will cause the previously subscribed users unable to track the latest status of this issue.

They just can't face the fact that they haven't solved this problem for years 🤣.

[zhenbushidashen]

I tried add the property 'lineHeight' and it works perfectly on my Oneplus phone

[MayoudP]

I tried add the property 'lineHeight' and it works perfectly on my Oneplus phone

You mean, adding lineHeight={1} for example just fixed it ?

[johnxie]

Is this happening on all Oneplus phones? Deciding which devices from Oneplus to purchase to test this bug for Taskade.

[HemantRMali]

Adding Space at end of text works for me.

Example: {empIDText + " "}

before it was like: {empIDText}

In my case it was OnePlus Device

[RichardPK]

Guys while adding a space at the end of text may 'solve' the issue - this is a totally inappropriate solution for any centred text, which will now be offset.

[punjasin]

@RichardPK you need to change the default font off the app maybe add font family will fix the problem the problem is came from the font of the phone itself

[cmacdonnacha]

@RichardPK wouldn't forcing the font family of the app to something like "Roboto" be a permanent / good solution?

[RichardPK]

@cmacdonnacha yep - @hkxicor 's comment on 5 Nov 2017 https://github.com/facebook/react-native/issues/15114#issuecomment-341988546 was the fix we successfully implemented to fix this in our app.

[cmacdonnacha]

@RichardPK thanks. Does that solution change the text globally or will have to do this in each component I use <Text> ?

[luoyushouchai]

You now have to remove proptype from the examples above in later versions of react-native. Here is what works for me in react-native 0.57.8

Enjoy :)

// utils.js
// One Plus Fix for Oxygen OS and its painful Slate font truncating on bold text
// https://github.com/facebook/react-native/issues/15114
export const opoFontFix = () => {
  if(Platform.OS !== 'android') {
    return
  }

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

// App.js
import {opoFontFix} from './utils'

// One Plus Fix for Oxygen OS
opoFontFix()

//... rest of your code
export default class App extends Component<Props> {
}

Not work in react native 0.59.9.

[iamadityaaz]

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

@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],
     });
   };
 }

I was getting render error
Fixed it by removing proptype from the code.

[Romaiin52]

I have faced similar issues with several devices (Samsung galaxy s10, Google Pixel..).
The solutions above don't work for me, I fixed it by setting textBreakStrategy to simple on the Text element.
Hope it can help!

[lorenc-tomasz]

The same issue here with OnePlus 5.

[The0racle]

I have faced similar issues with several devices (Samsung galaxy s10, Google Pixel..).
The solutions above don't work for me, I fixed it by setting textBreakStrategy to simple on the Text element.
Hope it can help!

Tried many suggestions, even forked react native as suggested here, but nothing worked. Setting textBreakStrategy to simple did the trick. Thank you!!

[YesSkyscrapers]

I have faced similar issues with several devices (Samsung galaxy s10, Google Pixel..).
The solutions above don't work for me, I fixed it by setting textBreakStrategy to simple on the Text element.
Hope it can help!

THANKS, MAN, GREAT SOLUTION

[abhisekpadhi]

Here is one way I created a custom component that standardises fontFamily.

Library function:

// Custom Text component to standardise font-family
export function StandardText(props: {children: ReactNode}) {
    return <Text style={fontStyles.text}>{props.children}</Text>;
}

const fontStyles = StyleSheet.create({
    text: {
        ...Platform.select({
            android: {fontFamily: 'Roboto'},
        }),
    },
});

Implementation:

<StandardText>
          <Text style={styles.nameText}>{this.props.id}</Text>
</StandardText>

This solves text cut off issue with OnePlus devices. it should also solve for the devices with non standard fonts.

[mohit23x]

i was facing same issue on one plus device, i resolved by creating a custom text component.

<View>
<Text style={{width:'100%'}}>text here</Text>
</View>

Using only text with 100% width works, but you may face text alignment issues

[NE-SmallTown]

For me, you can set numberOfLines={0} to fix this, I notice that this will make react-native(Android) use Interger.MAXVALUE as the maxLine(height) for Text since 4 years ago though I don't know why this could fix the bug