Configure Trim

VideoEditor SDK for React Native supports configuring the trim tool to enforce a minimum and maximum duration of the trimmed video. For a detailed explanation of how to configure different editor views, refer to this guide.

Min / Max Duration#

By default, no minimum or maximum video durations are enforced. In cases where you need to restrict the user from shortening the video below a specific minimum duration or importing a video that is too long, you can use the maximumDuration and minimumDuration options. The unit is seconds, so in this example, we only allow videos that are at least two seconds and at most five seconds long.

Behavior and user alerts for exceptions#

If enabled, the trim length will initially be set to the maximumDuration. If this value is not set, or the video length is shorter than the maximumDuration, it will be set to the full length of the video. The user interface will not allow a trim length that is shorter than minimumDuration or longer than maximumDuration, so users will never be able to generate a video that lies outside these defined limits. However, there are two cases where this behavior can only be achieved with an alert:

If a minimumDuration has been set for the trim tool and the length of the input video is shorter than that, we will present an alert as soon as the editor is opened stating that the video is too short. After confirming that alert, the editor will be closed and an error will be thrown.
If a minimumDuration has been set for the composition tool and the length of the video composition does not yet overstep that length, tapping on the export button will present an alert that notifies the user that they will have to add additional videos to the composition to export the video. After confirming the alert, the composition tool will automatically open. If you do not allow your users to add additional videos to the composition when configuration.composition.personalVideoClips is set to false and no predefined video libraries have been configured, the behavior will be identical as if the trim tool would have been used above.


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

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

  // Create a `Configuration` object.
  const configuration: Configuration = {
    // The duration limits of these configuration options are
    // also respected by the composition tool.
    trim: {
      // By default the editor does not have a maximum duration.
      // For this example the duration is set, e.g. for a social
      // media application where the posts are not allowed to be
      // longer than 5 seconds.
      maximumDuration: 5.0,

      // By default the editor does not limit the maximum video duration.
      // For this example the duration is set, e.g. for a social
      // media application where the posts are not allowed to be
      // shorter than 2 seconds.
      minimumDuration: 2.0,
    },
  };
  try {
    // Open the video editor and handle the export as well as any occuring errors.
    const result = await VESDK.openEditor(video, configuration);

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