Fill PDF form fields programmatically in React Native

Nutrient React Native SDK allows you to fill form fields programmatically. Each form field has a fully qualified name used to identify and retrieve a specific form field object before filling it.

Getting the fully qualified name of a form field

The example below shows how to obtain the fully qualified name of the first form field of a document:

const formElements = await this.pdfRef.current?.getDocument().forms.getFormElements();
const firstFormFieldName = formElements[0].fullyQualifiedFieldName;

The getFormElements method returns an array of FormElement objects. See the API reference for a list of available objects.

Filling the value of a form field

The example below shows how to fill the value of a form field with a fully qualified name (fullyQualifiedFieldName) and two radio buttons with fully qualified names (radioFieldName_0 and radioFieldName_1):

this.pdfRef.current
  ?.getDocument()
  .forms.getFormElements()
  .updateTextFormFieldValue(
    'fullyQualifiedFieldName',
    'Form Field Value',
  );

// For radio buttons and checkboxes, use `true` and `false`.
this.pdfRef.current
  ?.getDocument()
  .forms.getFormElements()
  .updateButtonFormFieldValue('radioFieldName_0', true);
this.pdfRef.current
  ?.getDocument()
  .forms.getFormElements()
  .updateButtonFormFieldValue('radioFieldName_1', false);

For more details and sample code, see the ProgrammaticFormFilling.tsx example(opens in a new tab) from the Catalog example project.