Breaking News: Grepper is joining You.com. Read the official announcement!

react native image border radius not working

Akats answered on November 24, 2020 Popularity 10/10 Helpfulness 2/10

answer react native image border radius not working

related border radius on an image react native

react native image border radius not working

Comment

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

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: border-radius image javascript react-native

Link to this answer
Share Copy Link

Contributed on Nov 24 2020

Akats

0 Answers Avg Quality 2/10

Closely Related Answers

border radius on an image react native

Comment

// 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>

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: border-radius bo

Link to this answer
Share Copy Link

Contributed on Sep 21 2022

Cupboard Steak

0 Answers Avg Quality 2/10

react native image border radius not working

Contents

More Related Answers

react native image border radius not working

Closely Related Answers

border radius on an image react native

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.