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: