Border Width is duplicated on image

[DerMth]

Hi,

There is an issue when setting a borderWidth style on an image. When I set a borderWidth, the border is "duplicated" on iOS (not tested on Android).

Here is my image style :

const RoundedImage = styled(CachedImage)`
    width: 100px;
    height: 100px;
    borderColor: green;
    borderWidth: 3px;
`;

The radius in the screenshot or the Styled Component in the code are not important, the result is the same without.

I used the initial React Native image before and had no issue.

[kfiroo]

@DerMth Hey, If you take a look at the code here you can see we are rendering a ImageBackground component with the styles provided to CachedImage.

Can you try rendering the ImageBackground component and see if the problem still exists?

[DerMth]

@kfiroo Hi, The border seems not "duplicated" with the ImageBackground, but the image is not anymore rounded.

[kfiroo]

@DerMth note that ImageBackground uses imageStyle prop for styles

[bbdroid]

@DerMth Since this library renders the ImageBackground with the styles provided to CachedImage, you can try this.

  avatarWrapper: {
    height: 100,
    width: 100,
    borderRadius: 50,
    borderWidth: 2,
    borderColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
  },
  avatar: {
    height: 100,
    width: 100,
  },
....
<View style={styles.avatarWrapper}>
   <CachedImage
      style={styles.avatar}
      source={avatarSource}
   />
</View>

[DerMth]

@kfiroo @bdavid68 Thanks for your answers. I first used the method of @bdavid68, but in order to have less code, I used the imageStyle property : imageStyle={{ borderRadius: xx }}