Guides

Forms

ComPDF React Native SDK supports form callbacks and listener events for form style panels, field creation, field selection, and field deselection.

Available Callbacks and Events

Type	Name	Trigger Timing	Payload
Reader callback	onFormStyleDialogDismissed	Form style dialog is dismissed	{ type } event object
Reader callback	onInterceptWidgetActionCallback	A configured form widget is tapped and interception is enabled	CPDFWidget widget
Listener event	CPDFEvent.FORM_FIELDS_CREATED	Form field is created	CPDFWidget
Listener event	CPDFEvent.FORM_FIELDS_SELECTED	Form field is selected	CPDFWidget
Listener event	CPDFEvent.FORM_FIELDS_DESELECTED	Form field is deselected	CPDFWidget | null

Form Widget Action Intercept

Use form widget action interception when you want to replace the SDK's default form field tap behavior with your own UI or business logic. You can intercept all form widget actions with interceptAllFormWidgetActions, or intercept only selected widget types with interceptFormWidgetActions.

The recommended approach is to intercept only the widget types that need custom handling:

const configuration = ComPDFKit.getDefaultConfig({
  formsConfig: {
    interceptFormWidgetActions: [
      CPDFWidgetType.TEXT_FIELD,
      CPDFWidgetType.CHECKBOX,
      CPDFWidgetType.LISTBOX,
      CPDFWidgetType.COMBOBOX,
    ],
  },
});

Handle the intercepted widget in CPDFReaderView.onInterceptWidgetActionCallback. If you change a widget value, call _pdfDocument.updateWidget to apply the custom result to the document.

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={configuration}
  onInterceptWidgetActionCallback={async (widget) => {
    switch (widget.type) {
      case CPDFWidgetType.TEXT_FIELD: {
        const textWidget = widget as CPDFTextWidget;
        textWidget.update({ text: 'Handled by React Native' });
        await pdfReaderRef.current?._pdfDocument.updateWidget(textWidget);
        break;
      }
      case CPDFWidgetType.CHECKBOX: {
        const checkBox = widget as CPDFCheckboxWidget;
        checkBox.update({ isChecked: !checkBox.isChecked });
        await pdfReaderRef.current?._pdfDocument.updateWidget(checkBox);
        break;
      }
      case CPDFWidgetType.LISTBOX:
      case CPDFWidgetType.COMBOBOX: {
        const choiceWidget = widget as CPDFListboxWidget | CPDFComboboxWidget;
        choiceWidget.update({ selectItemAtIndex: 0 });
        await pdfReaderRef.current?._pdfDocument.updateWidget(choiceWidget);
        break;
      }
      default:
        break;
    }
  }}
/>

To intercept every form widget type, set interceptAllFormWidgetActions: true. Use it only when your app provides complete custom behavior for all form widgets.

Example Usage

const onFormFieldCreated = (widget: CPDFWidget) => {
  console.log('Form field created:', widget.type);
};

const onFormFieldSelected = (widget: CPDFWidget) => {
  console.log('Form field selected:', widget.type);
};

const onFormFieldDeselected = (widget: CPDFWidget | null) => {
  console.log('Form field deselected:', widget?.type);
};

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={configuration}
  onViewCreated={() => {
    pdfReaderRef.current?.addEventListener(CPDFEvent.FORM_FIELDS_CREATED, onFormFieldCreated);
    pdfReaderRef.current?.addEventListener(CPDFEvent.FORM_FIELDS_SELECTED, onFormFieldSelected);
    pdfReaderRef.current?.addEventListener(CPDFEvent.FORM_FIELDS_DESELECTED, onFormFieldDeselected);
  }}
  onFormStyleDialogDismissed={(event) => {
    console.log('Form style dialog dismissed:', event.type);
  }}
/>

Remove Event Listeners

pdfReaderRef.current?.removeEventListener(CPDFEvent.FORM_FIELDS_CREATED, onFormFieldCreated);