Configure Texts

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

`actions`#

By default the editor allows all available text actions. For this example, we only allow changing the text color as well as the background color.

`canvasActions`#

By default the editor allows a bunch of canvas actions in the text tool. For this example, we only allow to delete a text as well as bring the text to the front in the view hierarchy.

`allowEmojis`#

By default, the editor allows adding emojis as text input. It is important to note that since emojis are not cross-platform compatible using the serialization feature to share edits across different platforms will result in emojis being rendered with the system's local set of emojis and therefore will appear differently. For this example emoji input is disabled to ensure a consistent cross-platform experience.

`backgroundColors`#

By default the editor provides a variety of different colors to customize the background color of the text. For this example only a small selection of colors is shown by default which could be based on favorite colors of the user.

`textColors`#

By default the editor provides a variety of different colors to customize the color of the text. For this example only a small selection of colors is shown by default which could be based on favorite colors of the user.

`defaultTextColor`#

By default the default text color is set to [1, 1, 1, 1]. For this example, the default color is set to black.


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

export const videoTextConfigurationExample = 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: {
        // By default the editor allows all available text actions.
        // For this example, we only allow changing the colors.
        actions: [TextAction.COLOR, TextAction.BACKGROUND_COLOR],

        // By default the editor allows a bunch of canvas actions in the text tool.
        // For this example, we only allow a couple of them.
        canvasActions: [CanvasAction.DELETE, CanvasAction.BRING_TO_FRONT],

        // By default the editor allows to add emojis as text input.
        // Since emojis are not cross-platform compatible, using the serialization
        // feature to share edits across different platforms will result in emojis
        // being rendered with the system's local set of emojis and therefore will
        // appear differently.
        // For this example emoji input is disabled to ensure a consistent cross-platform experience.
        allowEmojis: false,

        // By default the editor provides a variety of different
        // colors to customize the background color of the text.
        // For this example only a small selection of colors is shown by default
        // e.g. based on favorite colors of the user.
        backgroundColors: [
          { color: [0.9, 0.31, 0.31, 1], name: "Red" },
          { color: [0.33, 1.0, 0.53, 1], name: "Green" },
          { color: [1.0, 0.97, 0.39, 1], name: "Yellow" },
        ],

        // By default the editor provides a variety of different
        // colors to customize the color of the text.
        // For this example only a small selection of colors is shown by default
        // e.g. based on favorite colors of the user.
        textColors: [
          { color: [0, 0, 0, 1], name: "White" },
          { color: [1, 1, 1, 1], name: "Black" },
        ],

        // By default the default text color is set to [1, 1, 1, 1].
        // For this example, the default color is set to black.
        defaultTextColor: [0, 0, 0, 1],
      },
    };

    // 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 Texts

actions#

canvasActions#

allowEmojis#

backgroundColors#