React Native Image Annotation

While there is no dedicated tool for annotations, PhotoEditor SDK can easily be configured to include the features necessary for a powerful yet simple-to-use photo annotation tool. To this end we only enable features that are useful to annotate objects in a photo:

brush tool for flexible marking and colored highlights
sticker tool for including shapes such as arrows, tags or badges
text tool to provide information around annotation markers

Since we only want to include the three above mentioned tools, we only add those tools to the configuration.

Stickers#

We want to omit stickers that are not annotation specific, but rather add shapes such as arrows, tags or badges. To that end, we group suitable existing stickers in a custom StickerCategory and load this into the configuration. Consult the sticker configuration section for more details.

Open editor#

Finally, we load the previously created configuration into the editor for the customizations to take effect.

For a detailed explanation of how to configure different editor views, refer to this guide.


import { Configuration, PESDK, Tool } from "react-native-photoeditorsdk";

export const photoAnnotationExample = async (): Promise<void> => {
  // Add a photo from the assets directory.
  const photo = require("../../../../assets/pesdk/LA.jpg");

  // Create a `Configuration` object.
  const configuration: Configuration = {
    // For this example only the sticker, text, and brush tool are enabled.
    tools: [Tool.STICKER, Tool.TEXT, Tool.BRUSH],

    // For this example only stickers suitable for annotations are enabled.
    sticker: {
      categories: [
        {
          identifier: "annotation_stickers",
          name: "Annotation",
          thumbnailURI: require("../../../../assets/sticker_thumbnail.png"),
          items: [
            { identifier: "imgly_sticker_shapes_arrow_02" },
            { identifier: "imgly_sticker_shapes_arrow_03" },
            { identifier: "imgly_sticker_shapes_badge_11" },
            { identifier: "imgly_sticker_shapes_badge_12" },
            { identifier: "imgly_sticker_shapes_badge_36" },
          ],
        },
      ],
    },
  };
  try {
    // Open the photo editor and handle the export as well as any occuring errors.
    const result = await PESDK.openEditor(photo, configuration);

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

React Native Image Annotation

Configuring menu items#

Stickers#

Open editor#