title: React Native - Can't place icon on top of image
body: <p>I'm trying to place an icon over an image, but all it's doing is pushing the image down the page.</p>
  
  <p>Here's what it currently looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/mv7zt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mv7zt.png" alt="enter image description here"></a></p>
  
  <p>I'm trying to place the blue back arrow on top of that image as you can see. </p>
  
  <p>Here's what my markup looks like:</p>
  
  <pre><code>&lt;ScrollView style={ styles.container }&gt;
    &lt;View style={ styles.coverImageContainer }&gt;
      &lt;Image
        style={ styles.coverImage }
        source={ require('./img.jpg') }
      &gt;
        &lt;View&gt;
          &lt;Ionicons name="ios-arrow-back" color="#4F8EF7" size={25} /&gt;
        &lt;/View&gt;
      &lt;/Image&gt;
    &lt;/View&gt;
    ...
  </code></pre>
  
  <p>And here are my styles:</p>
  
  <pre><code>container: {
    backgroundColor: '#f9f9f9',
    flex: 1,
  },
  
  coverImageContainer: {
    backgroundColor: '#000',
  },
  
  coverImage: {
    width: null,
    height: 170,
    resizeMode: 'cover',
    opacity: 0.7,
    flex: 1,
  },
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p>If I get rid of the icon, the image displays how I want it to, but I would like the back button icon on top of it too. Here's what it looks like without the icon:</p>
  
  <p><a href="https://i.stack.imgur.com/rWFYO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rWFYO.png" alt="enter image description here"></a></p>