react-nativereact-native-stylesheet

React Native: last word/character of Text component disappears on Android (not on IOS)


I have a simple Text component with a style in my App. If I add fontweight: 'bold', the last character (sometimes a whole word) disappears.

two sample text components:

<Text style={styles.price}>{priceDisplay(deal.price)}</Text>
<Text style={styles.cause}>{deal.cause.name}</Text>

the styling for these two:

  cause: {
    fontSize: 14,
    fontWeight: 'bold',
  },
  price: {
    fontSize: 16,
    textAlign: 'center',
    fontWeight: 'bold',
  },

without fontweight
with fontweight \

Thanks in advance.

EDIT: The Problem comes from my OnePlus Smartphone which has the OnePlus-Slate font as standard. That font causes the problem. If I change the font in my code to something like 'Roboto', the fontweight bold works.


Solution

  • Here are instructions to change the default font for the project: https://ospfolio.com/two-way-to-change-default-font-family-in-react-native/#why-do-myapp-sometimes-get-texts-cut-off-on-some-android-phone Alternatively you can just change the font in your phone.