From App Bundle

VideoEditor SDK supports adding predefined as well as custom filters from the app bundle.

Adding custom Filter Categories#

Custom filters can be added by specifying them in the configuration.filter.categories array. By default, the filters are grouped according to the provided FilterCategory instances passed to the configuration.

Each filter category takes a unique identifier, a name, an optional thumbnailURI as well as items - an array of Filters.

Adding custom Filters#

When adding custom filters, you can add both LUT filters as well as DuoTone filters.

LUT Filter#

Each filter takes a unique identifier, a name as well as a lutURI. Optionally, you can also provide a horizontalTileCount as well as a verticalTileCount. For further reference on the LUT filter concept, please have a look at the filter tool overview.

DuoTone Filter#

Each filter takes a unique identifier, a name, as well as a darkColor and a lightColor.

Adding existing Filters#

You can also add predefined filter categories that are shipped with the SDK. By default, all of them are contained in the configuration.filter.categories array. To add predefined filter groups, simply specify their identifiers. All available identifiers can be found here. For this example, only two predefined overlays are enabled.


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

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

  // Create a `Configuration` object.
  const configuration: Configuration = {
    filter: {
      categories: [
        {
          identifier: "custom_filter_group",
          name: "Custom",
          thumbnailURI: require("../../../../../assets/custom_filter_category.jpg"),
          items: [
            // A custom LUT Filter.
            {
              identifier: "custom_lut_filter",
              name: "Custom LUT",
              lutURI: require("../../../../../assets/custom_lut_invert.png"),
            },
            // A custom DuoTone Filter.
            {
              identifier: "custom_duotone_filter",
              name: "Custom DuoTone",
              darkColor: "#002259",
              lightColor: "#bd66ff",
            },
          ],
        },
        { identifier: "imgly_filter_category_bw" },
      ],
    },
  };

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