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…

[DriesVS]

@kallaspriit so far I have:
shadow-color,shadow-opacity,shadow-offset,padding-horizontal,padding-vertical,margin-vertical,margin-vertical,tint-color,aspect-ratio,elevation

[sregg]

This works for me:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-styled-plugin",
        "lint": {
          "validProperties": [
            "shadow-color",
            "shadow-opacity",
            "shadow-offset",
            "shadow-radius",
            "padding-horizontal",
            "padding-vertical",
            "margin-vertical",
            "margin-horizontal",
            "tint-color",
            "aspect-ratio",
            "elevation"
          ]
        }
      }
    ]
  }
}

notice validProperties is an actual array, not a csv string

[dimaip]

Now how do you disallow properties which are not supported by RN, e.g. box-shadow?

[mjbvz]

Could someone please submit a PR that documents validProperties

[arnaudambro]

So I have this warning too in VSCode: Unknown property: 'shadow-radius' ts-styled-plugin(9999)

I set up a tsconfig.json file but actually I don't use TypeScript ! Anyway, this file did not change a thing for me. I also installed stylelint but it didn't change either, still the warning.

Any idea ?

I updated the properties for those in needs

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-styled-plugin",
        "lint": {
          "validProperties": [
            "aspect-ratio",
            "elevation",
            "margin-vertical",
            "margin-horizontal",
            "padding-horizontal",
            "padding-vertical",
            "resize-mode",
            "shadow-color",
            "shadow-opacity",
            "shadow-offset",
            "shadow-radius",
            "text-align-vertical",
            "tint-color"
          ]
        }
      }
    ]
  }
}

[robinmetral]

If your project isn't using TypeScript, create a jsconfig.json instead of a tsconfig.json.

Sample jsconfig.json (at the root of your project):

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-styled-plugin",
        "lint": {
          "validProperties": [
            "aspect-ratio",
            "elevation",
            "margin-vertical",
            "margin-horizontal",
            "padding-horizontal",
            "padding-vertical",
            "resize-mode",
            "shadow-color",
            "shadow-opacity",
            "shadow-offset",
            "shadow-radius",
            "text-align-vertical",
            "tint-color"
          ]
        }
      }
    ]
  }
}

[GollyJer]

Hey all. This issue was super helpful to fix missing react-native properties. Thanks! 👍

My next question...
Is there a way to say "only show these properties" in the auto-complete. From time to time I find myself accidentally using web properties while in a React Native project. I'd love for the auto-complete to only show valid React Native properties.

I can put the list together but not sure if there's a place to put it. 😃
Is this possible? Thanks.

👉 Equivalent StackOverflow Question

[rayonnunes]

You can also disable the warnings for unknown properties (at your own risk of losing some intellisense) adding in your tsconfig.json:

"compilerOptions": {
    "plugins": [
      {
        "name": "typescript-styled-plugin",
        "lint": {
          "unknownProperties": "ignore" // "ignore" | "warning" | "error"
        }
      }
    ]
}

Referring the official documentation: https://github.com/microsoft/typescript-styled-plugin#unknownproperties

[lcustodio]

Any updates on this?
Typescript + Styled Components + React Native still not working

[ali-soltanii]

This is the list I'm using.

      {
        "name": "typescript-styled-plugin",
        "lint": {
          "validProperties": [
            "shadow-color",
            "shadow-opacity",
            "shadow-offset",
            "shadow-radius",
            "padding-horizontal",
            "padding-vertical",
            "margin-vertical",
            "margin-horizontal",
            "tint-color",
            "aspect-ratio",
            "elevation",
            "include-font-padding",
            "text-align-vertical"
          ]
        }
      }
    ]

[pke]

Been 4 years. Are there any plans to add this to the official distribution config?

[karlhorky]

@mjbvz Ok, since I'm also having this problem with vscode-styled-components.

I'm not sure if I'm doing this contribution correctly, but I opened a PR over here, only for the standard aspect-ratio property:

• Add aspect-ratio as default valid property vscode-css-languageservice#317

[mjbvz]

Closing as this package has been deprecated in favor of the official styled-components/typescript-styled-plugin fork

After updating to that fork, follow up in the styled-components repo if this is still an issue