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

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.

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);

Now there is a predefined component Button. Even if you use text, you need to pay attention to the View width:

<View style={[{width:"100%"}]}>    <Button        onPress={this.closeModal}        title="Close"        color="#841584"        style={[{borderRadius: 5,}]}        hardwareAccelerated    /></View>