title: auto height image in react native
body: <p>please help;
  I tried to set height auto by react-native-auto-height component, but what I've got is so different from what I expected to get.</p>
  
  <p>this is FeedCard.js:</p>
  
  <pre><code>const PicsCardContent = styled(Touchable).attrs({
  feedback: 'opacity'
  })`
   width: ${9*width/28};
   borderWidth: 1;
   borderColor: ${props =&gt; props.theme.WHITE};
   backgroundColor: ${props =&gt; props.theme.WHITE};
   marginBottom: 10;
   borderRadius: 4;
  `
  
  function FeedCard({ user }) {
    return(
      &lt;Root&gt;
        &lt;PicsCardContent&gt;
          &lt;AutoHeightImage  width={9*width/28} imageURL={ user.image }/&gt;
        &lt;/PicsCardContent&gt;
      &lt;/Root&gt;
    );
  }
  </code></pre>
  
  <p>and this is HomeScreen.js:</p>
  
  <pre><code>class HomeScreen extends Component {
  
  _renderItem = ({ item }) =&gt; &lt;FeedCard {...item} /&gt;
  
  return (
    &lt;Root&gt;
      &lt;FlatList
        contentContainerStyle={{ alignSelf: 'stretch'}}
        data={data.getPosts}
        keyExtractor={item =&gt; item._id}
        renderItem={this._renderItem}
        numColumns={3}
      /&gt;
    &lt;/Root&gt;
   );
  }
  }
  </code></pre>
  
  <p>I attached the screenshot below; 
  thanks for helps.<a href="https://i.stack.imgur.com/vyiXi.png" rel="nofollow noreferrer">enter image description here</a></p>