From Remote URL

PhotoEditor SDK supports loading photo files from a remote URL, this can be a resource hosted by a photo hosting provider such as Vimeo or Wistia or your own servers.

Download the remote photo#

Although you can pass a URL directly to the editor, we strongly recommend that you manage downloading the remote resource yourself. This allows for more control over where and how the download task is being executed and avoids potential problems around UI locking.

Hence we download the photo using the expo-file-system module before loading it into the editor.

Open the editor#

When the download is finished we load the local photo URL into the editor and open it. Once the photo has been exported, we handle the event and possible occurring errors.

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 { PESDK } from "react-native-photoeditorsdk";
import * as FileSystem from "expo-file-system";
import { interactionState } from "../../../../state/interactionState";
import { setRecoil } from "recoil-nexus";

export const openPhotoFromRemoteExample = async (): Promise<void> => {
  // Although the editor supports opening a remote URL, we highly recommend
  // that you manage the download of the remote resource yourself, since this
  // gives you more control over the whole process. After successfully downloading
  // the file you should pass a local URL to the downloaded photo
  // to the editor. This example demonstrates how to achieve the former.
  const remoteURL = "https://img.ly/static/example-assets/LA.jpg";

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

  try {
    // Download the video.
    const { uri } = await FileSystem.downloadAsync(
      remoteURL,
      FileSystem.documentDirectory + "LA.jpg"
    );

    // Open the photo editor and handle the export as well as any occuring errors.
    const result = await PESDK.openEditor(uri);

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