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

Answer 1

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:

    
        Submit
    


  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 

      
        Hello World
      

      

        
        
        
          Submit
        

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