Right aligning a single item in React Native

Question

In my React Native app, I have a card with a bunch of buttons at the bottom of it -- see image below.

I want to leave the first two icons where they are, on the left but move the (X) button all the way to the right. How do I accomplish this?

Here's what I have right now which is not working:

<Card style={styles.listItem}>
   <Card.Content>
      <Paragraph>{item.description}</Paragraph>
   </Card.Content>
   <Card.Actions>
      <Button><Icon name="checkcircleo" /> </Button> 
      <Button><Icon name="clockcircleo" /> </Button>
      <Button style={{ alignItems: 'stretch' }}><Icon name="closecircle" /> </Button>
   </Card.Actions>
</Card>

You could group the two buttons and use `justifyContent: 'space-between'` on your `Card.Actions` — schogges, May 16 '20 at 01:13

score 10 · Answer 1 · answered May 27 '21 at 00:18

10

To align the last button to the right, add { marginLeft: 'auto' } style to it.

To align all buttons to the right, add { justifyContent: 'flex-end' } style to Card.Actions.

answered May 27 '21 at 00:18

ondrej.par

191
3
10

This worked for me. – Eric Oct 14 '21 at 22:03
This should be accepted as best answer – 6rchid Nov 10 '21 at 23:14

score 0 · Answer 2 · answered May 16 '20 at 02:05

0

Try adding alignSelf: "flex-end" to the button style:

<Card style={styles.listItem}>
    <Card.Content>
        <Paragraph>{item.description}</Paragraph>
    </Card.Content>

    <Card.Actions>
        <Button>
            <Icon name="checkcircleo" />
        </Button> 

        <Button>
            <Icon name="clockcircleo" />
        </Button>

        <Button style={{ alignSelf: "flex-end" }}>
            <Icon name="closecircle" />
        </Button>
    </Card.Actions>
</Card>

answered May 16 '20 at 02:05

emeraldsanto

4,330
1
12
25

Didn't work but I'm wondering if that's because I use `react-native-paper`. – Sam May 16 '20 at 21:56
No, you may simply need to add `flex: 1` to `` – emeraldsanto May 16 '20 at 21:58
Didn't work. Icons are still sitting next to each other. `` and the third button is exactly like in your code above with `alignSelf: 'flex-end'` – Sam May 16 '20 at 22:04

score 0 · Answer 3 · answered May 16 '20 at 05:38

You can group the first two buttons by flex and flex direction:'row' and you can use the justifyContent:space-between on the group button and the cross button.

Here is an example of how it can be achieved. :

<Card.Actions>
<View style={{flexDirection:'row',justifyContent:'space-between'}} >
      <View style={{flexDirection:'row'}}>
        <Button>
            <Icon name="checkcircleo" />
        </Button> 

        <Button>
            <Icon name="clockcircleo" />
        </Button>
      </View>
<View>
        <Button style={{ alignSelf: "flex-end" }}>
            <Icon name="closecircle" />
        </Button>
</View>
</View>
    </Card.Actions>

Here is the example of the expo snack : expo-snack

Do check out.

Feel free for doubts

This didn't work for me. I wonder if it's because I'm using `react-native-paper` and my `Card` is actually imported from `react-native-paper` and not the standard one in `React Native`. — Sam, May 16 '20 at 21:56

Right aligning a single item in React Native

3 Answers3