Language:

Show Editor

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

Create a VideoEditorModal#

In this example, we load a video from the bundle into the editor as the video property of the VideoEditorModal.

Handling visibility#

Since the VideoEditorModal 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 video. The result argument passed to the closure is of type VideoEditorResult and contains the data of the exported video.

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#

File:

import React from "react";
import { VideoEditorModal } from "react-native-videoeditorsdk";

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