🗻 Resize local images with React Native
Go to file
Florian Rival f3a1cab919 Fix exception when trying to resize a file that can't be open on Android 2015-12-10 17:50:12 +01:00
RNImageResizer Load and resize assets on iOS with proper orientation 2015-12-06 18:04:53 +01:00
RNImageResizer.xcodeproj Add iOS implementation 2015-12-02 22:53:06 +01:00
android Fix exception when trying to resize a file that can't be open on Android 2015-12-10 17:50:12 +01:00
.gitignore Add iOS implementation 2015-12-02 22:53:06 +01:00
LICENSE Add LICENSE 2015-12-02 23:10:16 +01:00
README.md Update documentation for rotation parameter 2015-12-10 17:38:20 +01:00
index.android.js Add optional rotation argument on Android 2015-12-06 18:03:33 +01:00
index.ios.js Initial commit 2015-12-02 22:02:19 +01:00
package.json Update package.json 2015-12-02 23:12:08 +01:00

README.md

React Native Image Resizer

A React Native module that can create scaled versions of local images (also supports the assets library on iOS).

Setup

First, install the package:

npm install react-native-image-resizer

Then, follow those instructions:

iOS

You need to add RNImageResizer.xcodeproj to Libraries and add libRNImageResizer.a to Link Binary With Libraries under Build Phases. More info and screenshots about how to do this is available in the React Native documentation.

Android

Update your gradle files

For react-native >= v0.15, this command will do it automatically:

react-native link react-native-image-resizer

For react-native = v0.14 You will have to update them manually:

In android/settings.gradle, add:

include ':react-native-image-resizer'
project(':react-native-image-resizer').projectDir = new File(settingsDir, '../node_modules/react-native-image-resizer/android')

In android/app/build.gradle add:

dependencies {
  ...
  compile project(':react-native-image-resizer')
}

Register the package into your MainActivity

package com.example;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;

import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

// IMPORT HERE
import fr.bamlab.rnimageresizer.ImageResizerPackage;
// ---

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

    private ReactInstanceManager mReactInstanceManager;
    private ReactRootView mReactRootView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);

        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())

                // REGISTER PACKAGE HERE
                .addPackage(new ImageResizerPackage())
                // ---
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        mReactRootView.startReactApplication(mReactInstanceManager, "example", null);

        setContentView(mReactRootView);
    }

    ...

Usage example

var ImageResizer = require('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...
});

API

promise createResizedImage(path, maxWidth, maxHeight, compressFormat, quality, rotation = 0)

Open the image at the given path and resize it so that it is less than the specified maxWidth and maxHeight (i.e: ratio is preserved). compressFormat is either JPEG, PNG (android only) or WEBP (android only).

quality is a number between 0 and 100, used for the JPEG compression.

rotation is the rotation to apply to the image, in degrees, for android only. On iOS, the resizing is done such that the orientation is always up.

The promise resolves with a string containing the uri of the new file.