React Native Photo Manipulator

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

demo.webm

Platform Supported

Framework	Android	iOS
React Native	✔️	✔️
Expo with development build	✔️	✔️
Expo Go	❌	❌

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:
Types:

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>

Parameter	Type	Required	Description
`image`	`ImageSource`	Yes	The image
`cropRegion`	`Rect`	Yes	The region of image to be cropped
`targetSize`	`Size`	No	The target size of result image
`mimeType`	'image/jpeg', 'image/png'	No	Output file format

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>

Parameter	Type	Required	Description
`image`	`ImageSource`	Yes	The image
`quality`	number	Yes	The quality of result image between `0 - 100`

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>

Parameter	Type	Required	Description
`image`	`ImageSource`	Yes	The background image
`mode`	`FlipMode`	Yes	Flip mode Horizontal, Vertical or Both
`mimeType`	'image/jpeg', 'image/png'	No	Output file format

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>

Parameter	Type	Required	Description
`image`	`ImageSource`	Yes	The background image
`mode`	`RotationMode`	Yes	Rotation mode 90° (90° Clockwise), 180° (Half Rotation) or 270° (90° Counterclockwise)
`mimeType`	'image/jpeg', 'image/png'	No	Output file format

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>

Parameter	Type	Required	Description
`image`	`ImageSource`	Yes	The background image
`overlay`	`ImageSource`	Yes	The overlay image
`position`	`Point`	Yes	The position of overlay image in background image
`mimeType`	'image/jpeg', 'image/png'	No	Output file format

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>

Parameter	Type	Required	Description
`image`	`ImageSource`	Yes	The image
`texts`	`TextOptions[]`	Yes	The list of text operations
`mimeType`	'image/jpeg', 'image/png'	No	Output file format

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>

Parameter	Type	Required	Description
`image`	`ImageSource`	Yes	The image
`operations`	`PhotoBatchOperations[]`	Yes	The list of operations
`cropRegion`	`Rect`	Yes	The region of image to be cropped
`targetSize`	`Size`	No	The target size of result image
`quality`	number	No	The quality of result image between `0 - 100`
`mimeType`	'image/jpeg', 'image/png'	No	Output file format

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()

Type	Description
number	Image from require('path/to/image')
string	Image from url supports (file://, http://, https:// and ftp://) or base64 encoded (data:image/png;base64,iVBORw...)

PhotoBatchOperations

Represent overlay image, print text or flip operation

PhotoBatchOverlay

Overlay image batch operation

Property	Type	Description
`operation`	"overlay"
`overlay`	`ImageSource`	The overlay image
`position`	`Point`	he position of overlay image in background image

PhotoBatchPrintText

Print text batch operation

Property	Type	Description
`operation`	"text"
`options`	`TextOptions`	The text attributes

PhotoBatchFlip

Flip image batch operation

Property	Type	Description
`operation`	"flip"
`mode`	`FlipMode`	Flip mode Vertical, Horizontal or Both

PhotoBatchRotate

Rotate image batch operation

Property	Type	Description
`operation`	"rotate"
`mode`	`RotationMode`	Rotation mode 90° (90° Clockwise), 180° (Half Rotation) or 270° (90° Counterclockwise)

FlipMode

Enum represent flip Mode

Enum	Description
Horizontal	Flip horizontal (y-axis)
Vertical	Flip vertical (x-asis)
Both	Flip vertical and horizontal

RotationMode

Enum represent rotation Mode

Enum	Description
R90	Rotate 90° (90° Clockwise)
R180	Rotate 180° (Half Rotation)
R270	Rotate 270° (90° Counterclockwise)

Point

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

Property	Type	Description
`x`	number	The x-axis coordinate from top-left
`y`	number	The y-axis coordinate from top-left

Rect

Represent area of region

Property	Type	Description
`x`	number	The x-axis coordinate from top-left
`y`	number	The y-axis coordinate from top-left
`width`	number	The width of the region
`height`	number	The height of the region

Size

Represent size (width, height) of region or image

Property	Type	Description
`width`	number	The width of the region
`height`	number	The height of the region

TextAlign

Enum represent text align

Enum	Description
START	Align text to the start of the line (e.g., left-aligned text in LTR, right-aligned text in RTL)
CENTER	Align text to the center of the line
END	Align text to the end of the line (e.g., right-aligned text in LTR, left-aligned text in RTL)

TextDirection

Enum represent text direction, this will affect coordinate and alignment

Enum	Description
LTR	Left-to-Right text direction (e.g., English, Spanish) `[Top-Left, Left]`
RTL	Right-to-Left text direction (e.g., Arabic, Hebrew) `[Top-Right, Right]`

TextOptions

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

Property	Type	Required	Description
`position`	`Point`	Yes	The position of the text in background image
`text`	string	Yes	The value of the text
`textSize`	number	Yes	The size of the text
`fontName`	string	No	The font name that can resolve by React Native iOS: Use "PostScript name" Android: Use filename
`color`	string	No	The color of the text
`thickness`	number	No	The thickness (border width) of the region
`rotation`	number	No	The rotation of text in degrees
`shadowRadius`	number	No	The shadow radius
`shadowOffset`	`Point`	No	The shadow offset
`shadowColor`	string	No	The color of the shadow
`direction`	`TextDirection`	No	The direction of the text, default to TextDirection.LTR
`align`	`TextAlign`	No	The direction of the text, default to TextAlign.START

Files

README.md

Latest commit

History

README.md

File metadata and controls

React Native Photo Manipulator

Platform Supported

Getting started

For react native 0.60 and above

For react native 0.59 and below

For Expo with development build

Usage

API

Method

Crop and resize

Signature

Returns

Example

Optimize

Signature

Returns

Example

Flip Image

Signature

Returns

Example

Rotate Image

Signature

Returns

Example

Overlay Image

Signature

Returns

Example

Print Text

Signature

Returns

Example

Batch

Signature

Returns

Example

Types

ImageSource

PhotoBatchOperations

PhotoBatchOverlay

PhotoBatchPrintText

PhotoBatchFlip

PhotoBatchRotate

FlipMode

RotationMode

Point

Rect

Size

TextAlign

TextDirection

TextOptions