Integration using plain React Native

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-videoeditorsdk

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 above autolinking is used and VideoEditor SDK for iOS should be automatically installed with CocoaPods:

(cd ios && pod install)

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

(cd ios && pod update)

For older React Native versions auto-linking is not available and VideoEditor 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 VideoEditorSDK.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.

   In order to update VideoEditor 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 VideoEditor 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'
           include 'ui:video-trim'
           include 'ui:video-library'
           include 'ui:video-composition'
           include 'ui:audio-composition'
           include 'ui:giphy-sticker'
   
           // 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 'assets:sticker-animated'
   
           include 'backend:sticker-animated'
           include 'backend:sticker-smart'
           include 'backend:background-removal'
       }
   }