title: Overflow hidden no having affect
body: <p>I have a simple progress bar, it has a borderRadius and overflow set to <code>hidden</code>. I have a child of this, it has no borderRadius, and it is overflowing outside of the corners. Here is my markup:</p>
  
  <pre><code>        &lt;View style={style.progressbar}&gt;
              &lt;View style={[style.progressbarfill, { width:'50%' }]} /&gt;
          &lt;/View&gt;
  
  
  
  const style = { 
      progressbar: {
          backgroundColor: '#ccc',
          height: 25,
          width: '90%',
          borderRadius: 12,
          overflow: 'hidden'
      },
      progressbarfill: {
          backgroundColor: 'springgreen',
          width: '10%',
          height: '100%'
      }
  }
  </code></pre>
  
  <p>This is what it looks like:</p>
  
  <p><img src="https://www.dropbox.com/s/lujpgmumv7jxri9/Screenshot%20-%20Mar%2029%2C%202017%201%3A20%20PM.png?dl=0&amp;raw=1" alt=""></p>
  
  <p>I put arrows on where the green is covering the border. The green should not overflow outside the edges.</p>
  
  <p>Does anyone know why this is?</p>