I have a component that will show an Image, It will receive an url and style.
interface FastImageProps { styleComponent: StyleProp<ImageStyle> | StyleProp<ImageStyle>[]; url: string;}export const FastImageComponent: React.FC<FastImageProps> = ({ styleComponent, url,}: any) => { return (<FastImage style={styleComponent} source={{ uri: `WEB_PATH/${url}`, priority: FastImage.priority.normal, cache: FastImage.cacheControl.immutable, }} resizeMode={FastImage.resizeMode.cover} /> );};
it is working properly, but the component is using any. if i remove the any, the style will have a red line and show this
No overload matches this call. Overload 1 of 2, '(props: FastImageProps, context?: any): ReactElement<any, any> | Component<FastImageProps, any, any> | null', gave the following error. Type 'false | ImageStyle | RegisteredStyle<ImageStyle> | RecursiveArray<false | ImageStyle | RegisteredStyle<ImageStyle> | null | undefined> | StyleProp<...>[] | null | undefined' is not assignable to type 'StyleProp<ImageStyle>'. Type 'ImageStyle' is not assignable to type 'StyleProp<ImageStyle>'. Type 'import("PATH/node_modules/@types/react-native/index").ImageStyle' is not assignable to type 'import("PATH/node_modules/react-native-fast-image/dist/index").ImageStyle'. Types of property 'backgroundColor' are incompatible. Type 'string | unique symbol | undefined' is not assignable to type 'string | undefined'. Type 'unique symbol' is not assignable to type 'string | undefined'. Overload 2 of 2, '(props: PropsWithChildren<FastImageProps>, context?: any): ReactElement<any, any> | Component<FastImageProps, any, any> | null', gave the following error. Type 'false | ImageStyle | RegisteredStyle<ImageStyle> | RecursiveArray<false | ImageStyle | RegisteredStyle<ImageStyle> | null | undefined> | StyleProp<...>[] | null | undefined' is not assignable to type 'StyleProp<ImageStyle>'. Type 'ImageStyle' is not assignable to type 'StyleProp<ImageStyle>'. Type 'import("PATH/node_modules/@types/react-native/index").ImageStyle' is not assignable to type 'import("PATH/node_modules/react-native-fast-image/dist/index").ImageStyle'.ts(2769)index.d.ts(77, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & FastImageProps'index.d.ts(77, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & FastImageProps & { children?: ReactNode; }'
here is how i call my component
<FastImageComponent styleComponent={{width: sizeWidth(20), height: sizeWidth(20)}} url={imageUrl}/>
can anybody explain to me why this is happening? and What changes do i need to make the component not using any.