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

Viewed 569

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"
}
2 Answers

By default, the tailwindcss-react-native quick start setup does not include support for TypeScript. However, the docs mention how to add it:

Create a file (eg. src/tailwindcss-react-native.d.ts) and paste this line

import "tailwindcss-react-native/types.d";

After including this file, the TypeScript errors will disappear.

Related