From App Bundle

VideoEditor SDK supports adding custom fonts from the app bundle. In this example, we add the font Raleway as well as a system font.

Custom Fonts#

VideoEditor SDK supports custom TTF and OTF fonts. Each custom font takes an identifier, a name, a fontName as well as a fontURI that points to the local font file. Remote resources are also supported, however, they need to be downloaded in advance. For further reference, please have a look at the dedicated section on this.

System Fonts#

Furthermore, the SDK also supports adding system fonts. To add these, simply add the matching fontName, as well as your identifier and the name.


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

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

    // Create a `Configuration` object.
    const configuration: Configuration = {
      text: {
        fonts: [
          // A custom font.
          {
            identifier: "custom_font_raleway_regular",
            name: "Raleway",
            fontName: "custom_font_raleway_regular",
            fontURI: require("../../../../../assets/custom_font_raleway_regular.ttf"),
          },
          // A system font.
          {
            identifier: "system_font_helvetica",
            name: "Helvetica",
            fontName: "Helvetica",
          },
        ],
      },
    };

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