title: Automatically size image components in React Native
body: <p>I want to set the width of an <code>Image</code> component to be 100% of my container's width and the height to be set according to the result width value and image's aspect ratio.</p>
  
  <p>My container has some padding, which means that <code>Dimensions.get('window').width</code> is not useful to me since it does not gives me the value that results from image's width being set to 100%. Other scenarios also can't afford the Dimensions API as a acceptable solution.</p>
  
  <p>Here's an code example:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;View
    style={{
      flex: 1,
      paddingHorizontal: 20,
    }}&gt;
    &lt;Image
      style={{
        flex: 1, // Not what I want =&gt; just so I can see the image
        width: '100%',
        // height: 'auto', // The behavior that I want
        backgroundColor: 'red',
      }}
      resizeMode={'contain'}
      source={{
        uri: 'https://via.placeholder.com/200x400/000000',
      }}
    /&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p>Result:</p>
  
  <p><a href="https://i.stack.imgur.com/EUqKZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EUqKZ.jpg" alt="app"></a></p>
  
  <p>The red background serves just to visualize that the <code>Image</code> component.</p>
  
  <p>Using <code>onLayout</code> prop I can get the runtime value of the resulting width, and with the aid of the Image API i could calculate the desired height. The problem with that is that React Native will first render a 0 height component and just after that <code>onLayout</code> seems to be resolved, and that makes sense.</p>
  
  <p>So?</p>
  
  <ul>
  <li>Is there a way to get before hand the width value of a image component such as this (declared using relative width)?</li>
  <li>Is automatically setting image height even possible in React Native? If so, how?</li>
  </ul>
  
  <p>Notes:
  - In the image <a href="https://facebook.github.io/react-native/docs/images.html#why-not-automatically-size-everything" rel="nofollow noreferrer">docs</a> of React Native there is an explanation of why they chose not to size image components automatically by default.
  - At least in this case, Parent <code>onLayout</code> is resolved after its children.</p>