title: How set auto height for view in react native
body: <p>I have an react native app that fetch data from an api
  in this api there are news each of it contain subject, picture and details
  I have problem in set the height of each item to auto height
  I tried to set the height of container to 100 then the subject and details are just overlapping above each other so I set it to 300 and it's okay for the items that have long text but the problem with the items that have short text so the space between these items become too large
  so how can I set the height auto so I each item will have height regarding to it's content</p>
  
  <p>so this is the class of each item:</p>
  
  <pre><code>import React, { Component } from "react"
  import { View, Image, Text, StyleSheet } from "react-native"
  
  export default class Item extends Component {
      render() {
          let { item } = this.props;
          const { subject, picture, details } = item;
          return (
              &lt;View style={styles.container}&gt;
                  &lt;Image style={styles.picture} resizeMode="cover" source={{ uri: picture }} /&gt;
                  {console.log(image)}
  
                  &lt;View style={styles.content}&gt;
                      &lt;Text style={styles.subject}&gt;{subject}&lt;/Text&gt;
                      &lt;Text style={styles.details}&gt;{details}&lt;/Text&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          height: 300,
          flexDirection: "row",
          flex: 1,
          padding: 10
      },
      content: {
          flexDirection: "column",
          flex: 1
      },
      picture: {
          height: 70,
          width: 100
      },
      subject: {
          marginLeft: 20,
          fontSize: 16,
          fontWeight: 'bold'
      },
      details: {
          marginLeft: 20,
          fontSize: 16,
      }
  })
  </code></pre>