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

• <input checked="" disabled="" type="checkbox"> Gif to Animated Webp
• <input checked="" disabled="" type="checkbox"> Animated Webp to Gif

Static

• <input checked="" disabled="" type="checkbox"> Convert from (any of JPG, PNG, WEBP) to (any of JPG, PNG, WEBP )

Configuration

• <input checked="" disabled="" type="checkbox"> Dimension (Height, Width)
• <input checked="" disabled="" type="checkbox"> Scale mode (crop, stretch, fit)
• <input checked="" disabled="" type="checkbox"> 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

• <input checked="" disabled="" type="checkbox"> Android
• <input disabled="" type="checkbox"> iOS

TODO

• <input checked="" disabled="" type="checkbox"> Batch process Static Images
• <input disabled="" type="checkbox"> Batch process Animated Images
• <input disabled="" type="checkbox"> Upscale DownScale options
• <input disabled="" type="checkbox"> Background Color
• <input disabled="" type="checkbox"> 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.