From App Bundle

PhotoEditor 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 PhotoEditor 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, PESDK } from "react-native-photoeditorsdk";

export const photoStickerAppBundleExample = 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: {
        // 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 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);
  }
};