How to change toolbar action icons in PE.SDK for react-native?

Question

I'm using the photo editor SDK (react-native) from IMG.LY for editing images; however, I would like to change the default toolbar icons. Is there any way to do it? check this image

Answer 1

For iOS: In order to exchange icons in the editor on iOS, you need to provide an image block that is available natively for the PESDK class:

First, you need to import the RNPhotoEditorSDK header inside your AppDelegat.m/AppDelegate.mm file:

#import <RNPhotoEditorSDK/RNPhotoEditorSDK.h>

Then, you can set the image block before the editor is opened. We recommend placing the code inside the didFinishLaunchingWithOptions function in the same file.

[PESDK setBundleImageBlock:^UIImage * _Nullable(NSString * _Nonnull identifier) {
  if ([identifier isEqualToString:@"imgly_icon_save"]) {
    return [UIImage imageNamed:@"imgly_icon_approve_44pt"];
  }
  return nil;
}];

For Android:

You will need to create custom resource files for the corresponding icons of the SDK. Simply provide a resource file with the same filename as used in the SDK.

<?xml version="1.0" encoding="utf-8"?>


<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:viewportWidth="24"
        android:viewportHeight="24"
        android:width="24dp"
        android:height="24dp">
    <path
        android:pathData="M20.999994 7l-1.4 -1.4 -10.6000001 10.6 -4.2 -4.2 -1.4 1.4 5.6 5.6z"
        android:fillColor="?attr/imgly_icon_color_secondary" />
</vector>

This information can be found here.