Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to solve this issue in react-native Typescript?

$
0
0

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 ;

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>