Skip to content

borderRadius is never applied on Android when image contains another component #8885

@5in4

Description

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

android:
android

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

Activity

austinksmith

austinksmith commented on Jul 21, 2016

@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

5in4 commented on Jul 22, 2016

@5in4
Author

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

Dynom

Dynom commented on Jul 25, 2016

@Dynom

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

yazgazan

yazgazan commented on Jul 25, 2016

@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

5in4 commented on Jul 27, 2016

@5in4
Author

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

@yazgazan seems to be reasonable workaround

StellwagJo

StellwagJo commented on Sep 15, 2016

@StellwagJo

Still having this issue with RN 0.31 on Android

Canedo

Canedo commented on Nov 10, 2016

@Canedo

Still having the same issue with RN 0.36 on Android.

SushilShrestha

SushilShrestha commented on Feb 20, 2017

@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

crim3hound commented on Jul 17, 2017

@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.

14 remaining items

thangkho

thangkho commented on Mar 22, 2018

@thangkho

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

amitassaraf

amitassaraf commented on Mar 23, 2018

@amitassaraf

Still happening & currently using @SushilShrestha 's fix

suprraz

suprraz commented on May 15, 2018

@suprraz

0.55 and still exists on android.

hpbyte

hpbyte commented on May 17, 2018

@hpbyte

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

askarhu

askarhu commented on Jun 19, 2018

@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

kelset commented on Jun 20, 2018

@kelset
Contributor

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

locked as resolved and limited conversation to collaborators on Jun 20, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Platform: AndroidAndroid applications.Ran CommandsOne of our bots successfully processed a command.Resolution: LockedThis issue was locked by the bot.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @Dynom@leeight@5in4@dariocravero@yazgazan

        Issue actions

          borderRadius is never applied on Android when image contains another component · Issue #8885 · facebook/react-native