Nutrient React Native SDK 4 migration guide

This guide covers migrating to Nutrient React Native SDK 4. The steps below only apply to projects where the new architecture is enabled. If you’re still using the old architecture, no changes are required.

Moved APIs in the new architecture

• disableAutomaticSaving is now a property of the PDFConfiguration class:

<NutrientView
  disableAutomaticSaving={true}
/>
<NutrientView
  configuration={{
    disableAutomaticSaving: true,
  }}
/>

• toolbarTitle is now a property of the PDFConfiguration class:

<NutrientView
  toolbarTitle={"My Title"}
/>
<NutrientView
  configuration={{
    toolbarTitle: "My Title",
  }}
/>

In the new architecture, the following deprecated APIs have been removed from the root of the NutrientView component and are now only available on the PDFDocument class.

• getAnnotations: Use this.pdfRef.current?.getDocument().getAnnotations() or getAnnotationsForPage() instead.
• addAnnotation: Use this.pdfRef.current?.getDocument().addAnnotations() or applyInstantJSON() instead.
• addAnnotations: Use this.pdfRef.current?.getDocument().addAnnotations() or applyInstantJSON() instead.
• removeAnnotation: Use this.pdfRef.current?.getDocument().removeAnnotations() instead.
• removeAnnotations: Use this.pdfRef.current?.getDocument().removeAnnotations() instead.
• getAllUnsavedAnnotations: Use this.pdfRef.current?.getDocument().getAllUnsavedAnnotations() instead.
• getAllAnnotations: Use this.pdfRef.current?.getDocument().getAnnotations() instead.
• getAnnotations: Use this.pdfRef.current?.getDocument().getAnnotations() or getAnnotationsForPage() instead.
• setAnnotationFlags: Use this.pdfRef.current?.getDocument().setAnnotationFlags() instead.
• getAnnotationFlags: Use this.pdfRef.current?.getDocument().getAnnotationFlags() instead.
• saveCurrentDocument: Use this.pdfRef.current?.getDocument().save() instead.
• importXFDF: Use this.pdfRef.current?.getDocument().importXFDF() instead.
• exportXFDF: Use this.pdfRef.current?.getDocument().exportXFDF() instead.
• setFormFieldValue: Use one of the update APIs on the PDFDocument.forms object instead.
• getFormFieldValue: Use the getFormElements API on the PDFDocument.forms object instead, and filter by fullyQualifiedFieldName.

The following APIs or properties have been consolidated into one.

• setLeftBarButtonItems: Use leftBarButtonItems in this.pdfRef.current?.setToolbar() instead.
• setRightBarButtonItems: Use rightBarButtonItems this.pdfRef.current?.setToolbar() instead.
• setToolbarMenuItems: Use toolbarMenuItems in this.pdfRef.current?.setToolbar() instead.
• leftBarButtonItems, rightBarButtonItems and toolbarMenuItems now fall under the toolbar prop in NutrientView:

<NutrientView
  leftBarButtonItems={{}}
  rightBarButtonItems={{}}
  toolbarMenuItems={{}}
/>
<NutrientView
  toolbar={{
    leftBarButtonItems: {},
    rightBarButtonItems: {},
    toolbarMenuItems: {}
  }}
/>

API signature changes

• All NotificationCenter callback events are now typed — for example:

this.pdfRef.current?.getNotificationCenter().subscribe(NotificationCenter.DocumentEvent.LOADED, (event: any) => {
   console.log(event);
});
this.pdfRef.current?.getNotificationCenter().subscribe(NotificationCenter.DocumentEvent.LOADED, (payload: NotificationCenter.DocumentLoadedPayload) => {
   console.log(payload.documentID);
 });

• The onDocumentLoadFailed and NotificationCenter.DocumentEvent.LOAD_FAILED callbacks now contain an object with a code and message field to indicate the error reason.
• In the new architecture, Nutrient.versionString is no longer a property; it’s now a method that returns the version string:

const version = Nutrient.versionString;
const version = Nutrient.versionString();

For more information, refer to the Nutrient React Native SDK 4 changelog.