Embed annotations in a PDF file on React Native

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

Parameters

annotationChange is a string that specifies how PSPDFKit should include annotations in the resulting document. For embedding annotations while still allowing them to be modified, the annotation change parameter should be set to embed. See our annotation flattening guide for a description of the other available processing modes.

annotationType is the annotation type parameter 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.

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

processedDocumentPath 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';

Use

Here’s how the function call for embedding all ink annotations into a PDF, which will then be saved to embedded.pdf, would look:

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 embeds 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, embed all the annotations.
						PSPDFKit.processAnnotations(
							'embed',
							'all',
							sourceDocumentPath,
							processedDocumentPath,
						)
							.then((success) => {
								if (success) {
									// And finally, present the newly processed document with embedded annotations.
									PSPDFKit.present(processedDocumentPath, {});
								} else {
									alert('Failed to embed annotations.');
								}
							})
							.catch((error) => {
								alert(JSON.stringify(error));
							});
					} else {
						alert('Failed to save current document.');
					}
				});
			});
	}}
	title="Embed All Annotations"
/>