border-radius is not work for Image

[pinqy520]

um.. i'm not sure it is a cssta's issue.

for some reason (facebook/react-native#14148) Image component is not support corner-specific border radius like borderTopRightRadius. but cssta translates border-radius to four specific border radius, and it is not work for Image Component.

---

code:

const ImageRadius = cssta(Image) `
  width: 100px;
  height: 100px;
  border-radius: 50px;
  overflow: hidden;
`;


export default () => (
    <ImageRadius
        style={{ borderRadius: 10 }}
        source={{ uri: 'http://img1.skqkw.cn:888/2014/11/17/10/3u1qorvdoud-126128.jpg' }}
        resizeMode="cover" />
);

[jacobp100]

You are 100% correct in the cause! We "fixed" this in styled-components by disabling the border-radius shorthand. It actually works in android, and it looks like they're working on it for iOS, so I think I'll just wait and see!

I don't really have a great workaround in the meantime. Sorry!

[pinqy520]

ok, thanks for your great work~!