Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ImageBackground doesn't consider borderRadius.

See original GitHub issue

Is this a bug report?

yes

Have you read the Contributing Guidelines?

yes

Environment

Environment: OS: Linux 4.10 Node: 8.6.0 Yarn: 1.2.0 npm: 5.3.0 Watchman: Not Found Xcode: N/A Android Studio: Not Found

Packages: (wanted => installed) react: ^16.0.0 => 16.1.1 react-native: ^0.50.3 => 0.50.3

Steps to Reproduce

<ImageBackground 
       style={{
           borderRadius : 50,
           width: 100 , 
           height: 100}} 
        source={{uri: 'https://en.facebookbrand.com/wp-content/uploads/2016/05/FB-fLogo-Blue-broadcast-2.png')}}
        onLoad={() => this.setState({profileImageIsLoading: false})}>
         
        {/** this._renderActivityIndicator() */}

</ImageBackground>

Expected Behavior

Circular Image

Actual Behavior

Square Image

Reproducible Demo

I think the code up which ive posted can be copy pasted.

Issue Analytics

State:
Created 6 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

124reactions

Sommerfeldcommented, Nov 26, 2017

If you take a look into the Source Code you see that the <Image> component is positioned absolute. Absolute positioned children will always ignore overflow: 'hidden' and stuff like borderRadius: 1 of the parent I think. Taking another look you see that you can pass imageStyle prop.

All in All - Here is the solution:

<ImageBackground
  style={{ width: 50, height: 50, borderRadius: 25 }}
  imageStyle={{ borderRadius: 25 }}
  source={{ uri: imageUrl }}
/>

0reactions

Sommerfeldcommented, Nov 20, 2018

Consider creating a new bug report. This is not a bug of ImageBackground, the Image component itself doesn’t render separate border radiuses even so the docs explicitly mention these style props. If you don’t create a new bug report your chances of being heard are pretty low I guess.

https://snack.expo.io/@mhjannik/image-with-separate-border-radius

Top Results From Across the Web

How do you add borderRadius to ImageBackground?

However, it doesn't seem to accept borderRadius . This has no affect. <ImageBackground style={{height: 100, width: 100, borderRadius: 6}} source ...

border-radius - CSS-Tricks

The border-radius property takes between one and four length or percentage values, where one value sets the radius for all four corners at...

CSS Backgrounds and Borders Module Level 3 - W3C

This module replaces and extends the background and border features defined in [CSS2] sections 8.5 and 14.2. All properties in this module apply ......

Example to Set Border Radius of an Image in React Native

Introduction. This is an Example to Set Border Radius of an Image in React Native. We will set the border radius of the...

background-size - CSS: Cascading Style Sheets | MDN

Let's consider a large image, a 2982x2808 Firefox logo image. We want to tile four copies of this image into a 300x300-pixel element....