TypeScript Error with NativeWind in React Native: "No overload matches this call"

Question

I'm working on a React Native project using NativeWind for Tailwind CSS support. I've followed the NativeWind documentation for TypeScript integration, but I'm still encountering a TypeScript error related to the className prop.

Error Message:

TS2769: 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>'

Project Setup:

React Native Version: 0.72.6 NativeWind Version: 2.0.11 TypeScript Version: 5.3.3 Expo SDK Version: 49.0.15 I have set up my tsconfig.json and app.d.ts as per the NativeWind documentation:

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "plugins": [{ "name": "nativewind/typescript-plugin" }]
  },
  "exclude": ["node_modules"],
  "extends": ["expo/tsconfig.base", "@tsconfig/react-native/tsconfig.json"]
}

app.d.ts:

/// <reference types="nativewind/types" />

Attempted Solutions:

• Reinstalled node modules and cleared cache.
• Restarted the TypeScript server and development environment.
• Checked for the correct version compatibility among NativeWind, React Native, TypeScript, and Expo.

Despite these efforts, the TypeScript error persists.

It appears to be an issue with TypeScript not recognizing nor the className nor the style prop added by NativeWind on React Native components. This prop is essential for using Tailwind CSS classes in the project.

Questions:

• Has anyone else encountered this TypeScript error with NativeWind in a React Native project?
• Are there additional steps or configurations required for TypeScript to recognize the className prop in React Native components when using NativeWind?
• Could this be a version compatibility issue or a bug in one of the libraries?

Answer 1

I came across the same problem few days ago, I just solved mine now.

Here is what you do: in your app folder in the expo (that is where you have the assets folder, constants, components e.t.c.) you make a a file named nativewind-env.d.ts.

Then, paste this line inside the file:

/// <reference types="nativewind/types" /> 

it should stop the error message your getting, make you to note the file structure, I will give an image of mine, as well as the code

This shows the code your supposed to paste

This shows the place where the nativewind-env.d.ts file you create is supposed to be

if my explanation is still not clear, I will refer you to the docs https://www.nativewind.dev/getting-started/typescript

Answer 2

I came across the same problem two weeks ago. Typescript is causing that error for some unknown reason.

Change app.d.ts file to another name like eg. myapp.d.ts and it should work.

This problem is also detailed on nativewind github repo.

https://github.com/marklawlor/nativewind/issues/77

Hope this helps