Show Editor

The PESDK class is the main entry point for opening the editor. You can either use the callable static function PESDK.openEditor as shown in this example or use the PhotoEditorModal. For reference on the last method, please take a look at the dedicated guides here.

Open the editor#

In order to load the image into the editor simply specify it as the image parameter inside the asynchronous PESDK.openEditor function. In this example, we load a photo from the bundle into the editor.

Handle events#

Once the editor finishes, a PhotoEditorResult is returned which contains the edited image at PhotoEditorResult.image. If no result is returned, the user has cancelled the editing process by clicking the cancel button inside the editor.

Next Steps#


import { PESDK } from "react-native-photoeditorsdk";

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

    // Open the photo editor and handle the export as well as any occuring errors.
    const result = await PESDK.openEditor(photo);

    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);
  }
};