Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

<Image> backgroundColor doesn't follow borderRadius on android

See original GitHub issue

backgroundColor follows the borderRadius on ios but on android it doesn’t.

<Image
  source={ require('./logo.png')) }
  style={{
    width: 100,
    height: 100,
    backgroundColor: '#fff',
    borderRadius: 50
  }}
/>

Is there another method for android that you can use to render a rounded image with transparency on a white background?

Issue Analytics

State:
Created 7 years ago
Reactions:11
Comments:16 (3 by maintainers)

Top GitHub Comments

22reactions

SudoPlzcommented, Jul 20, 2016

overflow: 'hidden', does not work for me on Android. The image still renders on top of its parent view without a border radius!

8reactions

janicduplessiscommented, Apr 21, 2016

You can probably wrap your image with a view. Something like this should work on both android and ios:

<View style={{
  backgroundColor: '#fff',
  borderRadius: 50,
  overflow: 'hidden',
}}>
  <Image
    source={ require('./logo.png')) }
    style={{
      width: 100,
      height: 100,
    }}
  />
</View>

We should still fix this bug though.

Top Results From Across the Web

Border Radius with background cannot work - Stack Overflow

I set the webview on Android 2.x browser. I want my button to have border-radius and background-color . I specify these values in...

border-radius - CSS-Tricks

You can give any element “rounded corners” by applying a border-radius through CSS. You'll only notice if there is a color change involved....

Incorrect background-color bleeds on cell corners using ...

Set ROW background-color, then target one CELL in ROW and give it a new background-color plus a border-radius:>0. Actual results: The exposed corners...

Rounded Corners on Images | IANR Media | Nebraska

The CSS property border-radius adds rounded corners on images. You can round all of the image's corners or just select corners, vary the...

Adjust corner radius and smoothing – Figma Help Center

Lots of buttons and icons in Figma have rounded corners. It's easier for eyes to follow circles and curves, while sharp edges disrupt...