Customize Icons

VideoEditor SDK for React Native provides full control over all icons used inside the editor. However, exchanging the icons needs to be implemented natively for each of the platforms.

iOS#

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

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

#import <RNVideoEditorSDK/RNVideoEditorSDK.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.

[VESDK setBundleImageBlock:^UIImage * _Nullable(NSString * _Nonnull identifier) {
  if ([identifier isEqualToString:@"imgly_icon_save"]) {
    return [UIImage imageWithContentsOfFile:[NSBundle.imgly_resourceBundle URLForResource:@"imgly_icon_approve_44pt" withExtension:@"png"].path];
  }
  return nil;
}];

For further information, please have a look at our native guides

Android#

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. You can find all available resources inside our demo repository. For further information, please have a look at our native guides

<?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>