Serialization

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

Enable Serialization#

To use the serialization feature, you first need to enable this option within the configuration. Furthermore, you can select the output format of the serialization. For this example, we are retrieving the serialization as an object. However, you can also change this to be a local file URI.

Process Serialization data#

Once the editor has exported the image successfully, the PhotoEditorResult also contains a serialization that you can further process.

The next section explains how to restore the editor state by deserializing these settings.


import {
  Configuration,
  PESDK,
  SerializationExportType
} from "react-native-photoeditorsdk";

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

  // Create a `Configuration` object.
  const configuration: Configuration = {
    export: {
      serialization: {
        // Enable the serialization feature.
        enabled: true,

        // For this example, the serialization should be returned
        // as an object to simply logging it in the console.
        exportType: SerializationExportType.OBJECT,
      },
    },
  };

  try {
    // 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`
      // and the serialization is located at `result.serialization`.
      console.log(result.serialization);
    } else {
      // The user tapped on the cancel button within the editor.
      return;
    }
  } catch (error) {
    // There was an error generating the photo.
    console.log(error);
  }
};