React-native: textAlign: 'right' not styling correctly
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\t" + 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:
Solution 1:
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>
Solution 2:
you can use below code snippet for aligning your text on right side of view:
<View style={{justifyContent: 'space-between'}}>
<Text style={{alignSelf: 'flex-end'}}> Hello </Text>
</View>