Native Interfaces

VideoEditor SDK for React Native has some dedicated native interfaces build-in to provide better access and customization possibilities. These interfaces are accessible via the RNVideoEditorSDK on iOS and RNVideoEditorSDKModule on Android.

iOS#

On iOS, there are two interfaces available - one for adjusting the native PESDKConfiguration and one to have access to the active PESDKVideoEditViewController - before the editor is opened.

Before using any of the native interfaces described below, you need to import the native module:

#import <RNVideoEditorSDK/RNVideoEditorSDK.h>

configureWithBuilder#

The RNVideoEditorSDK.configureWithBuilder function allows you to modify the native Configuration before it gets passed to the editor. You can make all kinds of adjustments here that are not possible from the React Native configuration, e.g., change buttons or use closures of individual tools. For further information, please have a look at the dedicated native guides.

RNVideoEditorSDK.configureWithBuilder = ^(PESDKConfigurationBuilder * _Nonnull builder) {
  // Disable the color pipette for the text color selection tool
  [builder configureTextColorToolController:^(PESDKTextColorToolControllerOptionsBuilder * _Nonnull options) {
    NSMutableArray<PESDKColor *> *colors = [options.availableColors mutableCopy];
    [colors removeObjectAtIndex:0]; // Remove first color item which is the color pipette
    options.availableColors = colors;
  }];
};

willPresentVideoEditViewController#

The RNVideoEditorSDK.willPresentVideoEditViewController function is called right before the video editor is presented and allows you to make adjustments directly to the editor.

RNVideoEditorSDK.willPresentVideoEditViewController = ^(PESDKVideoEditViewController * _Nonnull videoEditViewController) {
  NSLog(@"willPresent: %@", videoEditViewController);
};

Android#

On Android, there are also two interfaces available - one for adjusting the native SettingsList before the editor is opened and one to have access to the StateHandler before the editor exports the image. All native interfaces can be accessed within the MainActivity.kt (or the Java equivalent) of your application. To do so, you need to override the onStart method and use our interfaces to apply your customizations as shown below:

editorWillOpenClosure#

The RNVideoEditorSDKModule.editorWillOpenClosure is called right before the serialization is applied when the editor is opened. Within this closure, you can make adjustments to the native VideoEditorSettingsList and apply customizations of various kinds. For further information on this, please refer to our native guides.

RNVideoEditorSDKModule.editorWillOpenClosure = {
    // Remove first color item which is the color pipette.
    it.getSettingsModel(UiConfigText::class).textColorList.removeAt(0)
}

editorWillExportClosure#

The RNVideoEditorSDKModule.editorWillExportClosure is called right before the editor starts exporting. Within this closure, you can make adjustments to the native StateHandler and apply customizations of various kinds. For further information on this, please refer to our native guides.

RNVideoEditorSDKModule.editorWillExportClosure = {
    // Add an overlay to the image.
    val overlay = it.getSettingsModel(AssetConfig::class).getAssetById(OverlayAsset::class, "imgly_overlay_golden");
    if (overlay != null) {
        it.getSettingsModel(OverlaySettings::class).overlayAsset = overlay
    }
}