Two buttons sharing a row in react-native

Question

I have two buttons that look like this

This is the code

render = () => (
    

        

Answer 1

You'd need to define a container with flexDirection set to row and use justifyContent depending on where you want your padding:

render() {
  return (
    <View style={styles.container}>
      <View style={styles.button} />
      <View style={styles.button} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  button: {
    backgroundColor: 'green',
    width: '40%',
    height: 40
  }
});

Change space-between to space-around if you want the padding to be distributed to the sides too. (Demo)