Show Editor

In order to open the editor you can either use the PhotoEditorModal as shown in this example or use the callable static function PESDK.openEditor. For reference to the last method, please take a look at the dedicated guides here.

Create a PhotoEditorModal#

In this example, we load a photo from the bundle into the editor as the image property of the PhotoEditorModal.

Handling visibility#

Since the PhotoEditorModal represents a modally presented editor, you need to handle its visibility by using its visible property. If visible is set to true, the editor will be modally presented.

Handling events#

Using the onExport property allows us to register an event handler that is invoked when a user successfully exports an edited photo. The result argument passed to the closure is of type PhotoEditorResult and contains the data of the exported photo.

The onCancel handler is called if the user cancels the editing process by clicking the cancel button inside the editor. If the export fails the onError handler is called.

In each of these cases, you need to reset the visible property of the modal to false. In this example, this is handled by the custom onFinish handler.

Next Steps#


import React from "react";
import { PhotoEditorModal } from "react-native-photoeditorsdk";

export const ShowPhotoEditorModalExample = ({
  visible,
  onFinish,
}: {
  visible: boolean;
  onFinish: () => void;
}) => {
  return (
    // Create the photo editor modal and handle the export as well as any occuring errors.
    <PhotoEditorModal
      // Add a photo from the assets directory.
      image={require("../../../../assets/pesdk/LA.jpg")}
      // Determine whether the editor should be visible or not.
      visible={visible}
      onExport={(result) => {
        // The user exported a new photo successfully and the newly generated photo is located at `result.image`.
        console.log(result.image);
        onFinish();
      }}
      onCancel={() => {
        // The user tapped on the cancel button within the editor.
        onFinish();
      }}
      onError={(error) => {
        // There was an error generating the photo.
        console.log(error);
        onFinish();
      }}
    ></PhotoEditorModal>
  );
};