React Native: Notification text not showing up in android

Question

I have a notification badge with text like so:

<View style={styles.notificationBadge}>
  <Text style={styles.notificationText}>
    notification
  </Text>
</View>

When I test this in iOS it works fine and the text appears. But when I test it in Android, nothing appears. Like so:

Here is the style for notification badge and text:

  notificationBadge: {
    backgroundColor: '#23CCA3',
    borderRadius: 15,
    justifyContent: 'center',
    alignContent: 'center',
    padding: 0,
    marginBottom: 3,
    alignSelf: 'center',
    width: 24,
    height: 24
  },
  notificationText: {
    alignSelf: 'center',
    textAlign: 'center',
    fontSize: 12,
    fontWeight: 'bold',
    lineHeight: 0,
    color: '#fff',
    marginTop: 0
  }

Let me know if you have any ideas on how to fix this.

Answer 1

The text is not displayed due to zero lineHeight. Try this style:

notificationText: {
    alignSelf: 'center',
    textAlign: 'center',
    fontSize: 12,
    fontWeight: 'bold',
    color: '#fff',
    marginTop: 0
  }