Text is getting cut off in android for react native

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


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


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.


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