CODEWITHSUNDEEP
react-nativereact-native-iosreact-native-component
Amine
Amine

Reputation: 2434

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

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 ?

Upvotes: 0

Views: 680

Answers (1)

Ian Vasco
Ian Vasco

Reputation: 1340

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>

Upvotes: 1

Related Questions