Text Cut Off on OnePlus Device

Expo SDK
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. Screenshot_20171121-091817

2 Likes
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
2 Likes
3

Awesome! This solved it!

1 Like
4

Hello, how your solved this ?

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

capture
capture400×640 77.6 KB

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.

3 Likes
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,

8

Font changing Worked

1 Like
9

Checkout React Native Text is cutting off | Drawer menu title cut issue | Image not visible issue
Have tested these solutions and it works for me in one plus device

10

Which font did you change to ??

Bhavneet Singh ??

11

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: