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

Question

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

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

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!

edit output looks like this:

question from:https://stackoverflow.com/questions/38917002/react-native-textalign-right-not-styling-correctly

Answer 1

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

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

Let me know if it works.

UPDATE

Can I suggest a work-around?

<View style={{flex: 1, flexDirection: 'row'}}>
  <View style={{flex: 1}}>
    <Text>4 Views 0 Comments</Text>
  </View>
  <View style={{flex: 1}}>
    <Text style={{textAlign: 'right'}}>Solve This</Text>
  </View>
</View>