React-native: borderRadius for specific corner not working on iOS

[facuacostag]

Hello guys!

I'm trying to style an Image component applying borderRadius for just two corners. The code I'm using to accomplish that is this:

imageStyle: {
        width: 100,
        height: 100,
        borderBottomLeftRadius: 5,
        borderBottomRightRadius: 0,
        borderTopLeftRadius: 5,
        borderTopRightRadius: 0,
        marginRight: 20
}

As you can see, I'm applying a borderRadius of 5 to both left corners and I'm having the next result:

• On Android:
  

• On iOS:
  

Seems like the iOS version is not applying the values.

Additional Information

• React Native version: 0.44.0
• Platform: iOS & Android
• Development Operating System: MacOS Sierra 10.12.4

[facuacostag]

To anyone having this issue, I fixed It by wrapping the Image on a View component and applying the borderRadius to It instead of directly applying It to the Image.

{....}
<View style={styles.imageContainerIOS}>
    <Image
         style={{ width: 100, height: 100 }} 
        source={dummyImage}
    />
</View>

{...}

imageContainerIOS: {
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 0,
    borderTopLeftRadius: 5,
    borderTopRightRadius: 0,
    overflow: 'hidden',
    marginRight: 20,
    },
{...}

[rajapeak07]

still this issue is coming

[nmfzone]

Using overflow: 'hidden' on the same element that have borderRadius should fix this issue, I guess..

[Ehsan0007]

still issue in borderRadius

[ricardoekm]

Same issue here.

[pckz]

same issue for me

[Troepster]

add position: "absolute" along with overflow: "hidden" to the containing <View>, that solved it for me on iOS

[wincod75]

I was applying border radius to a "Text" tag and it wasn't working until I moved it to it's parent element which is a "View" tag.

Update: Child Parent issue, Text vs View tags had nothing to do with it.

[jr2wolfgang]

For me, I just put overflow: "hidden" on my View container then it solves the issue.

[WhatAKitty]

Is there any reason why I put overflow: "hidden" fix my issue that the borderTopRightRadius and borderTopLeftRadius not working?

[yanyixin]

overflow: "hidden" is working

[RohanGada]

overflow: 'hidden' doesn't work for me. Is there anything else I need?.
Do I need to put overflow on the View container?

[ziyafenn]

Applying _borderTopRightRadius_ / _borderTopLeftRadius_ with or without overflow: "hidden" to the <Image />doesn't work on iOS.