From Remote URL

VideoEditor SDK supports loading stickers from a remote URL, this can be a resource hosted by a hosting provider or your own servers. The sticker tool is optimized for remote resources which allows to directly integrate a remote URL instead of downloading the asset beforehand. For an example of how to download the remote resources in advance see the font example.

Adding Sticker categories#

Stickers are added to the VideoEditor SDK via the configuration.sticker.categories array within a StickerCategory.

Adding custom categories#

Each StickerCategory takes a name, an identifier, a thumbnailURI as well as an array of Stickers via them items property. A category can be populated both with custom as well as existing stickers that are shipped with the SDK.

Adding existing categories#

Existing StickerCategories can be added by specifying the unique identifier. You can find all available identifiers of the predefined categories here.

Adding stickers#

A Sticker is always added to the SDK via a hosting StickerCategory as shown in the previous section.

Adding custom stickers#

Each Sticker takes an identifier, a name as well as a stickerURI pointing to the remote sticker file. The sticker identifier needs to be unique since it is used during the (de)serialization process.

Adding existing stickers#

Existing stickers can be added by specifying the corresponding identifier. You can find all available identifiers of the predefined categories here.


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

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

  try {
    // Create a `Configuration` object.
    //
    // The sticker tool is optimized for remote resources which allows to directly
    // integrate a remote URL instead of downloading the asset before. For an
    // example on how to download the remote resources in advance and use the local
    // downloaded resources, see: src/examples/text/addFonts/fromRemoteURL.
    const configuration: Configuration = {
      sticker: {
        // A custom sticker category.
        categories: [
          {
            identifier: "custom",
            name: "Custom",
            thumbnailURI:
              "https://img.ly/static/example-assets/custom_sticker_igor.png",
            items: [
              // A custom sticker.
              {
                identifier: "custom_sticker_igor",
                name: "Igor",
                stickerURI:
                  "https://img.ly/static/example-assets/custom_sticker_igor.png",
              },
              // An existing sticker.
              { identifier: "imgly_sticker_shapes_badge_01" },
            ],
          },
          // An existing sticker category.
          { identifier: "imgly_sticker_category_emoticons" },
        ],
      },
    };

    // 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);
  }
};