Search code examples
androidreactjsreact-nativetext

Text is getting cut off in android for react native

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

Solution

  • 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