title: Overlay button on top of Image in React Native
body: <p>I'm trying to achieve the following effect in React Native:</p>
  
  <p><a href="https://i.stack.imgur.com/qEHIn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qEHIn.png" alt="image with an icon in the corner"></a></p>
  
  <p>The image has a button in the corner. The button is always within the corner of the image regardless of the image's size or aspect ratio, and no part of the image is clipped (it is always scaled down to fit fully within a box).</p>
  
  <p>The trouble I'm having in React Native is that the Image component's size doesn't always match the scaled-down size of the image. If I fix the image's height to 300, set flex 1 to make the image's width expand to fill its contents, and the image is a portrait, the Image component with being the full width of the container, but the image within the component will have a width of much less. Therefore, the typical approach for having a view overlay another view doesn't work as I would like it to- my overlay also covers the padding around the image, and the button (anchored to the corner) appears outside of the image.</p>
  
  <p>Here's what it looks like in React Native:</p>
  
  <p><a href="https://i.stack.imgur.com/qVMkx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qVMkx.png" alt="portrait image with button overlay in React Native"></a></p>
  
  <p>The X is a placeholder for the button. It is set to anchor to the top-left of a View that's a child of the same View that the Image is a child of. The backgroundColor of the image is set to green to demonstrate how the width of the Image component is different from the width of the picture that's inside the component.</p>
  
  <p>The goal is that the X would be inside of the image regardless of its aspect ratio. I think I could do something based on grabbing the image's dimension and scaling the height and width of the Image component, but that sounds complicated and fragile. Is this possible in a responsive way with styling?</p>
  
  <p>Demonstration code:</p>
  
  <pre class="lang-js prettyprint-override"><code>   &lt;View
        style={{
          marginLeft: 7,
          marginRight: 7,
          backgroundColor: 'blue',
        }}
      &gt;
        &lt;View
          style={{
            height: 300,
            flex: 1,
          }}
        &gt;
          &lt;Image
            source={imageSource}
            style={{
              flex: 1,
              height: undefined,
              width: undefined,
              backgroundColor: 'green',
            }}
            resizeMode="contain"
          /&gt;
        &lt;/View&gt;
        &lt;View
          style={{
            position: 'absolute',
            right: 5,
            top: 5,
            backgroundColor: 'transparent',
          }}
        &gt;
          &lt;Text style={{ color: 'white' }}&gt;X&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/View&gt;
  </code></pre>