[FIXED] How can I hide className error on react native typescript?

Issue

I'm using react-native-css-transformer for expo. when I'm using a js file it works. but if I change js to tsx I get an error on className. but it works how can I hide/remove this error?

No overload matches this call.
  Overload 1 of 2, '(props: TextProps | Readonly<TextProps>): Text', gave the following error.
    Type '{ children: string; className: any; style: { fontSize: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Text> & Readonly<TextProps>'.
      Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Text> & Readonly<TextProps>'.

const Test = () => {
    return (
        <View>
            <Text className={styles.Container} style={{ fontSize: 18 }}>
                TEST
            </Text>
        </View>
    );
};

Solution

Looking at the Github repo for react-native-css-transformer, it looks as though you have to install another of the author's libraries:

https://github.com/kristerkari/react-native-css-modules

The README says: "📦 Supports Typescript with React Native type definitions that add support for React Native CSS modules and CSS, Sass, LESS, PostCSS, or Stylus transformers that automatically create typings for your CSS files."

However, since the library you already installed transforms the CSS on or before import, you can also just use the style prop instead of className:

            <Text style={[styles.Container, { fontSize: 18 }]>
                TEST
            </Text>

This will do the exact same thing and not require additional library support.

Answered By - Abe
Answer Checked By - - Dawn Plyler (ReactFix Volunteer)