title: alignment of flex box within row
body: <p>I am trying to produce a row of data like the below but I am having troubles getting my description under my title</p>
  
  <p><a href="https://i.stack.imgur.com/wPUJI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wPUJI.png" alt="enter image description here"></a></p>
  
  <p>the code I am using is </p>
  
  <p>View</p>
  
  <pre><code>&lt;View style={styles.row}&gt;
            &lt;Text numberOfLines={1} style={styles.namePart}&gt;{this.props.data.name}&lt;/Text&gt;
            &lt;Text numberOfLines={1} style={styles.description}&gt;{this.props.data.description}&lt;/Text&gt;
            &lt;Text numberOfLines={1} style={styles.pricePart}&gt;{this.props.data.price}&lt;/Text&gt;
          &lt;/View&gt;
  </code></pre>
  
  <p>styles</p>
  
  <pre><code>row:{
      height:rowheight,
      backgroundColor: Colors.white,
      flexDirection: 'row',
      padding: 16,
      borderRadius:0,
      borderWidth:0,
      borderBottomWidth:1,
      borderColor:Colors.border,
      margin:0,
      flexDirection: 'row',
    },
    namePart:{
      flexDirection: 'column',
      flex:4,
    },
    pricePart:{
      flex:1,
      alignItems:'center',
    },
    cartPart:{
      flex:1,
      alignItems:'center',
    },
  </code></pre>
  
  <p>this is currently rendering the below
  <a href="https://i.stack.imgur.com/4X6RQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4X6RQ.png" alt="enter image description here"></a></p>