Define annotation behavior with flags on React Native

Every Annotation in a document can specify flags that further define its behavior and capabilities. With PSPDFKit, you can set these flags directly on your annotation objects using the setAnnotationFlags method found on the NutrientView component.

Capabilities of flags

Annotation flags are part of the PDF specification and define an annotation’s behavior, its presentation onscreen and on paper, and the available editing features given to your users. Here are a few examples of things you can do with flags:

• An annotation with an Annotation.Flags.INVISIBLE flag will ignore annotation appearance streams.
• An annotation with a flag set to Annotation.Flags.HIDDEN won’t be displayed or printed.
• An annotation with an Annotation.Flags.PRINT flag will be printed. Annotation.Flags.PRINT is the default flag.
• An annotation with a flag set to Annotation.Flag.NO_VIEW won’t be displayed onscreen, but printing might be allowed.
• Annotations with an Annotation.Flags.READ_ONLY flag don’t allow user interactions. The flag is ignored for widget annotations.
• If you want to prevent your users from editing an annotation, you can set the Annotation.Flags.LOCKED and Annotation.Flags.LOCKED_CONTENTS flags.

Usage example

Here’s an example of how to create a locked annotation, i.e. an annotation that can’t be modified by your users:

// Add a new annotation to your document.
const result = await this.pdfRef.current?.addAnnotation(annotationJSON);

// Grab the annotation GUID by registering for the `onAnnotationsChanged()` event.

// Set the desired annotation flags.
await this.pdfRef.current?.setAnnotationFlags(
  '596db901-f05c-4637-890d-da03a33eb0ef',
  [Annotation.Flags.READ_ONLY],
);

The current annotation flags can also be queried to append new flags before setting flags on the annotation again:

// Get the existing annotation flags.
const result = await this.pdfRef.current?.getAnnotationFlags(
  '596db901-f05c-4637-890d-da03a33eb0ef',
);

Alert.alert('PSPDFKit', `Annotation flags: ${JSON.stringify(flags)}`);

Refer to the ProgrammaticAnnotations.tsx example(opens in a new tab) in the Catalog example project for a runnable example.