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 => '../node_modules/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) Make sure to include your license file in Copy Bundle Resource under Build Phases.

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 since not supported. Please use layout override described here: https://docs.photoeditorsdk.com/guides/android/v5/customization/styling

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.

Contribution

Contribution is always welcome via pull requests :)

License

Unlicense: http://unlicense.org/ - Just do what you want with it.