.

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.
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)
``sh`
npm install react-native-image-resizer
`js
import ImageResizer, {
resizeStaticImage,
resizeStaticImagesBatch,
resizeAnimatedImage,
} from 'react-native-animmated-image-resizer';
const {Format, Scale} = ImageResizer.getConstants();
// or use directly as ImageResizer.Format.JPEG
`
#### Format
- ImageResizer.Format.JPEGImageResizer.Format.PNG
- ImageResizer.Format.WEBP
- ImageResizer.Format.AWEBP
- (Animated WEBP)ImageResizer.Format.GIF
-
#### Scale
- ImageResizer.Scale.CROPImageResizer.Scale.FIT_CENTER
- ImageResizer.Scale.STRETCH
-
#### Resize Animated Image
`js`
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
`js`
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
`js``
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));
- [x] Android
- [ ] iOS
- [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.