Bibs Bibs - 2 months ago 46
React JSX Question

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?

Answer

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