From App Bundle

VideoEditor SDK supports adding predefined as well as custom overlays from the app bundle.

Adding custom Overlays#

Custom overlays can be added by specifying them in the configuration.overlay.items array. Each overlay takes a unique identifier, a name, a blendMode, an overlayURI as well as an optional thumbnailURI.

Adding existing Overlays#

You can also add predefined overlays that are shipped with the SDK. By default, all of them are contained in the configuration.overlay.items array. To add predefined overlays, simply specify their identifiers. All available identifiers can be found here. For this example, only two predefined overlays are enabled.


import { BlendMode, Configuration, VESDK } from "react-native-videoeditorsdk";

export const videoOverlayAppBundleExample = async (): Promise<void> => {
  // Add a video from the assets directory.
  const video = require("../../../../../assets/vesdk/Skater.mp4");

  // Create a `Configuration` object.
  const configuration: Configuration = {
    overlay: {
      items: [
        {
          identifier: "custom_overlay",
          name: "Custom",
          defaultBlendMode: BlendMode.OVERLAY,
          overlayURI: require("../../../../../assets/imgly_overlay_grain.jpg"),
        },
        { identifier: "imgly_overlay_rain" },
        { identifier: "imgly_overlay_mosaic" },
      ],
    },
  };

  try {
    // Open the video editor and handle the export as well as any occuring errors.
    const result = await VESDK.openEditor(video, configuration);

    if (result != null) {
      // The user exported a new video successfully and the newly generated video is located at `result.video`.
      console.log(result?.video);
    } else {
      // The user tapped on the cancel button within the editor.
      return;
    }
  } catch (error) {
    // There was an error generating the video.
    console.log(error);
  }
};