Configure Transforms

VideoEditor SDK supports several configuration options for the transform tool allowing flexible adaptation to different needs and use cases. For a detailed explanation of how to configure different editor views, refer to this guide.

`items`#

The default configuration includes several different crop aspect ratios users can choose from. In order to restrict those to specific aspect ratios only, for instance, those used by social networks (e.g. Facebook, Twitter, Instagram, Flickr), we can specify aspect ratios as CropRatio object and give it the desired width and height. The name argument to the CropRatio constructor allows using a custom name for the crop ratio. Note that setting the aspect ratio will not affect the resolution of the video.

`allowFreeCrop`#

While it is possible to configure the available preset aspect ratios for cropping, we can also disable free cropping to ensure that the video will always choose one of the available aspect ratios by setting allowFreeCrop to false.

`showResetButton`#

When free-crop is enabled, users need a way to reset the applied transform operations. In our example, since we are enforcing a certain set of aspect ratios, we can disable the reset button by setting showResetButton to false.

`forceCrop`#

Since in this example we enforce a certain set of aspect ratios, we need to ensure that one of the crop options is selected before any other editing operations are applied. To this end, we configure the editor by setting forceCropMode to true. This ensures that the transform tool is presented first if the selected video does not fit one of the allowed aspect ratios.


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

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

  // Create a `Configuration` object.
  const configuration: Configuration = {
    transform: {
      // By default the editor has a lot of crop aspects enabled.
      // For this example only a couple are enabled, e.g. if you
      // only allow certain video aspects in your application.
      items: [
        {
          width: 1,
          height: 1,
        },
        {
          width: 19,
          height: 9,
          name: "Landscape",
        },
      ],

      // By default the editor allows to use a free crop ratio.
      // For this example this is disabled to ensure that the video
      // has a suitable ratio.
      allowFreeCrop: false,

      // By default the editor shows the reset button which resets
      // the applied transform operations. In this example the button
      // is hidden since we are enforcing certain ratios and the user
      // can only select among them anyway.
      showResetButton: false,
    },

    // For this example the user is forced to crop the asset to one of
    // the allowed crop aspects specified above, before being able to use other
    // features of the editor. The transform tool will only be presented
    // if the video does not already fit one of those allowed aspect ratios.
    forceCrop: true,
  };

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

Configure Transforms

items#

allowFreeCrop#

showResetButton#

forceCrop#

`items`#

`allowFreeCrop`#

`showResetButton`#

`forceCrop`#