🗻 Resize local images with React Native
Go to file
Florian Rival 50ea225665 Add links to other BAM open-source repositories 2016-07-06 20:35:06 +02:00
android Add outputPath to options (#16) 2016-06-30 19:07:42 +02:00
example Bump version 2016-05-16 13:09:51 +02:00
ios Add outputPath to options (#16) 2016-06-30 19:07:42 +02:00
.gitignore Add iOS implementation 2015-12-02 22:53:06 +01:00
.npmignore Add example to npmignore (#18) 2016-06-30 19:08:05 +02:00
LICENSE Add LICENSE 2015-12-02 23:10:16 +01:00
README.md Add links to other BAM open-source repositories 2016-07-06 20:35:06 +02:00
index.android.js Add outputPath to options (#16) 2016-06-30 19:07:42 +02:00
index.ios.js Add outputPath to options (#16) 2016-06-30 19:07:42 +02:00
package.json Bump version 2016-06-30 19:11:50 +02: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 --save

Automatic installation (iOS and Android)

Use rnpm:

npm install rnpm -g
rnpm link

Manual installation for 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.

Manual installation for 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

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.
});

Sample app

A basic, sample app is available in the example folder. It uses the module to resize a photo from the Camera Roll.

API

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

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

Option Description
path Path of image
maxWidth Image max width (ratio is preserved)
maxHeight Image max height (ratio is preserved)
compressFormat Can be either JPEG, PNG (android only) or WEBP (android only).
quality A number between 0 and 100. Used for the JPEG compression.
rotation Rotation to apply to the image, in degrees, for android only. On iOS, the resizing is done such that the orientation is always up.
outputPath The resized image path. If null, resized image will be stored in cache folder. To set outputPath make sure to add option for rotation too (if no rotation is needed, just set it to 0).

Other open-source modules by the folks at BAM