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

Question

I'm new to flexbox and am unable to produce a full width button in react-native. I've been trying to figure this out myself for over a day and have read every related article / post on the internet to no avail.

I would like to have two TextInput elements that span the entire width of the screen, with a button below them that also spans the full width of the screen. The TextInput elements are spanning the full width of the screen, but this appears to be by default in the Android simulator I'm running.

Here's my code:

 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>Submit</Text>                 </TouchableHighlight>             </View>         </View>     ); }, buttonPressed: function() {     console.log("button was pressed!"); } });  var paddingLeft = 15;  var styles = StyleSheet.create({ inputsContainer: {     // Intentionally blank because I've tried everything & I'm clueless }, fullWidthButton: {     // Intentionally blank because I've tried everything & I'm clueless }, input: {     paddingLeft: paddingLeft,     height: 40,     borderColor: "black",     backgroundColor: "white" }, container: {     flex: 1,     backgroundColor: "#f0f0f0",     alignItems: "stretch" }, headline: {} });  module.exports = Onboarding; 

Anyone know what I need to do to get the TouchableHighlight to span the full width of the screen?

Answer 1

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.