Can someone help me understand why I can call className in jsx files but not tsx files?
The error message displayed is:
No overload matches this call. Overload 1 of 2, '(props: ViewProps): View', gave the following error. Type '{ children: Element[]; className: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. 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 & Readonly'. Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.ts(2769)
import { Tabs, Redirect } from "expo-router";
import { icons } from "../../constants";
// Defining TabIcons with correct types
interface TabIconProps {
icon: ImageSourcePropType;
color: string;
name: string;
focused: boolean;
}
const TabIcon: React.FC<TabIconProps> = ({ icon, color, name, focused }) => {
return (
<View className="flex items-center justify-center gap-2">
<Image
source={icon}
resizeMode="contain"
tintColor={color}
className="w-6 h-6"
/>
<Text
className={`${focused ? "font-psemibold" : "font-pregular"} text-xs`}
style={{ color: color }}
>
{name}
</Text>
</View>
);
};
const TabsLayout = () => {
return (
<>
<Tabs screenOptions={{ tabBarShowLable: false }}>
<Tabs.Screen
name="home"
options={{
title: "Home",
headerShown: false,
tabBarIcon: ({ color, focused }) => (
<TabIcon
icon={icons.home}
color={color}
name={"Home"}
focused={focused}
/>
),
}}
/>
</Tabs>
</>
);
};
export default TabsLayout;
This is my tailwind.config file:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./app/**/*.{tsx,js,jsx,ts}", "./components/**/*.{tsx,js,jsx,ts}"],
theme: {
extend: {
colors: {
primary: "#161622",
secondary: {
DEFAULT: "#FF9C01",
100: "#FF9001",
200: "#FF8E01",
},
black: {
DEFAULT: "#000",
100: "#1E1E2D",
200: "#232533",
},
gray: {
100: "#CDCDE0",
},
},
fontFamily: {
pthin: ["Poppins-Thin", "sans-serif"],
pextralight: ["Poppins-ExtraLight", "sans-serif"],
plight: ["Poppins-Light", "sans-serif"],
pregular: ["Poppins-Regular", "sans-serif"],
pmedium: ["Poppins-Medium", "sans-serif"],
psemibold: ["Poppins-SemiBold", "sans-serif"],
pbold: ["Poppins-Bold", "sans-serif"],
pextrabold: ["Poppins-ExtraBold", "sans-serif"],
pblack: ["Poppins-Black", "sans-serif"],
},
},
},
plugins: [],
};