Styled-components: react-native shadowOffet not supported as inline style

[smooJitter]

This does not seem to work.

 const  myShadowed =  {
        shadowOffset: { width: 0, height: 2 },
        shadowColor: '#000',
        shadowOpacity: 0.2,
      },

 const StyledThumbnail = styled(View)`
    ${ifProp('shadow', myShadowed)};
  `;

Produces the error:
Node of type rule not supported as an inline style

I appreciate any help in advance.

[filipdanic]

Similar problem. It’s some issue with using shadowOffset: { width: 0, height: 2 },. Removing that clears the warning. Not sure why and what you’re supposed to use instead.

[kitten]

We don't support "inline" styles as interpolations in this way. I'm pretty sure it's because of how our stringifier works, in that it assumes that objects as values on an interpolation-object must be nested rules. Hence the message:

Node of type rule not supported as an inline style

What does work is: shadow-offset: 0 2px; in similar instance, since that will be converted into coordinates.

cc @jacobp100 @mxstbr: Do we need a different syntax? I suppose not, but this should maybe be documented in a nicer way.

[jacobp100]

We have an open issue #1509 - we can keep discussing there. No idea what we should actually do though!