React-native: ImageBackground doesn't consider borderRadius.

[pentarex]

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

1.

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

[Sommerfeld]

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

[pentarex]

Thank you. Its working! I didn't know that position: absolute ignores borderRadius.

Again thank you for the solution!

[diluy]

@Sommerfeld Thanks,It works for me too. I search this issue for a few day,but no one knowns it.

[JeremyBradshaw7]

Unfortunately only borderRadius works with this method, borderTopLeftRadius for example doesn't, it still shows square.

[Carlosarturo28]

Some idea why independent borders doesn't work with ImageBackground? i'm trying to get an Image with top borders rounded and bottom borders squared but apparently it's not possible.

[Sommerfeld]

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