Show Editor

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

Open the editor#

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

Handle events#

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

Next Steps#


import { VESDK } from "react-native-videoeditorsdk";

export const showVideoEditorExample = async (): Promise<void> => {
  try {
    // Add a video from the assets directory.
    const video = require("../../../../assets/vesdk/Skater.mp4");

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

    if (result != null) {
      // The user exported a new video successfully and the newly generated video is located at `result.video`.
      console.log(result?.video);
    } else {
      // The user tapped on the cancel button within the editor.
      return;
    }
  } catch (error) {
    // There was an error generating the video.
    console.log(error);
  }
};