This guide walks you through integrating the Android Photo Editor SDK into your React Native project. Integration and customization are performed in the android directory using native Android development practices.
Add the Banuba repository to your project using either Groovy or Kotlin DSL:
Groovy (in project's build.gradle)
...
allprojects {
repositories {
...
maven {
name = "nexus"
url = uri("https://nexus.banuba.net/repository/maven-releases")
}
}
}or
Kotlin (settings.gradle.kts)
...
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
...
maven {
name = "nexus"
url = uri("https://nexus.banuba.net/repository/maven-releases")
}
}
}Add dependencies to your app's gradle
dependencies {
def banubaPESdkVersion = '1.3.5'
implementation "com.banuba.sdk:pe-sdk:${banubaPESdkVersion}"
def banubaSdkVersion = '1.51.0'
implementation "com.banuba.sdk:core-sdk:${banubaSdkVersion}"
implementation "com.banuba.sdk:core-ui-sdk:${banubaSdkVersion}"
implementation "com.banuba.sdk:ve-gallery-sdk:${banubaSdkVersion}"
implementation "com.banuba.sdk:effect-player-adapter:${banubaSdkVersion}"
}Ensure these plugins are in your app's gradle.
plugins {
id "com.android.application"
id "kotlin-android"
id "kotlin-parcelize"
}Create SdkEditorModule for communicating with the SDK.
Create BanubaSdkReactPackage class add add SdkEditorModule to the list of modules.
class BanubaSdkReactPackage : ReactPackage {
class BanubaSdkReactPackage : ReactPackage {
override fun createNativeModules(reactContext: ReactApplicationContext): MutableList<NativeModule> {
val modules = mutableListOf<NativeModule>()
+ modules.add(SdkEditorModule(reactContext))
return modules
}
override fun createViewManagers(reactContext: ReactApplicationContext): MutableList<ViewManager<View, ReactShadowNode<*>>> =
mutableListOf()
}
}Add BanubaSdkReactPackage package in the application
class MainApplication : Application(), ReactApplication {
override val reactNativeHost: ReactNativeHost =
object : DefaultReactNativeHost(this) {
override fun getPackages(): List<ReactPackage> = PackageList(this).packages.apply {
+ add(BanubaSdkReactPackage())
}
...
}
override val reactHost: ReactHost
get() = getDefaultReactHost(applicationContext, reactNativeHost)
override fun onCreate() {
super.onCreate()
...
}
}The Promises pattern bridges React Native with Android native modules.
On the React Native side, call initSDK to initialize the SDK with your license token:
SdkEditorModule.initSDK(LICENSE_TOKEN);On the Android side, implement the ReactMethod that initializes the Video Editor SDK.
After SDK initialization, invoke openPhotoEditor from React Native to launch the photo editor on Android:
await SdkEditorModule.openPhotoEditor();On the Android side, implement the ReactMethod to start Photo Editor.
@ReactMethod
fun openPhotoEditor(promise: Promise) {
if (photoEditorSDK == null) {
// THE SDK is not initialized or token is invalod
} else {
val hostActivity = currentActivity
if (hostActivity == null) {
// Activity is not connected
} else {
this.resultPromise = promise
hostActivity.startActivityForResult(
PhotoCreationActivity.startFromGallery(hostActivity.applicationContext), OPEN_PHOTO_EDITOR_REQUEST_CODE
)
}
}
}Important
- Returns
nulll if the license token is invalid – verify your token - Check license activation before starting the editor.
Explore the full capabilities of our Photo Editor SDK