How to remove border outside of border in react-native?

Question

There is a weird grey border on the outside of my <Image /> border. Here is an example: https://www.dropbox.com/s/01lqk4ijc3k9j7m/Screenshot%202017-12-01%2015.25.11.png?dl=0 (You can see the profile image which has a white border around it and that white border seems to have a grey one)

Here is the code for one of the circles shown in the above dropbox link.

<TouchableOpacity onPress={...}>
  <Image
    style={styles.avatar}
    source={...}
  />
</TouchableOpacity>

Here is the avatar style:

borderColor: '#fff',
borderWidth: 2,
width: 46,
height: 46,
borderRadius: 23,

How can I get rid of this weird border?

Answer 1

add elevation:0 to your avatar style