React native typescript giving me an TS error when using "className"

Question

used React for a while now but new to React Native.

I am using tailwind with https://tailwindcss-react-native.vercel.app/installation

import { View, Text } from "react-native";
import React from "react";

export default function Navigation() {
  return (
    <View className="grid h-screen w-screen place-items-center">
      <Text className="text-red-800">Test</Text>
    </View>
  );
}

Tailwind works, the text is red, however I get TS errors under the classnames above ^^

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> & Readonly<{ children?: ReactNode; }>'.
      Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps> & Readonly<{ children?: ReactNode; }>'.
  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> & Readonly<{ children?: ReactNode; }>'.
Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Text> & Readonly<TextProps> & Readonly<{ children?: ReactNode; }>'.ts(2769)

I've followed the expo typescript setup, my tsconfig looks like:

{
  "compilerOptions": {},
  "extends": "expo/tsconfig.base"
}

Answer 1

Create a file "global.d.ts" in the root level of the app and paste this line

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

After including this file, the TypeScript errors will disappear, and the "className" attribute works perfectly fine.

Answer 2

I have experienced the same issue, and the simplest fix to include the types is to create a new app.d.ts file and add a triple-slash directive referencing the types like this:

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

If this does not fix your problem, to get rid of red lines, you can add @ts-nocheck on the top of the file. (Disclaimer, this solution does not solve the problem, just get rids of the warnings, by disabling TS check for specific file)