React Native Circle Image on Android

Question

I am simply trying to take a square image and contain it within a circle in my react-native app on Android. A circle image basically.

<View style={mainStyle.profileImageContainer}>
            <Image
              style={mainStyle.profileImage}
              source={{uri: CONFIG.media_url+this.props.image}} 
              resizeMode="cover"
            />
</View>

and styles:

profileImageContainer: {
    translateY: -43,
    alignSelf: 'center',
},
profileImage: {
    resizeMode: 'cover',
    height: 86,
    width: 86,
    borderWidth: 2,
    borderRadius: 75,
    overlayColor: CREAM,
},

But the only way to get it remotely circular on Android is to add the "overlayColor", but I need this to be transparent so the design behind is visible. The property transparent does not work.

Does anyone have any ideas how to achieve this? Am I missing some sort of simple property?

EDIT: Thanks to Dhruv Parmar's answer, I realised the issue is because I was using a GIF image. The method you would expect seems to work fine with jpgs and pngs, but not GIFS!

Answer 1

You don't need to have a wrapping view to achieve this, simply using borderRadius set to half of image size should do the trick. Any other styles you want can be applied directly to Image view

You can see an example here https://snack.expo.io/rJI4DzoDW