Stack two buttons like in a horizontal UIStackView in React Native

Question

I have a login form with two text inputs stacked vertically and a container view with two buttons below the inputs:

I want the two buttons to stretch to fill the width of the button container (red), so each button would take half its size. However I can't get it to work. I've tried various combinations of flex* properties with no luck.

In native iOS I would use a UIStackView for this with orientation = horizontal. React Native documentation says that pretty much any layout can be achieved with flexbox.

This is what my component looks like right now:

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

export default class Login extends Component {
  render() {
    return (
      <KeyboardAvoidingView style={styles.container}>
        <TextInput
          placeholder="LOGIN"
          placeholderTextColor="#505050"
          style={styles.input}/>
        <TextInput
          placeholder="PASSWORD"
          placeholderTextColor="#505050"
          style={styles.input}/>
        <View style={styles.buttonContainer}>
          <Button 
            onPress={() => this.logIn()}
            style={[styles.button, styles.loginButton]}>
            Log in
          </Button>
          <Button
            onPress={() => this.register()}
            style={[styles.button, styles.registerButton]}>
            Register
          </Button>
        </View>
      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 16,
    backgroundColor: 'lightgray'
  },
  input: {
    height: 40,
    marginBottom: 12,
    paddingHorizontal: 8,
    backgroundColor: 'white'
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red'
  },
  button: {
    padding: 8,
    color: 'white',
    backgroundColor: 'steelblue'
  },
  loginButton: {
    marginRight: 8
  }
});

If I add flex: 1 to the button style they become:

What am I doing wrong?

Answer 1

Yes. Its because of the react-native-button component. You have to use the containerStyle property of the Button component to style the container.

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

export default class Login extends Component {
  render() {
    return (
      <KeyboardAvoidingView style={styles.container}>
        <TextInput
          placeholder="LOGIN"
          placeholderTextColor="#505050"
          style={styles.input}/>
        <TextInput
          placeholder="PASSWORD"
          placeholderTextColor="#505050"
          style={styles.input}/>
        <View style={styles.buttonContainer}>
          <Button
            onPress={() => this.logIn()}
            style={styles.buttonText}
            containerStyle={styles.button}
            >
            Log in
          </Button>
          <Button
            onPress={() => this.register()}
            style={styles.buttonText}
            containerStyle={styles.button}
            >
            Register
          </Button>
        </View>
      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 16,
    backgroundColor: 'lightgray'
  },
  input: {
    height: 40,
    marginBottom: 12,
    paddingHorizontal: 8,
    backgroundColor: 'white'
  },
  buttonContainer: {
    height: 60,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red'
  },
  button: {
    flex: 2,
    padding: 8,
    backgroundColor: 'steelblue',
    alignSelf: 'stretch',
    justifyContent: 'center',
  },
  buttonText: {
    color: 'white',
  }
});