Text is getting cut off in android for react native

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 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