How do I cancel an Image.getSize() request in React Native?
I encountered the same problem.What worked for me was wrapping Image.getSize
inside a promise:
export type CancelPromise = ((reason?: Error) => void) | undefined;export type ImageSize = { width: number; height: number };interface ImageSizeOperation { start: () => Promise<ImageSize>; cancel: CancelPromise;}const getImageSize = (uri: string): ImageSizeOperation => { let cancel: CancelPromise; const start = (): Promise<ImageSize> => new Promise<{ width: number; height: number }>((resolve, reject) => { cancel = reject; Image.getSize( uri, (width, height) => { cancel = undefined; resolve({ width, height }); }, error => { reject(error); } ); }); return { start, cancel };};
Then you could use it in your component like this:
const A: React.FC = () => { const [size, setSize] = useState<{width: number, height: number} | undefined>(}); useEffect(() => { let cancel: CancelPromise; const sideEffect = async (): Promise<void> => { try { const operation = getImageSize(uri); cancel = operation.cancel; const imageSize = await operation.start(); setSize(imageSize); } catch(error) { if (__DEV__) console.warn(error); } } sideEffect(); return () => { if (cancel) { cancel(); } } });}