Question 33677 in React native Question posted in
The official React Native documentation can be found here.

How to align the first item left, and the second right in a row in react native?

I put two items (e.g. two buttons) in one row. I want to align the first item left, and align the second item right, which looks like:

enter image description here

How to achieve this in react native using flex?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After some digging, I found there're two easy ways to achieve this:

    // first way
<View style={{flexDirection: "row", justifyContent: "space-between"}}>
<Button>B1</Button> // align left
<Button>B2</Button> // align right
</View>

// second way
<View style={{flexDirection: "row"}}>
<Button>B1</Button> // align left
<Button style={{marginLeft: "auto"}}>B2</Button> // align right
</View>

  2. 0

    to do this, use space-between. If the container has a width larger than the 2 buttons, you’ll see one on the left, one on the right

    doc

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search