title: control components placement with flexbox
body: <p>I have the following APP. I'm having trouble with the spacing of components within the return of the App class.  </p>
  
  <p>I would like to move the 'Reset' up a little bit and the 'Start' down a little.  It would be nice if there was an easy way to control the vertical placement</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { Button,StyleSheet, Text, View } from 'react-native';
  export class Timers extends React.Component{
    constructor(props){
      super(props)
      this.state={work:{min:this.props.min,
                        sec:this.props.sec,
                        buttton:this.props.button,
                        period:this.props.period,},
                  play:{min:this.props.min,
                        sec:this.props.sec,
                        buttton:this.props.button,
                        start:this.props.start,
                        period:this.props.period,}
                 }
    }
  
    render(){
      return(
        &lt;View style={styles.timer}&gt;
           &lt;Text&gt;{this.props.name}&lt;/Text&gt;
           &lt;Text&gt;{'min: ' + this.props.min + ' sec: ' + this.props.sec }&lt;/Text&gt;
  
  
           &lt;Text&gt;{this.props.period}&lt;/Text&gt;
  
        &lt;/View&gt;
      )
    }
  }
  export default class App extends React.Component {
    constructor(){
      super()
      this.state={start:'Start'}
    }
    parentState(){
         if(this.state.start === 'Start') startStop = 'Stop'
         else  startStop = 'Start'
      this.setState({start:startStop})
    }
    buttonPress(x){
      if(x === 'Start' || x === 'Stop')this.parentState()
      console.log(x)
    }
    render() {
      return (
        &lt;View style={styles.container}&gt;
           &lt;Button style={styles.top} title='Reset'onPress=
             {()=&gt;this.buttonPress(this.state.start)}/&gt;
                &lt;View style={styles.row}&gt;
                   &lt;Timers
                      name={'WORK'}
                      min={'25'}
                      sec={'00'}
                      button={'Reset'}
                      period={'tbd'} &gt;
                   &lt;/Timers&gt;
                   &lt;Timers
                      name={'PLAY'}
                      min={'25'}
                      sec={'00'}
                      period={'tbd'} &gt;
                   &lt;/Timers&gt;
                &lt;/View&gt;
  
           &lt;Button title={this.state.start} onPress=
             {()=&gt;this.buttonPress(this.state.start)}/&gt;
        &lt;/View&gt;
      );
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection:'column',
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    timer:{
      flex:1,
      flexDirection:'column',
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
  
    },
    row:{
      flex:0,
      flexDirection:'row',
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
  
    },
  });</code></pre>
  </div>
  </div>
  </p>