Text Cut Off on OnePlus Device

Hello,

I am not sure if its a React Native issue or an Expo issue. But I noticed that all the button labels on my onePlus 3t device is cut off.

I can only see first 3 letters and then a -. Cancel becomes Can-

Here is the screenshot of the expo app itself. https://cl.ly/14241B3b3135

1 Like

This is a React Native thing, check out this issue: https://github.com/facebook/react-native/issues/15114


TL;DR:

Possible fixes:

  • Add a space " " at the end of the text
  • Give the Text a set width
  • There is a proposed component at the bottom of the issue
2 Likes

Awesome! This solved it!

1 Like

Hello, how your solved this ?

Because i have the same problem only on OnePlus, but the fixes not working :

capture

Hey! The problem is with OnePlus Slate Font.
You can either

  1. Change the App font to something else
  2. Add a double space after text instead of single space. Use template literals of react. {’ '}

Let me know if that works.

3 Likes

Thank you so much,

I come back to you when the application is updated.

Hello,

Sorry for the delayed response, width dobles space after text and literals of react, that’s working good.
Thanks again,

Cheers,

Font changing Worked

Checkout https://abodeofmystories.blogspot.com/2020/09/react-native-text-cut-issue.html
Have tested these solutions and it works for me in one plus device