React-native: [Image & Borders] borderRadius image

[RWOverdijk]

Image components appear to ignore of the borderBottomRightRadius and such properties whenever a borderRadius gets set. It will use the value of borderRadius over the specific ones.

Image components ignore specific style properties for borderRadius, such as borderBottomRightRadius. borderRadius itself does work.

[RWOverdijk]

Sorry for not giving this the right title.. :)

[brentvatne]

no problem @RWOverdijk - I probably would have changed it anyways because I'm weird like that

[ErikPettersson]

Is there any known workaround for this? (seeing how Views with overflow: 'hidden' doesn't take border radius into consideration)

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/image-borders-borderradius-image

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix. We rely on the community to provide
bugfixes as the core team is focused on performance.

[nabn]

Managed to work around this by containing the image inside a View, giving the View the specific radii and writing overflow: 'hidden' for the enclosing View

[viix]

@nabn seemed better to set borderRadius to both View and Image will work, on my android device, but still not perfect

[BabuinGH]

followed @nabn and additionally set borderRadius as parameter instead of style.
source={{uri: Url}}
resizeMode='cover'
borderRadius={5}
style={styles.organizationImage}
>

[joshuapinter]

@BabuinGH What do you mean by parameter? Do you mean a prop on the Image component like:

<Image borderRadius={5} ... />

[joshuapinter]

@BabuinGH Holy crap, you're right. That works. Whereas setting borderRadius in the style doesn't do anything. Why would that make a difference? How are they handled differently? That should be logged as a bug for sure.

[joshuapinter]

Okay, quick update. I have confirmed that the specific border radius attributes work as props as well, like borderTopLeftRadius, borderTopRightRadius, etc.

I have also found that if you set a backgroundColor style on the Image (maybe before the image is fully loaded) the backgroundColor does not respect the borderRadius when set on the props of the <Image .../> component. However, when you set the borderRadius as a style on the <Image .../> component, it works great.

So, in summation:

• backgroundColor respects the borderRadius _style_, but not the _prop_.

• The actual image respects the borderRadius _prop_, but not the _style_.

Strange.

[paalex]

On Android RN0.35 none of the methods work. backgroundColor doesn't respect borderRadius style nor prop.
Anyone managed to make it work?

[pwcremin]

The only trick that worked in ios 0.42 was setting overflow: 'hidden' like @nabn recommended.

[gp3gp3gp3]

None of these are working for me in RN.042. Just trying to get borderTopRightRadius and BorderTopLeftRadius on an image. Wrapping in a View component with border{x}Radius: y, overflow: 'hidden' doesn't work, and neither does passing the image a border{x}Radius prop directly, although giving a borderRadius prop does. This is just in iOS, not even approaching android yet.

[pwcremin]

@gp3gp3gp3
I just tested ( RN.042 ) and this is working for me:

<View
                        style={{
                            borderTopLeftRadius: 10,
                            borderTopRightRadius: 10,
                            overflow: 'hidden',
                            height: 205,
                        }}
                    >
     < your image crap with a rounded edge from the parent view />
</View>

This View is from shoutem/ui but I don't think it should matter

[MergimU]

BorderRadius does not work on a closing component like "

`<Image>
       <Text>The borderRadius does not take effect on this parent <Image> component</Text>
</Image>`

But works if you use a self-closing component and wrap it with a View

`<View>
     <Image />
     <Text>Use a self-closing <Image /> component and wrap it with a <View> then give the <View> borderRadius </Text>
</View>`

[emrehayirci]

I have the same bug with @MergimU ? So how can i set a view that contains text with rounded background image
I am using 0.42

[MergimU]

@emrehayirci - Here's an example on android http://prntscr.com/f48333

[emrehayirci]

@MergimU thank you that is a nice work around !

[rborn]

I'm late to the party, but I found this way to have independent border radius on both platforms 😄
https://snack.expo.io/BJfN38eXW