imgly
React Native module for VideoEditor SDK
Check out our video tutorial for a step-by-step integration guide which also details advanced SDK features, such as serializing and reusing previously applied editing operations.
Getting started
Install the React Native module in your project as follows:
yarn add react-native-videoeditorsdkIn 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 with:
yarn react-native linkbefore you continue with the platform-specific guides below.
iOS
For React Native 0.60 and above autolinking is used and VideoEditor 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 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
Because VideoEditor SDK for Android is quite large, there is a high chance that you will need to enable Multidex for your project as follows:
- Open the
android/app/build.gradlefile (notandroid/build.gradle) and add these lines at the end:android { defaultConfig { multiDexEnabled true } } dependencies { implementation 'androidx.multidex:multidex:2.0.1' } - Open the
android/app/src/main/java/.../MainApplication.javafile and change the superclass of yourMainApplicationclass fromApplicationtoandroidx.multidex.MultiDexApplication, e.g.:public class MainApplication extends androidx.multidex.MultiDexApplication implements ReactApplication {
- Open the
Add the img.ly repository and plugin by opening the
android/build.gradlefile (notandroid/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.4.10" classpath 'ly.img.android.sdk:plugin:8.3.1' } }In order to update VideoEditor SDK for Android replace the version string
8.3.1with a newer release.Configure VideoEditor SDK for Android by opening the
android/app/build.gradlefile (notandroid/build.gradle) and adding the following lines underapply 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' include 'ui:video-trim' include 'ui:video-library' include 'ui:video-composition' include 'ui:audio-composition' // 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' } }
Usage
Import the module in your App.js:
import {VESDK, VideoEditorModal, Configuration} from 'react-native-videoeditorsdk';Each platform requires a separate license file. Unlock VideoEditor SDK automatically for both platforms with a single line of code via platform-specific file extensions:
VESDK.unlockWithLicense(require('./vesdk_license'));Open the editor with a video:
VESDK.openEditor(require('./video.mp4'));Or use the component to open the editor:
<VideoEditorModal visible={true} video={require('./video.mp4')}/>Please see the code documentation for more details and additional customization and configuration options.
For configuring and customizing VideoEditor SDK beyond these options exposed to JavaScript the iOS bridge provides an interface for native customization. Please refer to our documentation for more details on native customization.
Example
Please see our example project which demonstrates how to use the React Native module for VideoEditor SDK.
License Terms
Make sure you have a commercial license for VideoEditor 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.