React Native rounded image with a border

Worth to mention for Android...

I had to specifically set resizeMode="cover" for the borderRadius to take effect.

<Image
  style={styles.image}
  source={source}
  resizeMode={"cover"} // <- needs to be "cover" for borderRadius to take effect on Android
/>

const styles = StyleSheet.create({
  image: {
    width: 150,
    height: 150,
    borderColor: 'red,
    borderWidth: 2,
    borderRadius: 75
  },
});

Use the following styling, it's work for me.

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

Border width adds up to the size of the component that you added to. This makes your image bigger than the size of your container component. To solve this issue you can add the border width to the component sizes.

Example

const styles = StyleSheet.create({
  profileImgContainer: {
    marginLeft: 8,
    height: 82,
    width: 82,
    borderRadius: 40,
    borderWidth: 1
  },
  profileImg: {
    height: 80,
    width: 80,
    borderRadius: 40,
  },
});

overflow: 'hidden' for images container solves this issue.