React Native Photo Manipulator

React Native Image Processing API to edit photo programmatically for Android and iOS.

demo.webm

Platform Supported

Getting started

For react native 0.60 and above

$ yarn add react-native-photo-manipulator

(or)

$ npm install react-native-photo-manipulator

For react native 0.59 and below

Please read Get Started Guide

For Expo with development build

$ yarn expo install react-native-photo-manipulator

(or)

$ npx expo install react-native-photo-manipulator

Usage

Import library with

import RNPhotoManipulator from 'react-native-photo-manipulator';

API

• Methods:

  • crop()
  • optimize()
  • flipImage()
  • rotateImage()
  • overlayImage()
  • printText()
  • batch()

• Types:

  • ImageSource
  • PhotoBatchOperations
  • PhotoBatchOverlay
  • PhotoBatchPrintText
  • PhotoBatchFlip
  • PhotoBatchRotate
  • FlipMode
  • RotationMode
  • Point
  • Rect
  • Size
  • TextAlign
  • TextDirection
  • TextOptions

    Method

    Crop and resize

    Crop image with cropRegion and resize to targetSize if specified

Signature

static crop(image: ImageSource, cropRegion: Rect, targetSize?: Size) => Promise<string>

Returns

Promise with image path in cache directory

Example

const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true";
const cropRegion = { x: 5, y: 30, height: 400, width: 250 };
const targetSize = { height: 200, width: 150 };

RNPhotoManipulator.crop(image, cropRegion, targetSize).then(path => {
    console.log(`Result image path: ${path}`);
});

Optimize

Save result image with specified quality between 0 - 100 in jpeg format

Signature

static optimize(image: ImageSource, quality: number) => Promise<string>

Returns

Promise with image path in cache directory

Example

const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true";
const quality = 90;

RNPhotoManipulator.optimize(image, 90).then(path => {
    console.log(`Result image path: ${path}`);
});

Flip Image

Flip image horizontally, vertically or both

Signature

static flipImage(image: ImageSource, mode: FlipMode) => Promise<string>

Returns

Promise with image path in cache directory

Example

const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true";
const mode = FlipMode.Vertical;

RNPhotoManipulator.flipImage(image, mode).then(path => {
    console.log(`Result image path: ${path}`);
});

Rotate Image

Rotate image 90° (90° Clockwise), 180° (Half Rotation) or 270° (90° Counterclockwise)

Signature

static rotateImage(image: ImageSource, mode: RotationMode) => Promise<string>

Returns

Promise with image path in cache directory

Example

const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true";
const mode = RotationMode.R90;

RNPhotoManipulator.rotateImage(image, mode).then(path => {
    console.log(`Result image path: ${path}`);
});

Overlay Image

Overlay image on top of background image

Signature

static overlayImage(image: ImageSource, overlay: ImageSource, position: Point) => Promise<string>

Returns

Promise with image path in cache directory

Example

const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true";
const overlay = "https://www.iconfinder.com/icons/1174949/download/png/128";
const position = { x: 5, y: 20 };

RNPhotoManipulator.overlayImage(image, overlay, position).then(path => {
    console.log(`Result image path: ${path}`);
});

Print Text

Print texts into image

Signature

static printText(image: ImageSource, texts: TextOptions[]) => Promise<string>

Returns

Promise with image path in cache directory

Example

const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true";
const texts = [
    { position: { x: 50, y: 30 }, text: "Text 1", textSize: 30, color: "#000000" },
    { position: { x: 50, y: 30 }, text: "Text 1", textSize: 30, color: "#FFFFFF", thickness: 3 }
];

RNPhotoManipulator.printText(image, texts).then(path => {
    console.log(`Result image path: ${path}`);
});

Batch

Crop, resize and do operations (overlay and printText) on image

Signature

static batch(image: ImageSource, operations: PhotoBatchOperations[], cropRegion: Rect, targetSize?: Size, quality?: number) => Promise<string>

Returns

Promise with image path in cache directory

Example

const image = "https://unsplash.com/photos/qw6qQQyYQpo/download?force=true";
const cropRegion = { x: 5, y: 30, height: 400, width: 250 };
const targetSize = { height: 200, width: 150 };
const operations = [
    { operation: "text", options: { position: { x: 50, y: 30 }, text: "Text 1", textSize: 30, color: "#000000" } },
    { operation: "overlay", overlay: "https://www.iconfinder.com/icons/1174949/download/png/128", position: { x: 5, y: 20 } },
];
const quality = 90;

RNPhotoManipulator.batch(image, operations, cropRegion, targetSize, quality).then(path => {
    console.log(`Result image path: ${path}`);
});

Types

ImageSource

Image resource can be url or require()

PhotoBatchOperations

Represent overlay image, print text or flip operation

PhotoBatchOverlay

Overlay image batch operation

PhotoBatchPrintText

Print text batch operation

PhotoBatchFlip

Flip image batch operation

PhotoBatchRotate

Rotate image batch operation

FlipMode

Enum represent flip Mode

RotationMode

Enum represent rotation Mode

Point

Represent position (x, y) from top-left of image

Rect

Represent area of region

Size

Represent size (width, height) of region or image

TextAlign

Enum represent text align

TextDirection

Enum represent text direction, this will affect coordinate and alignment

TextOptions

Represent attributes of text such as text, color, size, and etc.