CODEWITHSUNDEEP
typescriptreact-nativeexpotailwind-cssnativewind
A Mehmeto
A Mehmeto

Reputation: 2009

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

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:

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:

Upvotes: 1

Views: 3389

Answers (2)

Mojekwu Tochukwu
Mojekwu Tochukwu

Reputation: 41

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

Upvotes: 4

John Peres
John Peres

Reputation: 21

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

Upvotes: 2

Related Questions