Whenever your app requires the user to take a picture with the camera, or from the camera roll, the image is so heavy that it takes ages to upload it on the server. Our package helps you with this situation by allowing image resizing directly from React Native.

‍

Installing and using react-native-image-resizer

To resize local image files, we created react-native-image-resizer. Give it the path of an image and new dimensions and it will generate a new image with these dimensions. You can use an image from the camera roll or a ++code>base64++/code>encoded image. Here's how you can use it.

Install the package with npm:

++pre>++code>npm install --save react-native-image-resizer
react-native link react-native-image-resizer
++/code>++/pre>

Resizing an image is then really simple:

++pre>++code>import ImageResizer from 'react-native-image-resizer';

ImageResizer.createResizedImage(imageUri, newWidth, newHeight, compressFormat, quality, rotation, outputPath).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.
});
++/code>++/pre>

iOS and Android are both supported, and it outputs either png or jpeg files.

imageUri is the path to the image to be resized. The module support both local images and photos from the photo library (as the ones given by CameraRoll API from React Native). If you want your user to be able to take photos, be sure to check react-native-camera!

‍

Contributing to react-native-image-resizer

We already received a lot of pull requests fixing bugs or adding new features. For example, base64 support for images or updates to support latest React Native versions were done by the community. Thanks a lot to the contributors!

React Native ecosystem is growing and getting better everyday and we are thrilled to be part of it! If you want to improve the module, please do not hesitate to open a pull request. And if you are unsure about something, open an issue!