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