title: React Native: Show image in full screen in nested components
body: <p>I have component hierarchy as</p>
  
  <pre><code>&lt;Component1&gt;
    &lt;Component2&gt;
      &lt;Component3&gt;
        &lt;Image
         ....
        &gt;
      &lt;/Component3&gt;
    &lt;/Component2&gt;
  &lt;Component1&gt;
  </code></pre>
  
  <p>Component1 and Component2 have some height. </p>
  
  <p>Now how do  I show the image, nested in 3 components each with some height, in full screen irrespective of the height of its parent components?</p>
  
  <p>If I give image as flex:1, It will just adjust itself in Component3's flexbox whereas I want to show the image in full screen.</p>
  
  <p>Currently my Image style is:</p>
  
  <pre><code>image: {
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
      },
  </code></pre>
  
  <p>and resize mode is set to 'cover'</p>
  
  <p>Its container (Component3) style:</p>
  
  <pre><code>container: {
          alignItems: 'center',
          justifyContent: 'center',
      },
  </code></pre>