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

border radius on an image react native

Add Answer

Cupboard Steak answered on November 24, 2020 Popularity 9/10 Helpfulness 5/10

answer border radius on an image react native

related how to give radius to imagebackground in react native

related react native image border radius not working

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 image javascript react-native

Link to this answer
Share Copy Link

Contributed on Sep 21 2022

Cupboard Steak

0 Answers Avg Quality 2/10

Closely Related Answers

how to give radius to imagebackground in react native

Comment

<ImageBackground
  style={{height: 100, width: 100}}
  imageStyle={{ borderRadius: 6}}
  source={{ uri: 'www.imageislocatedhere.com }}
>

Popularity 10/10 Helpfulness 10/10 Language javascript

Source: stackoverflow.com

Tags: imagebackground

Link to this answer
Share Copy Link

Contributed on Jul 23 2021

Better Badger

0 Answers Avg Quality 2/10

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 bo

Link to this answer
Share Copy Link

Contributed on Nov 24 2020

Akats

0 Answers Avg Quality 2/10

border radius on an image react native

Contents

More Related Answers

border radius on an image react native

Closely Related Answers

how to give radius to imagebackground in react native

react native image border radius not working

Grepper

Documentation

Social

Legal

Contact

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