Support for React-Native specific properties

[pavsidhu]

There are several CSS properties that are specific to React-Native that are supported by styled-components/native. For example the following properties are part of React-Native but appear as errors when using this plugin:

const Main = styled.View`
  shadow-color: black;
  shadow-opacity: 0.5;
  shadow-offset: 2px 2px;
`

Would React-Native specific properties be something to consider supporting?

[mjbvz]

This is now possible using the css-language-service api: microsoft/vscode-css-languageservice#111

This plugin can automatically contribute a list of valid react-native style properties. PRs welcome. Let me know if you have any questions about implementing this

[alvincrespo]

More than happy to help here. @mjbvz Is there a guide on how to add these properties?

[mjbvz]

Pass a list of validProperties to the language services, here I believe.

[lidonghua]

After inspecting source code of the plugin, I managed to find a working solution.

Edit your tsconfig.json like this:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-styled-plugin",
        "lint": {
          "validProperties": "shadow-color,shadow-opacity,shadow-offset"
        }
      }
    ]
  }
}

Maybe it helps.

[ScreamZ]

Any news on this ?

[kallaspriit]

Workaround provided by @lidonghua kind of works, does anyone have an exhaustive list of react-native specific properties to use until these become supported?

[ScreamZ]

@kallaspriit You can add tint-color but I guess it's a step by step process once you get an error…