1

I may not have done the best job in creating the title for the question. Below is the error demonstrated on rnplay

https://rnplay.org/apps/eNIbjw

The problem is that I want to show some colored tiles on users' avatars to represent their status. So, I have the avatar image over which I have put a View whose background color is set to the users' status color (green in the sample code) and I have a white border around the View so that it looks better. If you observe closely, maybe press (Cmd + +) a few times to zoom the screen, there is a very thin green line around the border in iOS. Below is a screenshot of how it looks on iOS.

enter image description here

This problem is not present on Android and it appears perfectly fine with no thin green line around the border.

I tried a few different styles to workaround this problem but with my limited CSS knowledge, I was not able to do so.

Please share if you have a way around it.

Thanks!

Varun Gupta
  • 2,870
  • 6
  • 33
  • 73
  • I've seen similar issues with borders and views. You get some unexpected results sometimes. I think it would be good to report it in their github repo as an issue. – abeikverdi Dec 06 '16 at 04:29

1 Answers1

0

the following code should give you the same result but it doesn't use 'border' attribute. It uses two circles, one bigger than the other. The bigger(parent) one is white while the inner(child) is green. Because of your justifyContent and alignItems both being set to 'center' the inner circle is always going to have 2px of white around it. Here is the code:

<View style={styles.container}>
     <View style={{width: 30, height: 30, marginHorizontal: 2}}>
      <Image
        source={{uri: 'https://cdn1.iconfinder.com/data/icons/avatar-2-2/512/Salesman_2-512.png'}}
            style={{height: 30, width: 30}} />
      <View style={{backgroundColor: 'white', position: 'absolute', height: 16, width: 16, top: -6, right: -6, 
        borderRadius: 8, justifyContent: 'center', alignItems: 'center'}}>
        <View style={{width: 26, height: 26,
            backgroundColor: 'green'}} />
      </View>
    </View>
  </View>
Hugo Pretorius
  • 452
  • 1
  • 3
  • 15