How to change toolbar action icons in img.ly photo editor sdk for react-native?

Question

I'm using paid version of imgly photo editor sdk (react-native) 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

IMG.LY team here!

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 .

Keep in mind, that you can always summit your queries to Support Page , and our developers will bring you the best solution.

Let us know how this works for you and if there's something else we can help you through.