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

Asked
Active3 hr before
Viewed126 times

7 Answers

nativeimagecancelreactrequest
90%

However, sometimes the component unmounts before the getSize() request has returned, and this leads to the following error when setState() is called:,I'm using React Native's Image.getSize(uri, (width, height) => {}) method to get the dimensions of a remote image and set it to a component's state with setState():,Is there any other way that this can be achieved, given that getSize() does not provide a way to cancel a pending request?

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 };
};
load more v
88%

Abort prefetch request.,abortPrefetch() Android,number - opaque type returned by something like require('./image.jpg').

dependencies { // If your app supports Android versions before Ice Cream Sandwich (API level 14)  implementation 'com.facebook.fresco:animated-base-support:1.3.0'
   // For animated GIF support  implementation 'com.facebook.fresco:animated-gif:2.0.0'
   // For WebP support, including animated WebP  implementation 'com.facebook.fresco:animated-webp:2.1.0'  implementation 'com.facebook.fresco:webpsupport:2.0.0'
   // For WebP support, without animations  implementation 'com.facebook.fresco:webpsupport:2.0.0'}
load more v
72%

test('Logo renders correctly', done => {
  Image.getSize('../assets/img/kalendFullLogo.png', (width, height) => {
   const logo = renderer.create(<Image style={{height, width}} />).toJSON();
   expect(logo).toMatchSnapshot();
   done();
  });
});
load more v
65%

Pretag
 Pretag team - issue, fix, solve, resolve
75%

In React Native, you would specify the uri in the source prop of the Image component and also provide the size if needed.,React Native provides the Fetch API for networking—you make a fetch request and then receive the response to get the data.,In React Native, you use the setItem and getItem functions of the AsyncStorage component to store and retrieve data that is persistent and global to the app.

// JavaScript
function startHere() {
   // Can be used as entry point
}
load more v
40%

React Native includes a few options that enable cross-platform apps to select an image from a user's mobile phone gallery or camera and perform further actions on it. One module that does that is called react-native-image-picker.,This module is maintained by the React Native community, which is one reason why I highly recommend that you use this module. It uses native UI to select a photo or a video from the mobile phone's library or the camera of that device.,In this section, let's create a handler method that is going to allow the user to pick an image. To start, make sure you update the import statements by importing core components from React Native such as TouchableOpacity and Alert. Also, import ImagePicker from the react-native-image-picker library.

Pretag
 Pretag team - issue, fix, solve, resolve
22%

npm i react-native-fast-image,Gitgithub.com/DylanVann/react-native-fast-image,github.com/DylanVann/react-native-fast-image#readme

yarn add react - native - fast - image
cd ios && pod install
load more v

Other "native-image" queries related to "How do I cancel an Image.getSize() request in React Native?"