react-native-animmated-image-resizer

React Native Animated Image Resizer

A simple and efficient React Native library for resizing animated and static images. This library allows you to resize images with various options, including format conversion, quality adjustments, and scaling modes. It is particularly useful for optimizing image sizes and dimensions in your React Native applications.

Supported Platforms

Animated

• [x] Gif to Animated Webp
• [x] Animated Webp to Gif

Static

• [x] Convert from (any of JPG, PNG, WEBP) to (any of JPG, PNG, WEBP )

Configuration

• [x] Dimension (Height, Width)
• [x] Scale mode (crop, stretch, fit)
• [x] Quality (0-100)

Installation

npm install react-native-image-resizer

Usage

Import

import ImageResizer, {
  resizeStaticImage, 
  resizeStaticImagesBatch, 
  resizeAnimatedImage,
} from 'react-native-animmated-image-resizer';

const {Format, Scale} = ImageResizer.getConstants();
// or use directly as ImageResizer.Format.JPEG

Constants

Format

• ImageResizer.Format.JPEG
• ImageResizer.Format.PNG
• ImageResizer.Format.WEBP
• ImageResizer.Format.AWEBP (Animated WEBP)
• ImageResizer.Format.GIF

Scale

• ImageResizer.Scale.CROP
• ImageResizer.Scale.FIT_CENTER
• ImageResizer.Scale.STRETCH

Example

Resize Animated Image

resizeAnimatedImage(imageUri, {
  height: 512,
  width: 512,
  quality: 50,
  mode: ImageResizer.Scale.FIT_CENTER,
  outFormat: ImageResizer.Format.AWEBP // or ImageResizer.Format.GIF
})
  .then(path => console.log(path)) // new file path
  .catch(error => console.log(error));

Resize Static Image

resizeStaticImage(imageUri, {
  height: 100,
  width: 100,
  quality: 70,
  mode: ImageResizer.Scale.FIT_CENTER,
  outFormat: ImageResizer.Format.WEBP
})
  .then(path => console.log(path)) // new file path
  .catch(error => console.log(error));

Resize Static Images Batch

resizeStaticImagesBatch(
  [imageUri, imageUri, imageUri, imageUri],
  {
    height: 100,
    width: 100,
    quality: 70,
    mode: ImageResizer.Scale.CROP,
    outFormat: ImageResizer.Format.PNG
  }
)
  .then(paths => console.log(paths)) // new file paths as an array
  .catch(error => console.log(error));

Supported Platforms

• [x] Android
• [ ] iOS

TODO

• [x] Batch process Static Images
• [ ] Batch process Animated Images
• [ ] Upscale DownScale options
• [ ] Background Color
• [ ] APNG Format Support

Feel free to customize the options according to your requirements. This library aims to provide a straightforward interface for resizing images in React Native applications, with Android support marked.