Ad

React-native: BorderRadius Does Not Frame Component Right

- 1 answer

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.

enter image description here

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.

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad