Skip to main content
Language:

Configure Stickers

PhotoEditor 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.

File:
import {
CanvasAction,
Configuration,
PESDK,
StickerAction,
TintMode,
} from "react-native-photoeditorsdk";
export const photoStickerConfigurationExample = async (): Promise<void> => {
// Add a photo from the assets directory.
const photo = require("../../../../assets/pesdk/LA.jpg");
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 photo editor and handle the export as well as any occuring errors.
const result = await PESDK.openEditor(photo, configuration);
if (result != null) {
// The user exported a new photo successfully and the newly generated photo is located at `result.image`.
console.log(result.image);
} else {
// The user tapped on the cancel button within the editor.
return;
}
} catch (error) {
// There was an error generating the photo.
console.log(error);
}
};