Button Layout Issues in React Native
<p>I'm a total React-Native / mobile dev noob. I'm familiar with React but I'm coming mostly from an Angular background. Flexbox is totally new to me.  </p>

<p>I'm trying to display a few buttons on my home screen but I'm having a ton of trouble trying to format them properly.  They keep getting displayed at like the far far bottom of the screen, like to the point where you have to scroll on an iphone screen.  </p>

<p>I'd appreciate a little assistance centering these buttons in the middle and making both of them equally wide.</p>

<p>This is some of the code for the index.ios.js</p>

<pre><code>class testApp extends Component {
  render () {
    return (
    &lt;ViewContainer&gt;
      &lt;StatusBarBackground style={{backgroundColor: 'skyblue' }} /&gt;
      &lt;Text style={styles.welcome}&gt;
       Test App
      &lt;/Text&gt;
      &lt;InstructionButton content="Instructions" onPress={this._instructionButtonPress} /&gt;
      &lt;InstructionButton style={styles.ready} content="I'm Ready" onPress={this._readyButtonPress} /&gt;
    &lt;/ViewContainer&gt;
    )
  }
  _instructionButtonPress (event) {
    event.preventDefault()
    console.log('instructionButton pressed')
  }

  _readyButtonPress (event) {
    event.preventDefault()
    console.log('ready button pressed')
  }
}

const styles = React.StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  welcome: {
    flex: 1,
    fontSize: 20,
    textAlign: 'center',
    justifyContent: 'flex-start',
    margin: 10
  },
  ready: {
    backgroundColor: '#FF8C00',
    color: 'white',
    marginTop: 20
  }
})
</code></pre>

<p>Here is the code for the button component </p>

<pre><code>var Button = require('react-native-button')
import React, { Component, View } from 'react-native'
import { Icon } from 'react-native-vector-icons/FontAwesome'

class InstructionButton extends Component {
  render () {
    return (
    &lt;Button style={[styles.instructionButton, this.props.style || {}]} onPress={this.props.onPress}&gt;
      {this.props.content}
    &lt;/Button&gt;
    )
  }

  _handlePress (event) {
    event.preventDefault()
    console.log('pressed')
  }
}

const styles = React.StyleSheet.create({
  instructionButton: {
    flex: 1,
    color: '#1E90FF',
    fontSize: 20,
    borderColor: '#1E90FF',
    borderWidth: 1,
    borderStyle: 'solid'
  }
})

module.exports = InstructionButton
</code></pre>

<p>Any help would be much appreciated. Thanks!</p>

<p>PS I keep getting warning message that says - </p>

<p>"ReactNative.createElement is deprecated. Use React.createElement from the "react" package instead."</p>

<p>But i think this is due to the react-native-button module I am using.</p>

<p>Update Below--</p>

<pre><code>const styles = React.StyleSheet.create({
  viewContainer: {
   flex: 1,
   flexDirection: 'column',
   justifyContent: 'flex-start',
   alignItems: 'stretch',
   height: 200
  }
})

and the updated styling for the instruction and ready button

welcome: {
 flexDirection: 'row',
 alignItems: 'center',
 fontSize: 20,
 textAlign: 'center',
 justifyContent: 'flex-start',
 margin: 10
},
ready: {
 flexDirection: 'row',
 alignItems: 'center',
 width: 200,
 justifyContent: 'center',
 backgroundColor: '#FF8C00',
 color: 'white',
 marginTop: 20
}
</code></pre>

<p>I was able to get both buttons to move to the top, it's just a matter of aligning them in the middle of the viewContainer.  </p>