JAVASCRIPT

border radius on an image react native

// You need overflow set to 'hidden' for the radius to take effect,
// If your images have transparent backgrounds,
	// you'll probably want to have both image and image container
	// components.

const styles = StyleSheet.create({
  imgContainer: {
    width: 10,
    height: 10,
    resizeMode: 'cover',
    borderRadius: 50,
    overflow: 'hidden',
    justifyContent: 'center',
    alignItems: 'center',
  },
  profilePic: {
    width: 8,
    height: 8,
    aspectRatio: 1,
    resizeMode: 'contain',
  },
// Note that the image is slightly smaller than its container
})

// If you don't have transparent backgrounds or known background colors,
	// the above solution will lead to an awkward square in the middle of
	// your circle.
// In this case, you'll have to loose the corners of your image.
const styles = StyleSheet.create({
  imgContainer: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  profilePic: {
    width: 10,
    height: 10,
    aspectRatio: 1,
    resizeMode: 'cover',
    borderRadius: 50,
    overflow: 'hidden',
  },
// If you're not worried about centering your image in a row,
  //the container might not be necessary here.
})

<View style={styles.imgContainer}>
  <Image source={img} style={styles.profilePic} />
</View>
                                 

react native image border radius not working

add this style "overflow: 'hidden'" for images container solves this issue.