Problem with vertical align hebrew text (rtl mode) in react native app

Viewed 159

when we use firstName and lastName without a space - everything is fine image

but if you add a space to one of the words, the other word rises up image

code JSX:

<View style={styles.nameContainer}>
   <Text style={styles.firstname} numberOfLines={1}>{firstName}</Text>
   <Text style={styles.lastname} numberOfLines={1}>{lastName}</Text>
</View>

Styles:

nameContainer: {
  flexDirection: 'row',
  maxWidth: 176,
  overflow: 'hidden'
},
firstname: {
  fontSize: 16,
  color: Colors.light.text,
  fontWeight: 'bold',
  marginEnd: 4
},
lastname: {
  fontSize: 16,
  color: Colors.light.text,
  fontWeight: 'bold',
  paddingRight: isRTL ? 0 : 24,
  marginRight: isRTL ? 0 : 8,
  marginBottom: 4,
},

can someone tell me why this is happening?

1 Answers
Related