How to get autocomplete in VSCode for className?

[SelfDevTV]

Hi guys,

about to try this library in a new project. I use expo fresh install and installed nativewind acoording to the expo docs.
It works but the problem I have now is that className is not an attribute on react native components (View, Text etc).

How to get this functionality back, so it autocompletes when I write class... etc? I have the tailwind VSCOde plugin installed and autocomplete for the classnames works fine but the attribute className itself won't autocomplete as in normal react.

If I use it with styled then it will autocomplete since Nativewind injects it I think. But I thought I dont have to use sytled since the babel plugin is there for right?

Any suggestions?

Thx Geralt

[marklawlor]

It works but the problem I have now is that className is not an attribute on react native components (View, Text etc).

Follow the Typescript setup instructions https://www.nativewind.dev/getting-started/typescript

Nativewind injects it I think

NativeWind relies on the official Tailwind plugins for editor support. The only additional setup we provide is the extra Typescript types for React Native.

[jtwigg]

@marklawlor I'm still getting this error even after including the requisite

~app.d.ts
/// <reference types="nativewind/types" />

I mostly followed these instruction https://geekyants.com/blog/using-tailwind-css-in-react-native/
which seem identical.

NOTE: The code still compiles and works. I just cant for the life of me get rid of the reporting of the error. Maybe its the linter?

No overload matches this call.
  Overload 1 of 2, '(props: ViewProps | Readonly<ViewProps>): View', gave the following error.
    Type '{ children: Element; className: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
      Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
  Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
    Type '{ children: Element; className: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
      Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.ts(2769)

[jefe-spain]

Hi @marklawlor @jtwigg @austin-triiistudio ; did you solve this issue? It's happening to me and It came as just random, I did not have this errores before. It might be something to do with typescript itself?

[jefe-spain]

I was able to eliminate the linter error message by creating a new typed file d.ts and copying/pasting the content from nativewind/types into it. However, I'm still curious about what might have caused the issue. 🤔

[dubbajubba]

@jefe-spain, that's great! I deleted app.d.ts, and recreated it. Then restarted VS Code. That did it for me! Still not sure why it happened in the first place...

[dubbajubba]

@jefe-spain @marklawlor, opened VS code today and I am getting the error again. This is getting frustrating. I love the ability to use tailwind classes in React Native, but may have to revert back to React Native Stylesheet. Would love to hear if you guys have any further suggestions on why this keeps happening.

[dubbajubba]

@marklawlor, first off, thanks for bringing the amazing world of TailwindCSS to React Native!

I am having this same issue described here. The problem for me is that it just randomly started happening. My project was set up properly, and I have not had this problem for the past 6 months. It's been about a month since I previously worked on my React Native project, and when I opened up the project, I am now getting the error.

If I clone the repo to another computer, I do not receive the type error. The project is set up properly according to your TypeScript documentation https://www.nativewind.dev/getting-started/typescript, and I can confirm this because I do not have the issue with my repo on another computer.

It is very strange to me that this randomly started happening. The only thing I can think of is an environment change in my VS Code editor. I use NVM to manage my node modules, but I have tried switching between the node environments I use, deleting /node_modules and package-lock.json, re-running npm install and restarting my TypeScript server. Nothing I do seems to help.

Do you have any suggestions as to why this could be occurring?

If you would like me to open a new topic for my issue, please let me know, but this seemed like an appropriate place to ask my question.