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

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: ios

android: android

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

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 42
Comments: 26 (1 by maintainers)

Most upvoted comments

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>

+72

SushilShrestha on Feb 20, 2017

using .54 and issue still exsists on android

+13

alzalabany on Mar 6, 2018

This was fixed in RN 0.50.4

pintocarlos on Dec 27, 2017

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 )

yazgazan on Jul 25, 2016

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

hpbyte on May 17, 2018

I am using RN 0.51.0 and issue still persists

vvavepacket on Jan 6, 2018

0.55 and still exists on android.

suprraz on May 15, 2018

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

@yazgazan seems to be reasonable workaround

5in4 on Jul 27, 2016

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>

austinksmith on Jul 21, 2016