Deserialization

PhotoEditor SDK for React Native supports serialization and deserialization, allowing your users to save and revise their work at any time.

Loading a serialization#

To restore a previously saved state, we first need to retrieve the serialization. For this example, we have a local serialization file that should be used.

To open the editor with the selected serialization, you need to pass it to the PESDK.openEditor method as the serialization parameter.


import { PESDK } from "react-native-photoeditorsdk";

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

  // Load the serialized settings from the app bundle. You could also load this from a remote URL for example.
  const serialization = require("../../../../assets/pesdk/photo_serialization.json");

  try {
    // Open the video editor and handle the export as well as any occuring errors.
    // Pass the serialization to the editor as well.
    const result = await PESDK.openEditor(photo, undefined, serialization);

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