How do I cancel an Image.getSize() request in React Native? How do I cancel an Image.getSize() request in React Native? reactjs reactjs

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();       }    }  });}