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\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:

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>

Answer 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>

Answer 3

Give width 100% to your text tag so that you make sure it stretches it's full width, then give texalign right. This might work.

Answer 4

I found that because i was using a full width button (already alignSelf: 'stretch' ) it caused the text content to stretch vertically not horizontally... i found that using flex: 1 on the text element instead seemed to work as intended. Example:

finishButtonText: {
    textAlign: "center",
    flex: 1
} as StyleProp<TextStyle>

with .tsx / .jsx:

<Button style={{alignSelf: 'stretch'}}>
    <Text style={styles.finishButtonText}>
        Test
    </Text>
</Button>

Answer 5

style={{marginLeft:'auto' }} 

将适用于按钮、项目等。

Answer 6

Some times I use this

<View style={{flexDirection:'row-reverse'}}>
  <Text>This text is aligned right</Text>
</View>

Answer 7

I had an issue on Android where a string wrapped by two <Text> components was not respecting the textAlign property like so

<Text>
  <Text style={{textAlign: "center"}}> // on Android this wasn't working
    Solution
  </Text>
</Text>

I replaced the outer Text component with the fragment syntax and it started to work again:

<>
  <Text style={{textAlign: "center"}}>
    Solution that worked for me
  </Text>
</>

Answer 8

You just need to add justifyContent: 'space-between' in the outer and the textAlign: 'right' will work.

<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
   <Card.Title style={{fontSize: 16, textAlign: 'left'}}>Participating tasks</Card.Title>
   <Card.Title style={{fontSize: 12, textAlign: 'right'}}>View More</Card.Title>        
</View>

Answer 9

请尝试将以下样式添加到您的文本组件中。

<Text style={{ alignSelf: 'flex-start', textAlign: 'right' }}>Anoop</Text>

Answer 10

Try using:

textAlign: "justify"