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

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:

How to achieve this in react native using flex?

CodePudding user response：

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>

CodePudding user response：

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