title: React-Native Image sizing in View with unknown size
body: <p>React-Naive suggests developers to state image dimension before runtime. I know this is a good practice. My question is... How about if I want to resize an <code>&lt;Image&gt;</code> to the same width as its contained <code>&lt;View&gt;</code> with unknown width? </p>
  
  <p>For example, I have an <code>&lt;Image&gt;</code> in a <code>&lt;View&gt;</code> with <code>rowDirection: 'row', flex: 0.8</code>. In different device I have different screen width. How do I know the actual width of 80% of the device? </p>
  
  <p>P.S. I have tried all <code>resizeMode</code> but no luck.</p>
  
  <p>Can anyone help me thanks!</p>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>I have tried this snippet</p>
  
  <pre><code>&lt;View style={{ flexDirection: 'row', flex: 1, backgroundColor: '#CCF' }}&gt;
      &lt;Image
          source={require('../resources/images/side-menu-header.png')}
          style={{ width: null, height: null, flex: 0.8 }} /&gt;
      &lt;View style={{ flex: 0.2 }} /&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/bsO5Y.jpg" rel="nofollow noreferrer">Result image of above code</a></p>
  
  <p>However, yes, this image is now set to 0.8 in width, but some its area has been cropped. This is not what I want to get. Therefore, I set its <code>resizeMode</code> to <code>contain</code> as below snippet</p>
  
  <pre><code>&lt;View style={{ flexDirection: 'row', flex: 1, backgroundColor: '#CCF' }}&gt;
      &lt;Image
          resizeMode='contain'
          source={require('../resources/images/side-menu-header.png')}
          style={{ width: null, height: null, flex: 0.8 }} /&gt;
      &lt;View style={{ flex: 0.2 }} /&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/WrIL4.jpg" rel="nofollow noreferrer">Result image of above code</a></p>
  
  <p>This is not what I expected too! As you see, the image is now become 0.8 in width and the whole image is shown, but the top and bottom space is occupied by its original dimension. (The Original image dimension is large)</p>
  
  <p>I think I can simplify this question in few words: How do I show a full width image in my app? I cannot set its width to 1080 since not all device has a width of 1080 pixel.</p>