Skip to main content
PESDK/React Native/Getting Started/Integration

Integration using plain React Native

Quickly integrate PhotoEditor SDK for React Native into your application.

Free Trial#

Our tech is modified to be used for testing purposes without a license key. To start testing just follow this Get Started guide and leave out the step of entering the commercial license keys. The editor will simply render a watermark over the preview and final results. And in case you need any technical assistance, make sure to reach out to us: https://img.ly/support. We’ll be glad to help.

Requirements#

For this version, the requirements are:

  • React Native: 0.60
  • iOS: 13
  • Android: 5 (SDK 21)

If your app depends on some older versions of these requirements please have a look at previous versions of the SDK.

React Native CLI#

Install the React Native module in your project as follows:

yarn add react-native-photoeditorsdk

In general, we highly recommend using React Native 0.60 or newer. If you cannot avoid using an older React Native version you need to link the native dependencies before you continue with the platform-specific guides below:

yarn react-native link

Platform specific#

Since the react-native-videoeditorsdk depends on our native PhotoEditor SDK, you need to make some native changes to your React Native application.

iOS#

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

cd ios && pod install && cd ..

You can also update the native VideoEditor SDK without changing the react-native-videoeditorsdk module

cd ios && pod update && cd ..

For older React Native versions auto-linking 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.

Android#

  1. 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 {
    mavenCentral()
    maven { url "https://artifactory.img.ly/artifactory/imgly" }
    }
    dependencies {
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.0"
    classpath 'com.google.devtools.ksp:com.google.devtools.ksp.gradle.plugin:1.8.0-1.0.9' // KSP version is depending on your Kotlin version.
    classpath 'ly.img.android.sdk:plugin:10.9.0'
    }
    }

    The KSP version depends on the Kotlin version that you are using. In order to find the correct version, please visit the official KSP release page. s In order to update PhotoEditor SDK for Android replace the version string 10.9.0 with a newer release.

  2. Still in the android/build.gradle file (not android/app/build.gradle), add these lines at the bottom:

    allprojects {
    repositories {
    maven { url 'https://artifactory.img.ly/artifactory/imgly' }
    }
    }
  3. In the same file, you will need to modify the minSdkVersion to at least 21. We also recommend to update the buildToolsVersion to 34.0.0 or higher as well as the compileSdkVersion to 34 or higher but this is not mandatory:

    buildscript {
    ext {
    - buildToolsVersion = "30.0.2"
    + buildToolsVersion = "34.0.0"
    - minSdkVersion = 19
    + minSdkVersion = 21
    - compileSdkVersion = 34
    + compileSdkVersion = 34
    targetSdkVersion = 34
    }
    }
  4. 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.
    IMGLY.configure {
    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'
    include 'backend:sticker-smart'
    include 'backend:background-removal'
    }
    }