Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ScrollView> & Readonly<{ children?: ReactNode; }> & Readonly<ScrollViewProps>'.

[Michael Jennings]

I get a lot of errors like this:

ERROR in C:\thisproj\src\App.tsx
./src/App.tsx
[tsl] ERROR in C:\thisproj\src\App.tsx(12,21)
TS2339: Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & Readonly'.

For every component that has a className attribute on it. Am I doing something wrong?

[Krister Kari]

Thanks @michael-jennings, Are you running the example app?

From the error it looks like the typings don't have the className property.

So the types are for some reason using the normal React Native Typescript typings and not the typings that you need if you are using CSS modules.

[Krister Kari]

here's what is needed for the Typescript typings to be correct:
https://github.com/kristerkari/react-native-css-modules-with-typescript-example/blob/master/package.json#L30

[Krister Kari]

I assume that this is resolved. Let's reopen if something new comes up.

[heidy]

I have the same question "Property 'className' does not exist on type 'IntrinsicAttributes'..." what should I do ?

[Georgi Kolev]

Almost an year later, same issue.

[Floris de Haan]

If you're forwarding the className attribute to the child div you also need to specify the types for this.

Example:

type ComponentProps = React.PropsWithChildren<{
    index: any;
    value: any;
}> & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

You can see the type of the html object if you hover over the the dom element in your IDE.

[Breyner Parada]

I had the same issue. This issue was generated when I implemented tailwind (nativewind) in my React Native Typescript project.
I resolved it by creating a file in the project root called "app.d.ts", I think the file name doesn't matter just make sure the file has the extension "d.ts" and be on the root.

Inside it add the following code
/// <reference types="nativewind/types" />

For me this solved the issue. I hope the same for you

[Abhay Mittal]

Yes, it's not showing the error now, but the CSS is not working. Is it working in your case?

[Breyner Parada]

Yes, the styles should be working. Actually when I start to write "className" property in any react native component my VSCode (in my case) autocomplete me the property.
If don't work in your case make sure the configuration is ok
Link to guide https://www.nativewind.dev/quick-starts/react-native-cli

In my case I use RN Cli but there are configuration to Expo and others more.

[Abror]

I had the same issue. This issue was generated when I implemented tailwind (nativewind) in my React Native Typescript project. I resolved it by creating a file in the project root called "app.d.ts", I think the file name doesn't matter just make sure the file has the extension "d.ts" and be on the root.

Inside it add the following code /// <reference types="nativewind/types" />

For me this solved the issue. I hope the same for you

If app.d.ts didn't work, try rename it to global.d.ts

[Hyeongjin Yong]

In my case, I created an app.d.ts file in the project root and added it to the include list in tsconfig.json.

[Saravanapriyan]

Adding include only to tsconfig worked for us. Adding .d.ts file was not needed.
We are developing using astro, react. Build with Docker.

{
	"extends": "astro/tsconfigs/base",
	"compilerOptions": {
		"strictNullChecks": true,
		"jsx": "react-jsx",
		"jsxImportSource": "react",
		"verbatimModuleSyntax": false
	},
	"include": ["nativewind/types"]
}