styled-components: Passing shorthand margin as a prop throw an error on react-native

Version

1.3.0

Steps to reproduce

Create an element as in the example below and pass a margin prop to it with a string inside.

const Styled = styled.View`
    margin: ${props => props.margin};
`;

<Styled margin="50 0" />

As a workaround you can call the prop m, ex: <Styled m="50 0" /> and it will work fine.

Expected Behavior

Should work as expected as a margin shorthand

Actual Behavior

Throw an error JSON value ‘50 0’ of type NSString cannot be converted to NSNumber

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 21 (10 by maintainers)

Most upvoted comments

I know, but if you pass the props with another name ex m instead of margin it will work fine. That’s the thing that bugged me. This example will work fine!

const Styled = styled.View`
    margin: ${props => props.m};
`;

<Styled m="50 0" />

dbertella on Jan 23, 2017

It blew my mind to discover that layout props were actually props and not just styles. I came across an issue trying to set position shorthands in my library with an array. I am able to pass shorthands using arrays still for margin and padding like so:

 <View margin={[2,4]} />

but not for position, because position is type-checked for the enum ["absolute", "relative"] or [0,1]. But that’s just in my library. Don’t know if that kind of thing is even worth trying here.

ssomnoremac on Feb 20, 2017

Opened issue on RN: https://github.com/facebook/react-native/issues/12469

f0rr0 on Feb 20, 2017

@dbertella I think thats react native related, it doesn’t expect string there, but wants numbers 50 0 in your case you could margin={50} and apply it as margin-right / margin-left a bit annoying, as margin={50 0} is invalid 😕

xzilja on Jan 23, 2017