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

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

CodePudding user response：

React Native View and Text components don't accept className prop, style only.

Check the reference: https://reactnative.dev/docs/text

CodePudding user response：

If you want the same result which you get on react try this:

    <View style={{justifyContent: 'center', alignItems: 'center'}}>
      <Text style={{color: 'red'}}>Test</Text>
    </View>

Or if you want make this cleanier try this with StyleSheet:

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

export default function Navigation() {
  return (
    <View style={styles.someNameToCenterText}>
      <Text style={styles.colorText}>Test</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  someNameToCenterText: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  colorText: {
    color: 'red'
  }
});