Full width button w/ flex-box in react-native

You can achieve this by setting a flex:1 property on the parent element of the TouchableHighlight, then assigning a flexDirection:row property to the TouchableHighlight element:

<View style={styles.inputsContainer}>
    <TouchableHighlight style={styles.fullWidthButton} onPress={this.buttonPressed}>
        <Text style={styles.fullWidthButtonText}>Submit</Text>
    </TouchableHighlight>
</View>

  inputsContainer: {
    flex: 1
  },
  fullWidthButton: {
    backgroundColor: 'blue',
    height:70,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  fullWidthButtonText: {
    fontSize:24,
    color: 'white'
  }

I've set up a full working example here. Also, the full code is below.

https://rnplay.org/apps/J6fnqg

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  TextInput,
} = React;

var MyModule = React.createClass({
  render: function() {
    return <View style={styles.container}>

      <View style={styles.headline}>
        <Text>Hello World</Text>
      </View>

      <View style={styles.inputsContainer}>

        <TextInput style={[styles.input]} placeholder="Email" />
        <TextInput secureTextEntry={true} style={[styles.input]} placeholder="Password" />
        <TouchableHighlight style={styles.fullWidthButton} onPress={this.buttonPressed}>
          <Text style={styles.fullWidthButtonText}>Submit</Text>
        </TouchableHighlight>

      </View>
    </View>
  },
  buttonPressed: function() {
    console.log('button was pressed!');
  }
});

var paddingLeft = 15;


var styles = StyleSheet.create({
  inputsContainer: {
    flex: 1
  },
  fullWidthButton: {
    backgroundColor: 'blue',
    height:70,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  fullWidthButtonText: {
    fontSize:24,
    color: 'white'
  },
  input: {
    paddingLeft: paddingLeft,
    height: 40,
    borderColor: 'black',
    backgroundColor: 'white',
  },
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
    alignItems: 'stretch',
  },
  headline: {
  }
});



AppRegistry.registerComponent('MyModule', () => MyModule);

I came here looking for the same question. Having experimented further, I've found the simplest way is to use alignSelf: 'stretch'. This forces the individual element to take up the full width available e.g.

 button: {
    alignSelf: 'stretch'
 }

Nader's answer does work of course, but this would seem to be the correct way using Flexbox.