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: