React-native: borderRadius is never applied on Android when image contains another component

[5in4]

While working perfectly on iOS, border radius is never applied to an image if it contains any other component:

<Image style={ { borderRadius: 10, width: 300, height: 100 } } source={{ uri: 'https://placekitten.com/300/100' }}> <Text>SampleText</Text> </Image>

ios:

android:

I am using RN 0.29.0, and this is happening across all Android devices. I am currently building from osx

[austinksmith]

I'd imagine the "fix" for this would be to wrap the image in a view that contains border radius instead. Eg.
<View style = {{flex: 1, borderRadius: 10}} ><Image style={ {width: 300, height: 100 } } source={{ uri: 'https://placekitten.com/300/100' }}> <Text>SampleText</Text> </Image> </View>

[5in4]

Tried it, unfortunately the images still had no borderRadius applied.

[Dynom]

@5in4 did you try it with a more recent RN version?

[yazgazan]

I managed to get around this by having the Text after the image and setting it to absolute/top:0.

<View style={container}>
  <Image {/*...*/} />
  <Text style={{ position: 'absolute', top: 0 }}>{text}</Text>
</View>

This could could probably be fixed by using RN 0.30.0 (see v0.30.0 release notes )

[5in4]

I tried it on RN 0.30 and on 0.31 RC, behavior doesn't change.

@yazgazan seems to be reasonable workaround

[StellwagJo]

Still having this issue with RN 0.31 on Android

[leeight]

1. https://github.com/facebook/react-native/issues/8649
2. https://github.com/facebook/react-native/issues/3198

[Canedo]

Still having the same issue with RN 0.36 on Android.

[SushilShrestha]

Managed to solve the problem using the borderRadius attribute on the Image instead of providing as style.
RN 0.40

<Image
  source={{uri: 'http://lorempixel.com/400/300/'}}
  height={100}
  resizeMode="cover"
  borderRadius={10}
>
  <MyCustomComponent />
</Image>

[crim3hound]

Thanks @SushilShrestha for this. It works for me and has maybe saved me a couple of potentially agonizing minutes trying to find solutions. I have a Button element within my image which screwed up with its styling a bit, but adding borderRadius={50} to the Image and maintaining resizeMode: "cover" in my styles fixes the issue.

[dariocravero]

@SushilShrestha that works for me too, thanks :).

However, do you get a warning like You're setting the style { bordeRadius: ...} as a prop. You should nest it in a style object. E.g.: { style: { borderRadius: .. } } when using it? I guess it makes sense since the docs say it's meant to be used in the style only. However, there's a setter for it which I reckon it's why it works outside of style.

I wonder why it's not being picked up when it's defined as a style though because it works if the style is manually set through the react-devtools!

[leethree]

@dariocravero I'm seeing the warning only on iOS. The warning goes away if I set bordeRadius prop only when Platform.OS === 'android'.

[pintocarlos]

We tried the trick of applying the border radius to the Image and it works inconsistently. Only some corners look rounded at random. This only happens on Android.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[pintocarlos]

This was fixed in RN 0.50.4

[vvavepacket]

I am using RN 0.51.0 and issue still persists

[xavier86]

+1

[kelset]

I suggest you check this other issue https://github.com/facebook/react-native/issues/2468#issuecomment-308840184

(this is in fact a duplicate)

[vijaya06]

borderRadius is not working in right Side only.

[alzalabany]

using .54 and issue still exsists on android

[thangkho]

using RN 0.54.2 and issue still exists on android. so sad

[amitassaraf]

Still happening & currently using @SushilShrestha 's fix

[suprraz]

0.55 and still exists on android.

[hpbyte]

this fixes for me
<ImageBackground source={{ }} borderRadius={20}> <Text>Placeholder Text</Text> </ImageBackground>

[askarhu]

resizeMode="cover" and borderRadius={n} got it to work on Android. Thanks for the tip, resizeMode is the key and also using borderRadius on the element itself.

[kelset]

Closing this since in #2468 there are multiple viable solutions.