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 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.

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"
/>