dv3 dv3 - 1 year ago 284
CSS Question

React-native: textAlign: 'right' not styling correctly

I'm quite new to react-native css-styling.. and have the following code:

<Text style={styles.author, {textAlign: 'left'}}>
{question.view_count + ' views\t' + question.comment_count}{(question.comment_count>1 || question.comment_count==0) ? ' comments' : ' comment'}
<Text style={{textAlign: 'right'}}>
{(question.solution_count>0) ? question.solution_count + ' solutions' : ' Solve this' }

The problem is the second "textAlign: 'right' " isn't working - the text is still on the left. I want the text to be on the same line, but (obviously) the second text-object on the right.

Any hints? thanks!

output looks like this:

Answer Source

I can't confirm right now, but can you try this?

{textAlign: 'right', alignSelf: 'stretch'}

Let me know if it works.


Can I suggest a work-around?

<View style={{flex: 1; flexDirection: 'row'}}>
  <View style={{flex: 1}}>
    <Text>4 Views 0 Comments</Text>
  <View style={{flex: 1}}>
    <Text style={{textAlign: 'right'}}>Solve This</Text>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download