0

I want to achieve this result

enter image description here

But this is the current behaviour

enter image description here

As you can notice both Text components aren't aligned correctly.

This is the code

<View style={{ flexDirection: 'row', marginRight: 7, borderWidth: 2 }}>
     <Text style={{ color: '#0022FF', fontWeight: 'bold', fontSize: 20, alignSelf: 'flex-end', marginRight: 5 }}>2.6</Text>
     <Text style={{ color: '#0022FF', fontSize: 9, alignSelf: 'flex-end' }}>Bar</Text>
</View>

Can you guys help me with this ?

Amine
  • 2,241
  • 2
  • 19
  • 41

1 Answers1

1

I think it should work if you wrap both texts inside another <Text> component like so:

<View style={{ flexDirection: 'row', marginRight: 7, borderWidth: 2 }}>
  <Text>
     <Text style={{ color: '#0022FF', fontWeight: 'bold', fontSize: 20, alignSelf: 'flex-end', marginRight: 5 }}>2.6</Text>
     <Text style={{ color: '#0022FF', fontSize: 9, alignSelf: 'flex-end' }}>Bar</Text>
  </Text>
</View>
Ian Vasco
  • 1,280
  • 13
  • 17
  • It works fine, but the space between the Text components is't working anymore (marginRight: 5 is ignored).Do you have any idea? – Amine Feb 18 '20 at 13:56
  • try to use `paddingRight` instead – Ian Vasco Feb 18 '20 at 14:03
  • I tried but nothing happened, I used some extra space for now like this {" "} or maybe I'm going to nest an other empty `View` between `Text` components. Thank you for the great answer – Amine Feb 18 '20 at 14:05