[SOLVED] How to position 2 text components at the end of a view in RN?

How to position 2 text components at the end of a view in RN?

I want to achieve this result

But this is the current behaviour

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 ?

Solution

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>