I am having issues with react native and typescript :
"message": "Type '{ name: string; image: string; }' is not assignable to type 'IntrinsicAttributes & ICategoryCardProps & { children?: ReactNode; }'.\n Property 'name' does not exist on type 'IntrinsicAttributes & ICategoryCardProps & { children?: ReactNode; }'.",
this is my Category.tsx file:
import React, { useMemo } from "react";import createStyles from "./Categories.style";import { View , FlatList } from "react-native";import fonts from "@fonts";import { useTheme } from "@react-navigation/native";import Text from "@shared-components/text-wrapper/TextWrapper";import categories from "@services/categories";import CardItemStyle from "../components/card-item/CardItem.style";import { CategoryModel } from "@services/models/category.model";import CategoryCard from "@screens/home/Categories/CategoryCard" interface CategoriesProps {} const Categories: React.FC<CategoriesProps> = () => { const theme = useTheme(); const { colors } = theme; const styles = useMemo(() => createStyles(), []); return (<View style={styles.contentContainer}><Text h4 color={colors.text} fontFamily={fonts.montserrat.bold} style={styles.titleTextStyle}> Explore categories</Text><View><FlatList horizontal ={true} showsHorizontalScrollIndicator ={false} data = {categories} keyExtractor = {(item: CategoryModel)=>item.id} renderItem = {({item})=>(<View style= {{marginRight:10}}><CategoryCard name = {item.name} image = {item.imageUrl}/></View> )} /></View></View> ); }; export default Categories;
this the CategoryCard.tsx file :
import React, { useMemo } from "react";import { View, StyleProp, ViewStyle, Image } from "react-native";import { useTheme } from "@react-navigation/native";import Text from "@shared-components/text-wrapper/TextWrapper";import { CategoryModel } from "@services/models/category.model";import fonts from "@fonts";import createStyles from "@screens/home/Categories/CategoryCard.styles"import RNBounceable from "@freakycoder/react-native-bounceable";type CustomStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>; interface ICategoryCardProps { style?: CustomStyleProp; data: CategoryModel; onPress: () => void; }const CategoryCard: React.FC<ICategoryCardProps> = ({ style, data, onPress }) => { const theme = useTheme(); const { colors } = theme; const styles = useMemo(() => createStyles(theme), [theme]); const { name, imageUrl } = data; const Header = () => (<View style={styles.nameTextStyle}><Text color={colors.text} ellipsizeMode="tail" numberOfLines={1} fontFamily={fonts.montserrat.semiBold}> {name}</Text></View> ); return (<RNBounceable style={[styles.container, style]} onPress={onPress}><Image style={styles.menuImage} source={{ uri: imageUrl[0], }} /><Header /><View style={styles.contentContainer}></View></RNBounceable> );}; export default CategoryCard ;