Configure Transforms

PhotoEditor 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 image.

`allowFreeCrop`#

While it is possible to configure the available preset aspect ratios for cropping, we can also disable free cropping to ensure that the photo 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 photo does not fit one of the allowed aspect ratios.


import { Configuration, PESDK } from "react-native-photoeditorsdk";

export const photoTransformConfigurationExample = async (): Promise<void> => {
  // Add a photo from the assets directory.
  const photo = require("../../../../assets/pesdk/LA.jpg");

  // 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 image 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 image
      // 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 image does not already fit one of those allowed aspect ratios.
    forceCrop: true,
  };

  try {
    // Open the photo editor and handle the export as well as any occuring errors.
    const result = await PESDK.openEditor(photo, configuration);

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

Configure Transforms

items#

allowFreeCrop#

showResetButton#

forceCrop#

`items`#

`allowFreeCrop`#

`showResetButton`#

`forceCrop`#