From Remote URL

VideoEditor SDK supports loading fonts from a remote URL, this can be a resource hosted by a hosting provider or by your servers. Although the editor supports adding assets with remote URLs, we highly recommend that you manage the download of remote resources yourself, since this gives you more control over the whole process.

Download the font#

In order to download a custom font, we are using expo-file-system and save the remote resource to the temporary directory.

Adding custom font#

Using the downloaded resources, we are loading the custom font into the configuration. Each custom font takes an identifier, a name, a fontName as well as a fontURI that points to a local font file which can either be a TTF or an OTF font.

Handle user interaction#

For this example, we are using Recoil and Recoil Nexus state management to disable user interaction while the download task is executing. In production, you might want to indicate download progress here. When the download has finished, we can reenable user interaction and dismiss the progress indicator.


import { Configuration, VESDK } from "react-native-videoeditorsdk";
import * as FileSystem from "expo-file-system";
import { setRecoil } from "recoil-nexus";
import { interactionState } from "../../../../state/interactionState";

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

  // Disable user interaction while the download is active. In production you would
  // want to show a progress indicator for example.
  setRecoil(interactionState, false);

  try {
    const fontURL =
      "https://img.ly/static/example-assets/custom_font_raleway_regular.ttf";

    const downloadResult = await FileSystem.downloadAsync(
      fontURL,
      FileSystem.cacheDirectory + "custom_font_raleway_regular.ttf"
    );

    // 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: downloadResult.uri,
          },
        ],
      },
    };

    // 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);
  } finally {
    // Reenable user interaction. In production you would want to dismiss a
    // progress indicator for example.
    setRecoil(interactionState, true);
  }
};