Support for React-Native specific properties

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?

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

Matt Bierner (@mjbvz)

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

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

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.

Any news on this ?

Donghua Li (@lidonghua)

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

Priit Kallas (@kallaspriit)

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

Priit Kallas (@kallaspriit)

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

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

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

Could someone please submit a PR that documents validProperties

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"
          ]
        }
      }
    ]
  }
}

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"
          ]
        }
      }
    ]
  }
}

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

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

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

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"
          ]
        }
      }
    ]

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

Matt Bierner (@mjbvz)

Matt Bierner (@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

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

Navigation Menu

Repository navigation

Support for React-Native specific properties #58

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Support for React-Native specific properties #58

Description

Activity

mjbvz commented on Oct 29, 2018

alvincrespo commented on Nov 6, 2018

mjbvz commented on Nov 7, 2018

lidonghua commented on Dec 6, 2018

ScreamZ commented on Feb 14, 2019

kallaspriit commented on Feb 19, 2019

ScreamZ commented on Feb 19, 2019

DriesVS commented on Mar 11, 2019

sregg commented on Apr 23, 2019

dimaip commented on Oct 4, 2019

mjbvz commented on Oct 4, 2019

arnaudambro commented on Oct 17, 2019

robinmetral commented on Jan 6, 2020

GollyJer commented on Jun 30, 2020

rayonnunes commented on Nov 24, 2020

lcustodio commented on Mar 29, 2022

ali-soltanii commented on Sep 8, 2022

pke commented on Nov 7, 2022

karlhorky commented on Nov 21, 2022

mjbvz commented on Apr 4, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions