React Native module for PhotoEditor SDK

Getting started

Install the React Native module in your project as follows:

yarn add react-native-photoeditorsdk

iOS

For React Native 0.60 and above autolinking is used and PhotoEditor SDK for iOS should be automatically installed:

cd ios && pod install && cd ..

and updated:

cd ios && pod update && cd ..

with CocoaPods.

For older React Native versions autolinking is not available and PhotoEditor SDK for iOS needs to be manually integrated in your Xcode project if you don't use CocoaPods to manage your dependencies. Make sure to put ImglyKit.framework and PhotoEditorSDK.framework in the ios/ directory of your project. Finally, link the native dependencies with:

yarn react-native link

Android

1. Because PhotoEditor SDK for Android is quite large, there is a high chance that you will need to enable Multidex for your project as follows:

   1. Open the android/app/build.gradle file (not android/build.gradle) and add these lines at the end:

      android {
          defaultConfig {
              multiDexEnabled true
          }
      }
      dependencies {
          implementation 'androidx.multidex:multidex:2.0.1'
      }

   2. Open the android/app/src/main/java/.../MainApplication.java file and change the superclass of your MainApplication class from Application to androidx.multidex.MultiDexApplication, e.g.:

      public class MainApplication extends androidx.multidex.MultiDexApplication implements ReactApplication {

2. Add the img.ly repository and plugin by opening the android/build.gradle file (not android/app/build.gradle) and adding these lines at the top:

   buildscript {
       repositories {
           jcenter()
           maven { url "https://plugins.gradle.org/m2/" }
           maven { url "https://artifactory.img.ly/artifactory/imgly" }
       }
       dependencies {
           classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.61"
           classpath 'ly.img.android.sdk:plugin:7.1.5'
       }
   }

   In order to update PhotoEditor SDK for Android replace the version string 7.1.5 with a newer release.

3. Configure PhotoEditor SDK for Android by opening the android/app/build.gradle file (not android/build.gradle) and adding the following lines under apply plugin: "com.android.application":

   apply plugin: 'ly.img.android.sdk'
   apply plugin: 'kotlin-android'
   
   // Comment out the modules you don't need, to save size.
   imglyConfig {
       modules {
           include 'ui:text'
           include 'ui:focus'
           include 'ui:frame'
           include 'ui:brush'
           include 'ui:filter'
           include 'ui:sticker'
           include 'ui:overlay'
           include 'ui:transform'
           include 'ui:adjustment'
           include 'ui:text-design'
   
           // This module is big, remove the serializer if you don't need that feature.
           include 'backend:serializer'
   
           // Remove the asset packs you don't need, these are also big in size.
           include 'assets:font-basic'
           include 'assets:frame-basic'
           include 'assets:filter-basic'
           include 'assets:overlay-basic'
           include 'assets:sticker-shapes'
           include 'assets:sticker-emoticons'
       }
   }

Usage

Import the module in your App.js:

import {PESDK, Configuration} from 'react-native-photoeditorsdk';

Unlock PhotoEditor SDK with a license file:

PESDK.unlockWithLicense(require('./pesdk_license'));

Open the editor with an image:

PESDK.openEditor(require('./image.jpg'));

Please see the code documentation for more details and additional customization and configuration options.

Example

Please see our example project which demonstrates how to use the React Native module for PhotoEditor SDK.

License Terms

Make sure you have a commercial license for PhotoEditor SDK before releasing your app. A commercial license is required for any app or service that has any form of monetization: This includes free apps with in-app purchases or ad supported applications. Please contact us if you want to purchase the commercial license.

Support and License

Use our service desk for bug reports or support requests. To request a commercial license, please use the license request form on our website.