Search code examples
imagecompressionreact-native

How to optimise an Image in React Native


Photos captured via camera are too large for efficient upload and download in React native.

Is there an api or library to compress a PNG image file in React Native?


Solution

  • https://github.com/bamlab/react-native-image-resizer provides an API to resize local images.

    It allows you to specify:

    • Max dimensions (whilst preserving aspect ratio) and;
    • Output quality (for JPEG only)

    API

    import ImageResizer from 'react-native-image-resizer';
    
    ImageResizer.createResizedImage(
      imageUri,
      newWidth,
      newHeight,
      compressFormat,
      quality,
    )
      .then(resizedImageUri => {
        // resizeImageUri is the URI of the new image that can now be displayed, uploaded...
      })
      .catch(err => {
        // Oops, something went wrong. Check that the filename is correct and
        // inspect err to get more details.
      });