Skip to content

Latest commit

 

History

History
153 lines (124 loc) · 4.93 KB

File metadata and controls

153 lines (124 loc) · 4.93 KB

Photo Editor Quickstart on Android

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.

Installation

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"
}

Launch

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.

Init SDK

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.

Start

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

  1. Returns nulll if the license token is invalid – verify your token
  2. Check license activation before starting the editor.

Documentation

Explore the full capabilities of our Photo Editor SDK