React Native border radius makes outline

Question

I would like to make the circle view by using react-native.

Here what I did:

circle: {
    position: 'absolute',
    borderWidth: 10,
    borderColor: '#fff',
    top: 20,
    left: 30,
    width: 150,
    height: 150,
    borderRadius: 150 / 2,
    backgroundColor: '#ED1D27',
  }

And view

<View style={styles.circle}></View>

The result is:

There is and outline rounded the circle.

I don't want that outline. I checked by remove the border radius and it has no outline like below:

I have no idea for this issue, please help me...

Answer 1

So I am not entirely sure why it gives that very small red border with your current rule. It could be an actual bug. Regardless if I understand correctly, you want a circle without that small red border. You can achieve that by removing your border property:

position: 'absolute',
top: 20,
left: 30,
width: 150,
height: 150,
borderRadius: 150 / 2,
backgroundColor: '#ED1D27',

Resulting in:

If you do want a border, a potential workaround could be:

inner: {
  position: 'relative',
  width: 150,
  height: 150,
  borderRadius: 150 / 2,
  backgroundColor: '#ED1D27',
},
outter:{
  position: 'absolute',
  paddingTop:10,
  paddingLeft:10,
  top: 20,
  left: 30,
  width: 170,
  height: 170,
  borderRadius: 160 / 2,
  backgroundColor: '#000',
},

With a view heirarchy like:

  <View style={styles.container}>
    <View style={styles.outter}>
      <View style={styles.inner}></View>
    </View>
  </View>

Resulting in:

Answer 2

RE-EDIT: Turns out that this border-radius issue is not isolated to working with react alone, but a general css known issue, that has been raised [and marked as fixed] numerous times. I found this link, that cites they found a solution, but also states the cause. The link in question's problem cites it initially as being related to box-shadow but from a quick google search there seems to many issues with border-radius.

Given cause:

It turns out that if your border radius is larger than the height of the element (taking in to account padding, font-size, and so forth) this visual error will occur.

A fiddle is given in the github link http://jsfiddle.net/2HqTZ/ (with html2canvas)

---

Earlier proposed solution answer 1- link to expo

Edited earlier proposed solution answer 2 - expo link

Current/ best solution (of mine) IMHO link

I think this is the best solution. I noted that if the border color was left out in the circedge css but left in only the circle css, the border 'outline' effect is greatly reduced. I also replaced borderRadius with borderTopLeftRadius etc after reading the known issues on caniuse.com

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.square} />
        <View style={styles.circedge}/>
        <View style={styles.circle}>
         </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 2,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#fff',
  },
  square: {
    position: 'absolute',
    top: 30,
    left: 30,
    width: 200,
    height: 100,
    backgroundColor: 'red'
  },
  circle: {
    position: 'absolute',
    borderColor: '#fff',
    top: 60,
    left: 60,
    width: 150,
    height: 150,
    borderTopLeftRadius:150/2,
    borderTopRightRadius:150/2,
    borderBottomLeftRadius:150/2,
    borderBottomRightRadius:150/2,
    backgroundColor: '#ED1D27',
  },
  circedge:{
     position: 'absolute',
     paddingTop:10,
     paddingLeft:10,
     top: 50,
     left: 50,
     width: 170,
     height: 170,
     borderTopLeftRadius:170/2,
     borderTopRightRadius:170/2,
     borderBottomLeftRadius:170/2,
    borderBottomRightRadius:170/2,
     backgroundColor: '#fff',
  }
});