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 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