Flatten Annotations in React Native

PSPDFKit for React Native allows you to create a new document with processed (embedded, flattened, removed, or printed) annotations using the PSPDFKit.processAnnotations(annotationChange, annotationType, sourceDocumentPath, processedDocumentPath) function.

Parameters

This guide shows how to use the processAnnotations() function and its parameters.

Annotation Change

The annotation change parameter is a string that specifies how PSPDFKit should include annotations in the resulting document.

Annotation Change
Description
flatten The annotation will be flattened. Its visual representation will be kept intact, but it can no longer be modified. The annotation object is removed from the document.
remove The annotation will be removed.
embed The annotation will be embedded into the resulting document, allowing it to still be modified.
print Processes the document for printing. Flattens annotations that can be printed and removes the remaining ones.

Annotation Type

The annotation type parameter is a string that specifies which annotation types PSPDFKit should process. See the list of all supported annotation types. To process all annotations (including forms), you need to set the value for the annotation type parameter to all or null.

Source Document Path

The source document path parameter is a string that specifies the path of the original document that PSPDFKit will process.

Warning

Make sure you save all annotations before processing the document. For more details, refer to our guide showing how to manually save annotations in a document.

Processed Document Path

The processed document path parameter is a string that specifies the path where the resultant processed file will be stored.

The processed document path should be in a writable location (e.g. the document directory). You can use a third-party dependency like react-native-fs to ensure that the processed document is stored in a writable location:

const RNFS = require('react-native-fs');
const processedDocumentPath =
	RNFS.DocumentDirectoryPath + '/flattened.pdf';

Usage

A typical call of the processAnnotations function would look like this:

const sourceDocumentPath = ...
const RNFS = require("react-native-fs");
const processedDocumentPath = RNFS.DocumentDirectoryPath + '/embedded.pdf';
PSPDFKit.processAnnotations('embed', 'ink', sourceDocumentPath, processedDocumentPath);

The example below shows how to implement a button that flattens all the annotations of the source document from the currently displayed PSPDFKitView in a newly processed PDF file:

const sourceDocumentPath = ... // The path of the document that's currently displayed in the `PSPDFKitView`.
const RNFS = require("react-native-fs");
...
<Button
	onPress={async () => {
		const processedDocumentPath = RNFS.DocumentDirectoryPath + '/flattened.pdf';
		// Delete the processed document if it already exists.
		RNFS.exists(processedDocumentPath)
			.then((exists) => {
				if (exists) {
					RNFS.unlink(processedDocumentPath);
				}
			})
			.then(() => {
				// First, save all annotations in the current document.
				this.pdfRef?.current?.getDocument().save().then((success) => {
					if (success) {
						// Then, flatten all the annotations.
						PSPDFKit.processAnnotations(
							'flatten',
							'all',
							sourceDocumentPath,
							processedDocumentPath,
						)
							.then((success) => {
								if (success) {
									// And finally, present the newly processed document with flattened annotations.
									PSPDFKit.present(processedDocumentPath, {});
								} else {
									alert('Failed to embed annotations.');
								}
							})
							.catch((error) => {
								alert(JSON.stringify(error));
							});
					} else {
						alert('Failed to save current document.');
					}
				});
			});
	}}
	title="Flatten All Annotations"
/>