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