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

how to give radius to imagebackground in react native

Better Badger answered on July 23, 2021 Popularity 10/10 Helpfulness 10/10

answer how to give radius to imagebackground in react native

related border radius on an image react native

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

Link to this answer
Share Copy Link

Contributed on Jul 23 2021

Better Badger

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

how to give radius to imagebackground in react native

Contents

More Related Answers

how to give radius to imagebackground in react native

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.