Configure Text Design

PhotoEditor SDK supports several configuration options for the text design tool allowing flexible adaptation to different needs and use cases. For a detailed explanation of how to configure different editor views, refer to this guide.

`colors`#

By default, the editor provides a variety of different colors to customize the color of the text designs. Here, we only provide a small selection of colors as might be sensible for an annotation use case.

`canvasActions`#

The actions users can perform in the text design tool are configured via the canvasActions property. By default, the editor has all available overlay actions for this tool enabled. For this example CanvasAction.UNDO and CanvasAction.REDO are removed.


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

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

  // Create a `Configuration` object.
  const configuration: Configuration = {
    textdesign: {
      // By default the editor provides a lot of colors.
      // For this example only a few colors are enabled.
      colors: [
        {
          name: "White",
          color: "#ffffff",
        },
        {
          name: "Black",
          color: "#000000",
        },
      ],

      // By default the editor has all available overlay actions for this tool
      // enabled. For this example `CanvasAction.UNDO` and `CanvasAction.REDO`
      // are removed.
      canvasActions: [
        CanvasAction.ADD,
        CanvasAction.BRING_TO_FRONT,
        CanvasAction.DELETE,
        CanvasAction.INVERT,
      ],
    },
  };

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

Configure Text Design

colors#

canvasActions#

`colors`#

`canvasActions`#