Skip to main content

Integration Guide on react Native

This guide helps to complete full Video Editor SDK integration.

Configuration​

Android​

Add Activity​

Add VideoCreationActivity in AndroidManifest.xml file.

    <activity
        android:name="com.banuba.sdk.ve.flow.VideoCreationActivity"
        android:screenOrientation="portrait"
        android:theme="@style/CustomIntegrationAppTheme"
        android:windowSoftInputMode="adjustResize"
        tools:replace="android:theme" />

IOS​

[!IMPORTANT] Please make sure Bridge Header file exits in ios folder.

Add specs to Podfile​

Add the following specs at the top of your Podfile

platform :ios, '15.0'
source 'https://github.com/CocoaPods/Specs.git'
source 'https://github.com/Banuba/specs.git'
source 'https://github.com/sdk-banuba/banuba-sdk-podspecs.git'

Add permissions​

Specify the required iOS permissions used by the SDK in your Info.plist

<key>NSAppleMusicUsageDescription</key>
<string>This app requires access to the media library</string>
<key>NSCameraUsageDescription</key>
<string>This app requires access to the camera.</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app requires access to the microphone.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires access to the photo library.</string>

Add AR effects​

Banuba Face AR SDK product is used on camera and editor screens for applying various AR effects while making video content.

  1. Android - add effects to the project by the path android/app/src/main/assets/bnb-resources/effects.
  2. iOS - add the effect to resource folder bundleEffects. Make sure to select the "Copy items if needed" and "Create folder references" checkboxes while adding effects to the bundleEffects folder.

Disable Face AR SDK​

Android​

Set the ENABLE_FACE_AR flag to the gradle.properties:

...
newArchEnabled=true

# Use this property to enable or disable the Hermes JS engine.
# If set to false, you will be using JSC instead.
hermesEnabled=true
+ ENABLE_FACE_AR=false

IOS​

Set the environment ENABLE_FACE_AR flag the the PodFile:

...

prepare_react_native_project!

+ ENV['ENABLE_FACE_AR'] = 'false'

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end
...

Enable Android Photo Picker​

Set the ENABLE_GALLERY flag to the gradle.properties::

+ ENABLE_GALLERY=false

Limit processor architectures on Android​

Banuba Video Editor on Android supports the following processor architectures - arm64-v8a, armeabi-v7a, x86-64. Please keep in mind that each architecture adds extra MBs to your app. To reduce the app size you can filter architectures in your app/build.gradle file.

...
defaultConfig {
    ...
    // Use only ARM processors
    ndk {
        abiFilters 'armeabi-v7a', 'arm64-v8a'
    }
}

Customizations​

Usage​

Create instance of the FeaturesConfig to apply various Video Editor configurations.

Pass the FeaturesConfig instance to any Video Editor start method. For example:

  private featuresConfig = new FeaturesConfigBuilder()
    .setAudioBrowser(AudioBrowser.fromSource({
        source: AudioBrowserSource.local,
        params: null
        })
    )
    .build();
const videoEditor = new VideoEditorPlugin();
videoEditor.openFromCamera(LICENSE_TOKEN, this.featuresConfig)
    .then(response => { this.handleVideoExport(response); })
    .catch(e => { this.handleSdkError(e); });