Skip to main content
  1. All Posts/

react-native-image-tools

Tools HTML

Unfortunately Adobe has discontinued development and support of the Image Editor UI this project is discontinued.

react-native-image-tools

Install instructions here.
An example app is here.

API

RNImageTools.openEditor(options)

Opens the Adobe Image Editor. Returns a promise which when resolved contains a uri to the output image, or null if editing was cancelled.
options parameter:

name
description
default value
type

imageUri
the input image
n/a

string (see below)

outputFormat
the image type, must correspond to the input image type (generating PNG from JPEG or vider-vesa is not supported)
JPEG

string (either ‘JPEG’ or ‘PNG’)

quality
representing the JPEG compression % (Ignored for PNG)
80

integer (a value between 0 and 100)

preserveMetadata (iOS only)
copies image metadata (exif tags) from the input image to the output image
true
boolean

saveTo
determines where the output image will be saved
photos

string (‘photos’ or ‘file’)

Supported imageUri formats include:

  • path e.g. /foo/bar/image.jpeg
  • file url e.g. file:///foo/bar/image.jpeg
  • url e.g. http://foo.com/bar/image.jpeg
  • asset-uri (iOS only) e.g. assets-library://asset/asset.JPG?id=foo&EXT=JPG
  • content-uri (android only) e.g. content://media/external/images/foo/bar/JPEG
import RNImageTools from "react-native-image-tools";

    ...    

    try {
      const uri = await RNImageTools.openEditor({
        imageUri,
        outputFormat,
        quality,
        preserveMetadata,
        saveTo
      });
    } catch (e) {
      console.warn("error", e);
    }

RNImageTools.selectImage(options)

Opens the native image picker dialog. Returns a promise which when resolved returns an object containing the uri to the chosen image as well as some other useful information, or null if cancelled.
options parameter:

name
description
default value
type

title
optional title (android only)
n/a
string

import RNImageTools from "react-native-image-tools";

    ...    

    try {
      const uri = await RNImageTools.selectImage({title});
    } catch (e) {
      console.warn("error", e);
    }

RNImageTools.imageMetadata(imageUri)

Returns a promise which when resolved returns object containing the image metadata.

import RNImageTools from "react-native-image-tools";

    ...    

    try {
      const metadata = await RNImageTools.imageMetadata(imageUri);
    } catch (e) {
      console.warn("error", e);
    }

Customizing

since i dont have much time to make the costumization work from js method. here some of configuration that u need to add / change in order to customize the image editor
Fork this project, then change some of file bellow

// react-native-image-tools/android/src/main/java/com/pomocorp/rnimagetools/RNUmageToolsModule.java


AdobeImageIntent.Builder builder = new AdobeImageIntent.Builder(reactContext)
    .setData(imageUri)
    .withToolList(new ToolsFactory.Tools[]{
         // Just Comment or remove anything u dont need
         CROP,
         ORIENTATION,
         ENHANCE,
         TEXT,
         DRAW,
         MEME,
         FOCUS,
         VIGNETTE,
         SHARPNESS,
         BLUR,
         COLOR,
         EFFECTS,
         ADJUST,
         PERSPECTIVE,
         REDEYE,
         WHITEN,
         BLEMISH,
         SPLASH,
         LIGHTING,
         OVERLAYS,
         FRAMES,
         STICKERS,
    })
    ....
//react-native-image-tools/ios/RNImageTools.xcodeproj/RNImageTools.m

- (void) sendToEditor:(UIImage*)image {
    // Just Comment or remove anything u dont need
    [AdobeImageEditorCustomization setToolOrder:@[
        kAdobeImageEditorEnhance,        /* Enhance */
        kAdobeImageEditorEffects,        /* Effects */
        kAdobeImageEditorStickers,       /* Stickers */
        kAdobeImageEditorOrientation,    /* Orientation */
        kAdobeImageEditorCrop,           /* Crop */
        kAdobeImageEditorColorAdjust,    /* Color */
        kAdobeImageEditorLightingAdjust, /* Lighting */
        kAdobeImageEditorSharpness,      /* Sharpness */
        kAdobeImageEditorDraw,           /* Draw */
        kAdobeImageEditorText,           /* Text */
        kAdobeImageEditorRedeye,         /* Redeye */
        kAdobeImageEditorWhiten,         /* Whiten */
        kAdobeImageEditorBlemish,        /* Blemish */
        kAdobeImageEditorBlur,           /* Blur */
        kAdobeImageEditorMeme,           /* Meme */
        kAdobeImageEditorFrames,         /* Frames */
        kAdobeImageEditorFocus,          /* TiltShift */
        kAdobeImageEditorSplash,         /* ColorSplash */
        kAdobeImageEditorOverlay,        /* Overlay */
        kAdobeImageEditorVignette        /* Vignette */
    ]];
    ....
}
"dependencies": {
    ....
    "react-native-image-tools": "git+https://github.com/<your-git-username>/react-native-image-tools.git",
    ....
}