css-to-react-native: borderRadius property regression?

I had opened up an issue over on styled-components here about the borderRadius property on native.

It seems going from version 1.0.11 to 1.1.1 in styled-components regressed how borderRadius would work.

borderTopLeftRadius etc. seemingly have no effect when developing for native from what I can tell in the simulator and what works is simply using borderRadius.

After having a dive into the source, I think this just requires a slight change to the grammar file to only output borderRadius.

I’ll submit a PR for this.

@jh3y

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 3
Comments: 23 (17 by maintainers)

Most upvoted comments

I’m thinking, special casing is going to be hard:

const StyledImage = styled(Image)`...`; // This is hard enough to work out that we need to special case
const SuperSpecialStyledImage = styled(StyledImage)`...` // This is almost impossible

Maybe we need to turn off this shorthand for the time being. @mxstbr

jacobp100 on Nov 24, 2016

I’m not able to reproduce this on 0.38. You are correct in how border-radius splats into borter-{top,bottom}-{left,right}-radius, but that does seem to work.

screen shot 2016-11-24 at 10 08 22 screen shot 2016-11-24 at 10 17 41

jacobp100 on Nov 24, 2016

I don’t think it can be fixed here can it? I think this is potentially a react-native issue.

borderTopLeftRadius etc. work differently with Image to how they do with View, as in they don’t 😂

It would be a nice to have for now if only supplying one value, it only output borderRadius though 😎

border-radius: 10 -> borderRadius: 10

border-radius: 10 20 -> borderTopLeftRadius: 10, borderTopRightRadius: 20, etc.

Of course, if multiple props are supplied you can’t really give a single value for borderRadius.

@jh3y

jh3y on Nov 24, 2016