Text Cut Off on OnePlus Device


#1

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


#2

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

#3

Awesome! This solved it!


#4

Hello, how your solved this ?

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


#5

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.


#6

Thank you so much,

I come back to you when the application is updated.


#7

Hello,

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

Cheers,