Guides

Annotations

The ComPDF React Native SDK supports a variety of annotation events. Common annotation events include:

Event Name	Description
onAnnotationCreationPrepared	Triggered when the user is about to create a signature, stamp, hyperlink, or image annotation. Returns the annotation type.
CPDFEvent.ANNOTATIONS_CREATED	Triggered when the user creates an annotation. Returns the created annotation data.
CPDFEvent.ANNOTATIONS_SELECTED	Triggered when the user selects an annotation. Returns the selected annotation data.
CPDFEvent.ANNOTATIONS_DESELECTED	Triggered when the user deselects an annotation. Returns the deselected annotation data.

---

onAnnotationCreationPrepared

This event is triggered when entering annotation creation mode, either by clicking the signature, stamp, hyperlink, or image tools in the bottom toolbar, or programmatically via pdfReaderRef.current.setAnnotationMode().

Using this callback, you can show a custom selection UI in your React Native app instead of the default ComPDF selection dialogs. To disable the default selection dialogs for these four types of annotations, configure CPDFConfiguration as follows:

ComPDFKit.getDefaultConfig({
  annotationsConfig: {
    autoShowLinkDialog: false,
    autoShowPicPicker: false,
    autoShowSignPicker: false,
    autoShowStampPicker: false,
  }
});

To listen for the onAnnotationCreationPrepared event, pass a callback function when creating the CPDFReaderView:

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({
    modeConfig: {
      initialViewMode: "annotations",
    },
    annotationsConfig: {
      autoShowLinkDialog: false,
      autoShowPicPicker: false,
      autoShowSignPicker: false,
      autoShowStampPicker: false,
    }
  })}
  onAnnotationCreationPrepared={(type, annotation) => {
    // Triggered when entering creation mode for signatures, stamps, or image annotations
    // Hyperlink annotations trigger after the user draws a rectangle on the page and lifts their finger
    // You can display a custom selection UI for signatures, stamps, images, etc.
  }}
/>

---

Insert Signature

After selecting a signature image, insert it using:

await controller.prepareNextSignature('/path/to/signature.png');

Insert Stamp

After selecting a standard, image, or text stamp, insert it using:

// Insert a standard stamp. Check the CPDFStandardStamp enum for available types
await pdfReaderRef.current?.prepareNextStamp({ standardStamp: CPDFStandardStamp.Approved });

// Insert an image stamp
await pdfReaderRef.current?.prepareNextStamp({ imagePath: '/path/to/stamp.png' });

// Insert a text stamp
await pdfReaderRef.current.prepareNextStamp({
  textStamp: {
    content: "ComPDF",
    date: CPDFDateUtil.getTextStampDate({
      timeSwitch: true,
      dateSwitch: true,
    }),
    color: CPDFTextStampColor.blue,
    shape: CPDFTextStampShape.leftTriangle,
  },
});

This allows your React Native app to fully customize the selection process for signatures and stamps while leveraging ComPDF’s powerful annotation creation features.

---

Listening to Other Annotation Events

You can listen to other annotation events after creating the CPDFReaderView:

pdfReaderRef.current?.addEventListener(
  CPDFEvent.ANNOTATIONS_CREATED,
  (annotation) => {
    // 'annotation' is a CPDFAnnotation object or one of its subclasses
  }
);

pdfReaderRef.current?.addEventListener(
  CPDFEvent.ANNOTATIONS_SELECTED,
  (annotation) => {
    // 'annotation' is a CPDFAnnotation object or one of its subclasses
  }
);

pdfReaderRef.current?.addEventListener(
  CPDFEvent.ANNOTATIONS_DESELECTED,
  (annotation) => {
    // 'annotation' is a CPDFAnnotation object or one of its subclasses
  }
);