React Native Circle Image on Android

user_6517826 0
Viewed 7397

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!

react-native reactjs android image
2 Answers

Use this style;

image: {
    width: 150,
    height: 150,
    borderRadius: 150 / 2,
    overflow: "hidden",
    borderWidth: 3,
    borderColor: "red"
  }
user_58093390
Related