From App Bundle

PhotoEditor 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#

PhotoEditor 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, PESDK } from "react-native-photoeditorsdk";

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

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