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;
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 from the Catalog example project.