react-native: borderRadius does not frame component right
<p>The <code>borderRadius</code> style attribute doesn't change the border of a component correctly.</p>

<p>I would expect to see a green circle on the red background without any white space. Instead, I see this.</p>

<p><a href="https://i.stack.imgur.com/joyTO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/joyTO.png" alt="enter image description here"></a></p>

<pre><code>class Healthie extends React.Component {
  render() {
    return (
      &lt;View style={styles.container}&gt;
        &lt;Text style={styles.button} /&gt;
      &lt;/View&gt;
    );
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red',
  },
  button: {
    backgroundColor: 'green',
    borderRadius: 50,
    width: 100,
    height: 100,
    textAlign: 'center'
  }
});
</code></pre>

<p>react-native version: 0.17.0.</p>