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

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?

Solution 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.

Solution 2:

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

Solution 3:

The provided solution didn't work for me. You have to wrap the Buttons in an additional View component:

<View style={{flexDirection: "row"}}>
    <View style = {{flex: 1}}>
        <Button title="Button 1" />
    </View>
    <View style = {{flex: 1}}>
       <Button title="Button 2" />
    </View>
</View>

Or use the Text component along with TouchableOpacity:

<View style={{ flexDirection: "row"}}>
    <TouchableOpacity style = {{width: "50%"}}>
        <Text style={{textAlign:"center"}} > Button 1 </Text>
    </TouchableOpacity>
    <TouchableOpacity style = {{width: "50%"}}>
        <Text style={{textAlign:"center"}} > Button 1 </Text>
    </TouchableOpacity>
</View>

Try out both solutions here: https://snack.expo.io/wAENhUQrp

• justifyContent: 'space-between' doesn't use all available space for the buttons
• button {alignSelf: 'stretch'} doesn't work on the Button component