title: React Native: Why is image stretching vertically to fill container and how to prevent it?
body: <p>In my React Native app, I have a red box of height 300 that I want to center vertically, and an image that I want to sit inside and at the top of this red box. Here is my code so far:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Image} from 'react-native';
  
  export default class Login extends Component {
    render() {
      return (
        &lt;View style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center"
          }}&gt;
            &lt;View
              style={{
                borderWidth: 3,
                borderColor: 'red',
                width: "100%",
                height: 300
              }}
            &gt;
              &lt;Image
                source={require('../../images/swoord-top.png')}
                style={{
                  width: "100%",
                  height: "100%",
                  resizeMode: "contain",
                  borderWidth: 3
                }}
                &gt;
              &lt;/Image&gt;
            &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>Here's what this looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/tUF5D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tUF5D.png" alt="enter image description here"></a></p>
  
  <p>The red box is the outer box I mentioned, and the black box is just the border of the <code>Image</code>. The problem is that this black box (ie the <code>Image</code>) expands to fill the red box vertically, and the image is vertically centered inside this black box, so it's vertically centered inside the red box, as opposed to at the <code>flex-start</code> position that I want it at. I've tried adding <code>justifyContent: flex-start</code> and <code>flexShrink: 1</code> to the <code>Image</code> and neither has made a difference.</p>
  
  <p>Does anyone know how I can approach this?</p>
  
  <p><strong>NOTE:</strong></p>
  
  <p>If I remove the <code>height: 100%</code> on the <code>Image</code>, I get this:</p>
  
  <p><a href="https://i.stack.imgur.com/oRjsu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oRjsu.png" alt="enter image description here"></a></p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>To clarify, this is what I'd like it to look like. I've removed the black border here. I moved it up to where I want it by adding <code>top: -95</code>, but this won't work in general because the value would be different for different devices:</p>
  
  <p><a href="https://i.stack.imgur.com/XdqEL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XdqEL.png" alt="enter image description here"></a></p>