Configure Stickers

VideoEditor SDK supports several configuration options for the sticker tool via the configuration.sticker option - allowing flexible adaptation to different needs and use cases. For a detailed explanation of how to configure different editor views, refer to this guide.

`personalStickers`#

The default configuration does not allow users to add custom stickers. In this example, we enable users to add stickers from the device by setting personalStickers to true.

`defaultPersonalStickerTintMode`#

By default, the default tint mode for personal stickers is set to TintMode.NONE. For this example, this is set to TintMode.SOLID

`colors`#

By default, a lot of Colors are enabled. For this example, we only enable a small selection.

`canvasActions`#

By default, all available canvas actions are enabled. In our example, the user is only allowed to undo and redo the changes. For a complete list of available canvas actions for the sticker tool consult the API docs.

`actions`#

By default, all available sticker actions are enabled. In our example, the user is only allowed to replace the stickers and change the color. For a complete list of available sticker actions consult the API docs.


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

export const videoStickerConfigurationExample = 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: {
        // By default, the user is not allowed to add
        // custom stickers from the local library. For
        // this example, this option is enabled.
        personalStickers: true,

        // By default, the default tint mode for personal stickers
        // is set to `TintMode.NONE`. For this example, this is set
        // to `TintMode.SOLID`
        defaultPersonalStickerTintMode: TintMode.SOLID,

        // By default, a lot of colors are enabled.
        // For this example, only a small selection
        // is enabled.
        colors: [
          { name: "White", color: [1, 1, 1, 1] },
          { name: "Black", color: [0, 0, 0, 0] },
        ],

        // By default, all available canvas actions are enabled.
        // For this example, the user is only allowed to undo
        // and redo changes.
        canvasActions: [CanvasAction.UNDO, CanvasAction.REDO],

        // By default, all available sticker actions are enabled.
        // For this example, only a few tools are enabled.
        actions: [
          StickerAction.COLOR,
          StickerAction.REPLACE,
        ],
      },
    };

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

Configure Stickers

personalStickers#

defaultPersonalStickerTintMode#

colors#

canvasActions#

actions#

`personalStickers`#

`defaultPersonalStickerTintMode`#

`colors`#

`canvasActions`#

`actions`#