title: Prevent image from overflowing when scaling it's size inside circular view
body: <p>I am trying to create a circular profile image with the following code. The challenge is that I need to scale up the image when it is inside a circular view. On IOS this works fine as the extra image is cut off by the containing view, but on Android it simply overflows.</p>
  
  <pre><code>import React, { Component } from 'react'
  import { View, Image } from 'react-native'
  
  class Example extends Component {
    render () {
      return (
        &lt;View
          style={{
            borderRadius: 150,
            borderWidth: 10,
            borderColor: 'red',
            width: 300,
            height: 300,
          }}
        &gt;
          &lt;Image
            style={{
              borderRadius: 150,
              width: 280,
              height: 280,
              transform: [{
                scale: 1.3,
              }],
            }}
            resizeMode='contain'
            source={{ uri: 'http://blog.ramboll.com/fehmarnbelt/wp-content/themes/ramboll2/images/profile-img.jpg' }}
          /&gt;
        &lt;/View&gt;
      )
    }
  }
  </code></pre>
  
  <p>How it looks with scale on Android:</p>
  
  <p><a href="https://i.stack.imgur.com/tuETB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tuETB.png" alt="enter image description here"></a></p>
  
  <p>How it looks like without scale: </p>
  
  <p><a href="https://i.stack.imgur.com/9F6aJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9F6aJ.png" alt="enter image description here"></a></p>
  
  <p>How I would like it to look with scale: </p>
  
  <p><a href="https://i.stack.imgur.com/XPO3R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XPO3R.png" alt="enter image description here"></a></p>