title: flexDirection: "row" not working react-native
body: <p>I am developing a react-native application. One of the app screens contains a  list of albums. I have divided each album container into components which are Card and CardSection. </p>
  
  <p>A Card can contain many CardSections. The CardSection will contain an image and 2 Text titles. The problem I am facing is with the positioning of the content in the CardSection as <code>flexDirection:'row'</code> is not working.</p>
  
  <p>Here is the CardSection.js</p>
  
  <pre><code>import React from 'react';
  import {View, Text, Image} from 'react-native';
  
  import Card from './Card';
  import CardSection from "./CardSection";
  const AlbumDetail = ({album}) =&gt; {
  
  // destructing the props
  const {title, artist, thumbnail_image} = album;
  return (
      &lt;Card&gt;
          &lt;CardSection&gt;
  
              &lt;View style={styles.thumbnailContainerStyle}&gt;
                  &lt;Image style={styles.thumbnailStyle} source={{uri: thumbnail_image}} /&gt;
              &lt;/View&gt;
  
              &lt;View style={styles.headerContentStyle} &gt;
                  &lt;Text style={styles.headerTextStyle}&gt;{title}&lt;/Text&gt;
                  &lt;Text&gt;{artist}&lt;/Text&gt;
              &lt;/View&gt;
  
          &lt;/CardSection&gt;
      &lt;/Card&gt;
  );
  };
  
  const styles = {
    headerContentStyle: {
       flexDirection: 'column',
       justifyContent: 'space-around'
  },
  headerTextStyle:{
      fontSize:18
  },
  thumbnailStyle: {
      height: 50,
      width: 50
  },
  thumbnailContainerStyle: {
      justifyContent: 'center',
      alignItems: 'center',
      margin: 10,
      marginRight: 10
  }
  };
  
  export default AlbumDetail;
  </code></pre>
  
  <p>Here is the CardSection.js</p>
  
  <pre><code>import React from 'react';
  
  import {View} from 'react-native';
  
  
  const CardSection = (props) =&gt; {
  return (
      &lt;View styles={styles.containerStyle}&gt;
          {props.children}
      &lt;/View&gt;
  );
  
  };
  
  const styles = {
   containerStyle: {
      borderBottomWidth: 1,
      padding: 5,
      backgroundColor: '#fff',
      justifyContent: 'flex-start',
      flexDirection: "row",
      borderColor: '#ddd',
      position: 'relative'
  }
  };
  export default CardSection;
  </code></pre>
  
  <p>The resultant should that the Image placed towards the left and on the right side of the image there will be 2 Text titles and their flexDirection will be <code>column</code></p>
  
  <p><a href="https://i.stack.imgur.com/NguvQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NguvQ.png" alt="ExpectedResult"></a>
  <a href="https://i.stack.imgur.com/dMCle.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dMCle.png" alt="Issue"></a></p>