23

I am working on React native and I am new to this. I am trying to display text, But, It's showing in an android end of the text ... and not showing complete text. It's only happening in android, working fine in iOS.

I have written following code

<Text
  numberOfLines={1}
  adjustsFontSizeToFit
  minimumFontScale={0.1}
  style={labelStyle} //labelStyle nothing I have written
></Text>

Can anyone suggest me, where I am doing wrong in the code?

enter image description here

1
  • please share some more code like parent view or etc. Commented Feb 19, 2019 at 3:32

15 Answers 15

40

This usually happens when you have this: fontWeight:bold and your android device is for example a Oneplus or Oppo (there are some other brands tho), it's a conflict with your system font.
To fix, you can add some other fontFamily or put 2 blank spaces in front of the word seems to work too.
See: https://github.com/facebook/react-native/issues/15114

Edit

Setting textBreakStrategy to simple on the Text element also seems to work for some devices like Samsung galaxy s10, Google Pixel

3
  • this is really interesting. it's only been happening on my one plus and bugging me for days now. thanks for the pointer!
    – jschuss
    Commented Jul 26, 2019 at 6:14
  • This solved the problem for OnePlus and Samsung devices. Thanks.
    – Gowtham
    Commented Sep 24, 2020 at 15:12
  • Clever. Why I coundn't think about the blank text? Commented Oct 14, 2020 at 5:00
7

I'd had problem of text cut horizontally. by using lineHeight to text components, and boom, my problem solved

1
  • Thank you! I totally forgot about lineHeight :)
    – Kevin Aung
    Commented Oct 4, 2023 at 16:04
7

For anyone who found provided solutions not working like in my case here's my solution to text being cut on OnePlus phones:

just set component style with these properties

alignSelf: 'stretch',
textAlign: 'center',

this is probably an equivalent to android match_parent setting. Did not test how it will affect iOS though as I don't have that possibility right now.

0
4

After struggling with it for a long time, I finally figured it out.

Seems like for default, the Text sets the property textBreakStrategy to * highQuality*.

Changing it to * simple* solved my problem.

Link here: https://reactnative.dev/docs/0.56/text#textbreakstrategy

3

In my case adding fontFamily: 'arial' to the text component did the trick. Even fontFamily: 'abc' also works. I think it just requires fontFamily to be set.

3

Adding a flex: x style to the <View> surrounding the <Text> element being cut worked for me, when using a OnePlus 7T.

1
  • flex:1 worked for me. Thanks
    – Kshitij
    Commented Nov 30, 2021 at 7:05
1

Adding extra space or adding textBreakStrategy as "simple" did not work for me.

I added alignSelf:"stretch" for the Text component style and it worked for me finally. If you want to text to be in the center just add textAlign: "center" as well.

Hopefully this helps someone.

1

I simply added padding and the issue resolved

if text cut off from the left side just add paddingLeft:10

in my case text was cut-off from top-side, when I was increasing the font size, so I added paddingTop:20

if text cut off from top add textAlignVertical: 'bottom'

0

If you remove numberOfLines it will display correctly. If it still doesn't show up, it could be that the parent view has a fixed height (or maxHeight)

0

As it turns out, the last line of our paragraphs were getting cut off due to 'highQuality' value of textBreakStrategy parameter. We changed this to 'simple' and now all of our text displays. Apparently highQuality is actually low quality.

0

You can fix it by adding extra space at the end which is not a good workaround.

Recommended: Include default font-family in your application and it works same for all devices

0

There are other better ways to fix this issue. but in my case adding custom font fixed the Text-cut issue and font alignment in different devices.

Adding Custom Font can easily solve the problem.

How to add custom fonts = checkout this StackOverflow answer

react-native official docs on custom fonts

0

I also had problems with it not working completely on android devices. The problem was that I've set a height style property. It works well when I deleted it and moved some style properties to a wrapper.

0

In my case, I use letterSpacing: -0.4. Using letterSpacing can cause this issue, so just remove letterSpacing or set it to 0 if it overrides.

-1

try this.

  1. remove fontWight : bold
  2. add style in Text tag like this = width:'100%' (according to your text size)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.