nativewind: className type error

In my case, I’ve created app.d.ts and added /// <reference types="nativewind/types" /> but I still get typescript error because of className. So, i change the file name app.d.ts to my-app.d.ts and it works.

@binajmen that worked like a charm

tl;dr - create a my-app.d.ts and add the below snippet:

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

Im still getting this typescript error for some reason: Property 'className' does not exist on type 'IntrinsicAttributes & ViewProps & RefAttributes<View>'.

I have a file called app.d.ts with /// <reference types="nativewind/types" /> inside.

I have tried calling it my-app.d.ts, still no luck.

I have restarted TS server, my editor and my machine.

My babel config looks like:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: ['.ts', '.tsx', '.jsx', '.js', '.json'],
        root: ['.'],
        alias: {
          assets: './src/assets',
          components: './src/components',
          contexts: './src/contexts',
          data: './src/data',
          hooks: './src/hooks',
          navigation: './src/navigation',
          screens: './src/screens',
          providers: './src/providers',
          supabase: './src/supabase',
          services: './src/services',
          config: './src/config',
        },
      },
    ],
    'nativewind/babel',
    'react-native-reanimated/plugin',
  ],
};

Anyone see any issues?

I have just fixed it.

I had to put the app.d.ts file into my src folder

If someone is passing by, last recommendation is here: https://www.nativewind.dev/getting-started/typescript

Hi @j3sch, create a new src/tailwindcss-react-native.d.ts and paste import "tailwindcss-react-native/types.d";. See link from docs

Don’t forget to restart your editor. In my case, until I restarted my VScode, the redline was still showing up after adding app.d.ts

If you are using Neovim, what helped is creating a file (eg. src/nativewind.d.ts) and pasting this line.

import "nativewind/types"

No solution here worked for me (Expo w/ typescript mobile app), I finally found out that adding the type in the tsconfig.json works :

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "types": ["nativewind/types"]
  }
}

No solution here worked for me (Expo w/ typescript mobile app), I finally found out that adding the type in the tsconfig.json works :

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "types": ["nativewind/types"]
  }
}

Thank you so much!!! this approach works for me!

Rembember to include app.d.ts to tsconfig.json

{
"include": ["app.d.ts"]
}

Had the same issue in a turborepo/yarn workspace setup and the errors would not shift regardless of whichever variation of location + types definition I tried. Eventually realised the workspace hoisted the nativewind module up into the root directory rather than my React Native app. Excluding it from hoisting so it was colocated with the apps node modules finally sorted this out for me.

Rembember to include app.d.ts to tsconfig.json

{
"include": ["app.d.ts"]
}

this indeed is what i forget to do

No solution here worked for me (Expo w/ typescript mobile app), I finally found out that adding the type in the tsconfig.json works :

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "types": ["nativewind/types"]
  }
}

Thank you so much!!! this approach works for me!

@binajmen that worked like a charm

tl;dr - create a my-app.d.ts and add the below snippet:

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

I named mine app.d.ts and it didn’t work but, my-app.d.ts worked or any other name

None of the above will solve my problem

Here’s my solution

tsconfig.json

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "include": ["**/*", "node_modules/nativewind"]
}

This one was a good old head scratcher… In my pnpm workspace adding “nativewind/types” to my base tsconfig worked fine for my sub-packages but it didn’t work for my main expo app.

To get the expo app to work as well, I needed to update the react-native path in the expo directory’s tsconfig file:

{
  "extends": "@foo/bar/tsconfig-base.json",
  "compilerOptions": {
    "paths": {
      "react-native": [
        "../../node_modules/react-native",
        "../../node_modules/nativewind"
      ]
    }
  }
}

Hints working nicely (including Tailwind).

Hope this helps somebody!

For those who are still facing this issue, create a new app.d.ts file and add a triple-slash directive referencing the types.

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

Reference: https://www.nativewind.dev/getting-started/typescript

@binajmen that worked like a charm tl;dr - create a my-app.d.ts and add the below snippet:

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

I named mine app.d.ts and it didn’t work but, my-app.d.ts worked or any other name

Thank you very much for this, this worked for me too.

Does anyone know why app.d.ts stopped working? My code worked perfectly using app.d.ts until last week, and now naming the file my-app.d.ts, seems to make it work normally.

My team was getting this error because we were passing through all props to a Child Component.

We were able to resolve it when we extended the original Child Components Props using React.ComponentProps<typeof Svg>

export type IconProps = {
    name: string
} & React.ComponentProps<typeof Svg>

export default function Icon ( props: IconProps ) {
    const propValues: IconProps = {
        ...props,
        height: props.height || 24,
        width: props.width || 24,
        viewBox: props.viewBox || '0 0 24 24'
    }
    return (
        <View style={ styles.container }>
            <Svg { ...propValues }>
                { getIconPath( props.name ) }
            </Svg>
        </View>
    )
}

For some reason typescript to work at all, and the tailwind style does apply correctly

root tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  },
  "exclude": ["node_modules"]
}

tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "module": "esnext",
    "strict": true,
    "baseUrl": "./",
    "paths": {
      "@app/*": ["app/*"],
      "@assets/*": ["assets/*"],
      "@config/*": ["config/*"]
    }
  },
  "tscFilesIncludes": ["app/@types"],
  "include": ["app", "my-app.d.ts", "codegen.ts", "app.config.ts"]
}

my-app.d.ts

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

and error is still

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

Perfect, thank you very much