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

2 Likes

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

1 Like

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

Which font did you change to ??

Bhavneet Singh ??

I found this article which I recommend all the developers to go through

“In general, your safest bets are just to use the system default which will usually be an easy-to-read sans-serif font that the user of any system should be familiar with; or to use your own custom font so you have precise control over what the user will see.”

I found the above statement on the website:- Fonts - Expo Documentation

I believe rather than changing the font style, it is better to add double spaces at the end of the word.
As this will give the users the best readable font style by default. (As we cannot use San Francisco, Sans-serif, Arial in our react-native projects because they are copyrighted and not open-sourced).

Best of Luck ! :slight_smile: