title: React Native Image front of other view
body: <p>I want to write stylesheet to display a loyout like this image:</p>
  <p>avatar:</p>
  <p><img src="https://i.stack.imgur.com/VWpSt.png" alt="avatar" /></p>
  <p>And I write code like this:</p>
  <pre><code>&lt;View style={styles.header}&gt;&lt;/View&gt;
  &lt;View style={styles.meInfor}&gt;
      &lt;Image style={styles.avatar}
        source={require('../../images/cristiano-ronaldo.jpg')} /&gt;
  &lt;/View&gt;
  </code></pre>
  <p>and style:</p>
  <pre><code>header:{
          width: width,
          height: 100,
          backgroundColor: '#1270BA',
      },
      meInfor:{
          width: width,
          backgroundColor: '#FFFFFF',
          alignItems: 'center',
          justifyContent: 'center',
      },
      avatar: {
          marginTop: -50,
          width: 100,
          height: 100,
          borderRadius: 100,
      }
  </code></pre>
  <p>I use <code>marginTop: - 50</code> to pull the avatar to top, but the result like this:</p>
  <p>bad result:</p>
  <p><img src="https://i.stack.imgur.com/QsSII.png" alt="bad result" /></p>
  <p>How can i do to style this avatar like the first image?</p>