CODEWITHSUNDEEP
reactjsreact-nativeflexbox
Bibs
Bibs

Reputation: 1015

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?

Upvotes: 57

Views: 93167

Answers (6)

major697
major697

Reputation: 1862

You can use:

alignItems: 'center',
width: '100%',

example:

<View style={styles.container}>
   <Button style={styles.button} />
</View>

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    width: '100%',
  },
  button: {
    alignSelf: 'stretch',
  },
})

Upvotes: 0

Christian Orth
Christian Orth

Reputation: 4643

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

Upvotes: 14

Nader Dabit
Nader Dabit

Reputation: 53681

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

Upvotes: 31

sumit kumar pradhan
sumit kumar pradhan

Reputation: 653

Lets use the below source that helps to set width and height of button. Here you need to specify the button width and height parameter in view layout.

<View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
   <Button
      onPress={this.buttonClickListener}
      title="Button Three"
      color="#90A4AE"
    />
</View>

Upvotes: 2

Roman
Roman

Reputation: 21767

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>

Upvotes: 4

Findiglay
Findiglay

Reputation: 976

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.

Upvotes: 81

Related Questions