I'd like to wrap the image component of react-native. However, an error message appears saying that 'uri' Property does not exist. Why does this happen?
import React from 'react';import { Image as DefaultImage, ImageProps } from 'react-native';import { PromiseFn, useAsync } from 'react-async';type ImageSize = { width: number; height: number;};const getImageSize = (uri: string) => { return new Promise<ImageSize>((resolve, reject) => { DefaultImage.getSize( uri, (width, height) => { resolve({ width, height }); }, (error) => { reject(error); } ); });};const promiseFn: PromiseFn<ImageSize> = async ({ uri }) => await getImageSize(uri);export function Image(props: ImageProps) { const { source } = props; const { data, error, isPending } = useAsync<ImageSize>({ promiseFn: promiseFn, uri: source.uri, // Property 'uri' does not exist on type 'ImageSourcePropType'. // Property 'uri' does not exist on type 'number'.ts(2339) }); return (<DefaultImage style={[{ width: data?.width, height: data?.height }, props.style]} {...props} /> );}
I tried a different method, but there's another error.
const isImageURISource = ( source: ImageURISource | ImageURISource[] | ImageRequireSource) => { if ('uri' in source) { return source; // The right-hand side of an 'in' expression must be of type 'any', an object type or a type parameter.ts(2361) }};