Photo-editor-sdk-react-native NPM

Photo Editor SDK React Native

This project aims to be a complete implementation of the PhotoEditor SDK (https://www.photoeditorsdk.com/) in React Native for iOS and Android.

Please note: a PhotoEditorSDK license is needed for usage: https://www.photoeditorsdk.com/ Unfortunetaly pricing is only available after asking for a quote. But it's affordable ;)

Features

You can:

Open the PESDK Camera
Open the Editor with a given image path
Use iOS & Android
Specify which editor features should be enabled
Retrieve the edited image path afterwards
Use TypeScript since a declaration file exists

You can't (currently, but on todo list)

Specify the path of the exported images
Add own stickers

Installation

General

Install the npm package via npm i photo-editor-sdk-react-native --save or yarn add photo-editor-sdk-react-native --save.

Android

Step 0 - Follow the official installation guide

In order to have the base module running, follow the installation guide at https://docs.photoeditorsdk.com/guides/android/v5/introduction/overview

Don't forget the PESDK.init() call to your MainApplication.java.

Step 1 - Modify `settings.gradle`

Add the following lines to your settings.gradle:

include ':photo-editor-sdk-react-native'
project(':photo-editor-sdk-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/photo-editor-sdk-react-native/android')

Step 2 - Modify `build.gradle` file (app)

Add the following lines to your build.gradle file:

dependencies {
    ....
    compile project(':photo-editor-sdk-react-native')
}

Step 3 - Modify `getPackages()` inside `MainApplication.java`

Add the PESDKPackage to the getPackages function inside MainApplication.java

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        ...
        new PESDKPackage(),
        ...
    );
}

That's it - you're done!

iOS

Step 0 - Follow the official installation guide

In order to have the base module running, follow the installation guide at https://docs.photoeditorsdk.com/guides/ios/v8/introduction/overview but be sure to NOT use use_frameworks!.

Step 1

Add photo-editor-sdk-react-native to your Podfile:

pod 'photo-editor-sdk-react-native', :path => '../../photo-editor-sdk-react-native'

and run pod install afterwards.

Step 2

Add the privacy keys to your Info.plist file or otherwise the app will crash when trying to use the camera or accessing the media library:

<key>NSCameraUsageDescription</key>
<string>Take photos</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Choose Photos from library</string>

Step 3

Don't forget the [PESDK unlockWithLicenseAt:[[NSBundle mainBundle] URLForResource:@"<<YOUR LICENSE FILE>>" withExtension:nil]]; call to your AppDelegate.m. (or equivalent in Swift)

That's it - you're done!

Usage

Configuration options

Features

Available editor features are represented as constants:

Transformation (PESDK.transformTool)
Filters (PESDK.filterTool)
Focus points (PESDK.focusTool)
Color Adjustment (PESDK.adjustTool)
Text (PESDK.textTool)
Stickers (PESDK.stickerTool)
Overlays (PESDK.overlayTool)
Brush (PESDK.brushTool)
Magic (PESDK.magic) not available on Android

see how to use them below.

Configuration

Avaiable configuration options are also represented as constant keys. The config has to be supplied as an array. See example below.

Background color for camera (PESDK.backgroundColorCameraKey)
Background color for editor (PESDK.backgroundColorEditoKey)
Background color for the editor menu (PESDK.backgroundColorMenuEditorKey)
Camera roll allowed (PESDK.cameraRollAllowedKey)
Show filters in camera (PESDK.showFiltersInCameraKey)

Configuration will be ignored on android currently.

Import the module

At the top of your .js or .ts file add import PESDK from 'photo-editor-sdk-react-native';

Open the image editor

Supply an image path to the editor and define the features you need:

PESDK.openEditor(
     'PATH-TO-YOUR-IMAGE',
     [features],
     {config}
)
.then((imagePath) => /* .. do something with it .. */)
.catch((err) => /* .. handle the error .. */);

If you want to open the editor with all features you could for example achieve this by:

PESDK.openEditor('path-to-your-image', [
  PESDK.transformTool,
  PESDK.filterTool,
  PESDK.focusTool,
  PESDK.adjustTool,
  PESDK.textTool,
  PESDK.stickerTool,
  PESDK.overlayTool,
  PESDK.brushTool,
  PESDK.magic
], {
  [PESDK.backgroundColorCameraKey]: '#000',
  [PESDK.backgroundColorEditorKey]: '#000',
  [PESDK.backgroundColorMenuEditorKey]: '#000',
  [PESDK.cameraRollAllowedKey]: false,
  [PESDK.showFiltersInCameraKey]: true,
})
.then((imagePath) => console.log(imagePath))
.catch((err) => console.error(err));

Note for iOS users: Since Apple is a bit restrictive on file system access you may have to fiddle with RNFetchBlob (https://github.com/wkh237/react-native-fetch-blob) to directly open the editor with an image filepath.

Open the camera view

Open the camera and after choosing or taking an image enhance it with the editor:

PESDK.openCamera(
  [features],
  {config}
)
.then((imagePath) => /* .. do something with it .. */)
.catch((err) => /* .. handle the error .. */);

Example with all options available used:

PESDK.openCamera([
  PESDK.transformTool,
  PESDK.filterTool,
  PESDK.focusTool,
  PESDK.adjustTool,
  PESDK.textTool,
  PESDK.stickerTool,
  PESDK.overlayTool,
  PESDK.brushTool,
  PESDK.magic
], {
  [PESDK.backgroundColorCameraKey]: '#000',
  [PESDK.backgroundColorEditorKey]: '#000',
  [PESDK.backgroundColorMenuEditorKey]: '#000',
  [PESDK.cameraRollAllowedKey]: false,
  [PESDK.showFiltersInCameraKey]: true,
})
.then((imagePath) => console.log(imagePath))
.catch((err) => console.error(err));

Note for iOS: There is no back button implemented so I added a swipe down gesture recognizer for closing the camera. On Android the hardware back button will work.