From App Bundle

VideoEditor SDK supports loading stickers from the app bundle. In this example, we load both a custom sticker and an existing sticker from the IMG.LY bundle.

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 actual 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 videoStickerAppBundleExample = async (): Promise<void> => {
  // Add a video from the assets directory.
  const video = require("../../../../../assets/vesdk/Skater.mp4");

  try {
    // Create a `Configuration` object.
    const configuration: Configuration = {
      sticker: {
        // A custom sticker category.
        categories: [
          {
            identifier: "custom",
            name: "Custom",
            thumbnailURI: require("../../../../../assets/custom_sticker_igor.png"),
            items: [
              // A custom sticker.
              {
                identifier: "custom_sticker_igor",
                name: "Igor",
                stickerURI: require("../../../../../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);
  }
};