Native Interfaces

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

iOS#

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

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

#import <RNPhotoEditorSDK/RNPhotoEditorSDK.h>

configureWithBuilder#

The RNPhotoEditorSDK.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.

RNPhotoEditorSDK.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;
  }];
};

willPresentPhotoEditViewController#

The RNPhotoEditorSDK.willPresentPhotoEditViewController function is called right before the photo editor is presented and allows you to make adjustments directly to the editor.

RNPhotoEditorSDK.willPresentPhotoEditViewController = ^(PESDKPhotoEditViewController * _Nonnull photoEditViewController) {
  NSLog(@"willPresent: %@", photoEditViewController);
};

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 RNPhotoEditorSDKModule.editorWillOpenClosure is called right before the serialization is applied when the editor is opened. Within this closure, you can make adjustments to the native PhotoEditorSettingsList and apply customizations of various kinds. For further information on this, please refer to our native guides.

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

editorWillExportClosure#

The RNPhotoEditorSDKModule.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.

RNPhotoEditorSDKModule.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
    }
}