Language:
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
#
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
#
defaultPersonalStickerTintMode
#By default, the default tint mode for personal stickers is set to TintMode.NONE
. For this example, this is set to TintMode.SOLID
File:
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);}};