You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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>
xqwzts, shashuec, AntonioArts, evturn, alapini and 53 morealexustinovsm, hugoh59 and bisht2ankithughnguy, huowenxuan and jamlandhughnguy, huowenxuan, DavitVosk and cordosvictorhughnguy, anthlasserre, huowenxuan and DavitVosk
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.
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.
Activity
austinksmith commentedon Jul 21, 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>
5in4 commentedon Jul 22, 2016
Tried it, unfortunately the images still had no borderRadius applied.
Dynom commentedon Jul 25, 2016
@5in4 did you try it with a more recent RN version?
yazgazan commentedon Jul 25, 2016
I managed to get around this by having the Text after the image and setting it to
absolute/top:0
.This could could probably be fixed by using RN 0.30.0 (see v0.30.0 release notes )
5in4 commentedon Jul 27, 2016
I tried it on RN 0.30 and on 0.31 RC, behavior doesn't change.
@yazgazan seems to be reasonable workaround
StellwagJo commentedon Sep 15, 2016
Still having this issue with RN 0.31 on Android
leeight commentedon Sep 15, 2016
Canedo commentedon Nov 10, 2016
Still having the same issue with RN 0.36 on Android.
SushilShrestha commentedon Feb 20, 2017
Managed to solve the problem using the
borderRadius
attribute on the Image instead of providing as style.RN 0.40
crim3hound commentedon Jul 17, 2017
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 addingborderRadius={50}
to theImage
and maintainingresizeMode: "cover"
in my styles fixes the issue.14 remaining items
thangkho commentedon Mar 22, 2018
using RN 0.54.2 and issue still exists on android. so sad
amitassaraf commentedon Mar 23, 2018
Still happening & currently using @SushilShrestha 's fix
suprraz commentedon May 15, 2018
0.55 and still exists on android.
hpbyte commentedon May 17, 2018
this fixes for me
<ImageBackground source={{ }} borderRadius={20}> <Text>Placeholder Text</Text> </ImageBackground>
askarhu commentedon Jun 19, 2018
resizeMode="cover"
andborderRadius={n}
got it to work on Android. Thanks for the tip, resizeMode is the key and also using borderRadius on the element itself.kelset commentedon Jun 20, 2018
Closing this since in #2468 there are multiple viable solutions.