react-native: borderRadius does not frame component right

Question

The borderRadius style attribute doesn't change the border of a component correctly.

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

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

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

react-native version: 0.17.0.

Answer 1

no need to wrap button or text inside views, just put this on your style

overflow: hidden

it works for me

Answer 2

To get what you're looking for, you're going to have to wrap the Text box inside another View. The View will not default to another BG color when the borderRadius is changed:

<View style={styles.container}>
  <View style={styles.button}>
    <Text style={{ backgroundColor: 'transparent' }}>Text</Text>
  </View>
</View>

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

Check out this demo.