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?