React Native flex align components individually

Question

https://snack.expo.io/ryBiTXJSf

import React, { Component } from 'react';
import { View, StyleSheet, Button } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View>
        <View style={styles.container}>
          <Button title="left" style={styles.button} />
          <Button title="center" style={styles.button} />
          <View style={styles.button} />
        </View>
        <View style={styles.container2}>
          <View style={styles.buttonLeft}>
            <Button title="left" />
          </View>
          <View style={styles.buttonCenter}>
            <Button title="center" />
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
    paddingTop: 50,
    backgroundColor: '#ecf0f1',
  },
  container2: {
    flexDirection: 'row',
  },
  button: {
    // flex: 1,
  },
  buttonLeft: {
    alignItems: 'left',
  },
  buttonCenter: {
    alignItems: 'center',
  },
});

I have 2 buttons on the same line. I want one button to be aligned to the left, another to the center.

How can I accomplish this? (share your snack link if you manage to get it working pls)

The above code shows 2 (failed) attempts at it.

Answer 1

If you want a button on the left and one in the center, you need to create 3 boxes : left, center, right.

The right would be empty, the center would center elements, and the left would stay as "default".

I made a snippet to explain it just below, unfortunately I don't know React enough so I'll let you translate this into react to try.

.container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: #ecf0f1;
  }
  
.left {
    align-items: left;
}
  
.center {
    align-items: center;
    text-align: center;
}

.item {
  flex: 1 1 33%;
  width: 33%;
}

<div class="container">
  <div class="item left"><button>Left button</button></div>
  <div class="item center"><button>Center button</button></div>
  <div class="item right"></div>
</div>

EDIT I think this would be

return (
  <View>
    <View style={styles.container}>
      <View style={styles.left, styles.item}><Button title="left"/></View>
      <View style={styles.center, styles.item}><Button title="center"/></View>
      <View style={styles.right, styles.item}></View>
    </View>
  </View>
);

const styles = StyleSheet.create({
  container: {
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  left: {
    alignItems: 'left'
  },
  center: {
    alignItems: 'center',
    textAlign: 'center'
  },
  item {
    flex: '1 1 33%',
    width: '33%'
  }
});