1

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?

James111
  • 15,378
  • 15
  • 78
  • 121
  • Are you referring to the square grey border or the borders around the avatars. You may need to style the TouchOpacity along with the Images – SteveB Dec 01 '17 at 04:39
  • I'm referring to the grey border, which appears around the white border. I tried setting the border color to white on the TouchableOpacity, but it didn't do anything @SteveB – James111 Dec 01 '17 at 04:40
  • Can you post the styles for the TouchOpacity. I see a borderWidth of 1px in Chrome when looking at the box. Removing it, hides part of the grey border. – SteveB Dec 01 '17 at 04:47
  • I don't have any styles on the TouchableOpacity. I was just saying that adding a border (colour white) does not remove the grey border. – James111 Dec 01 '17 at 04:56
  • Just to confirm, this is the grey box, not a grey circle around the avatars. I'm not sure if it was dropbox, or your code, but there was a grey box with borderwidth=1 creating a box around the avatars when I looked at your link – SteveB Dec 01 '17 at 05:17
  • Nope, I'm talking about the grey circles around the avatars. The grey box is from dropbox. @SteveB – James111 Dec 01 '17 at 05:39
  • can you share little more code so that scenario can be reproduced at our end ? – Paras Watts Dec 01 '17 at 06:07
  • could you insert the https://snack.expo.io of your code – user93 Dec 01 '17 at 06:21
  • set touchable opacity backgroundColor to white that will do the trick – Paras Watts Dec 01 '17 at 06:24
  • @ParasWatts That didn't seem to fix it. I think there is an issue with RN (when using a border radius on an image and adding a border) as I've seen others with the same problem – James111 Dec 01 '17 at 07:24
  • I have used your code and tried running at my end, adding background color is solving the problem on my end. Otherwise i can see little grey line around border of image. Touchable opacity has a little grey color by default , you can try changing color of touchable opacity – Paras Watts Dec 01 '17 at 07:26
  • render() { return ( ); } const styles = StyleSheet.create({ avatar:{ width: 146, height: 146, borderRadius: 73, }, }); – Paras Watts Dec 01 '17 at 07:30
  • This is the code which i tried – Paras Watts Dec 01 '17 at 07:30

1 Answers1

2

add elevation:0 to your avatar style

Mojtaba Moshfeghi far
  • 571
  • 1
  • 5
  • 20