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 you have enabled the new architecture. If you’re still using the old architecture, you don’t need to make any changes.

Enabling the new architecture

To use the new architecture with Nutrient React Native SDK 4, you need to enable it in your project.

iOS

Add the following at the beginning of your Podfile:

ENV['RCT_NEW_ARCH_ENABLED'] = '1'

Then reinstall your pods:

cd ios
rm -rf Pods Podfile.lock
pod install --repo-update

Android

Add the following to your android/gradle.properties file:

newArchEnabled=true

Then clean and rebuild your project:

cd android
./gradlew clean
cd ..
npx react-native run-android

License key and NativeModules.Nutrient API

The NativeModules.Nutrient API works the same way in both old and new architectures. The SDK uses TurboModules that export the same module name, so your existing code will continue to work:

import { NativeModules } from 'react-native';

const Nutrient = NativeModules.Nutrient;
Nutrient.setLicenseKey('YOUR_LICENSE_KEY');

You don’t need to change your license key setup when migrating to the new architecture.

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",
  }}
/>

The new architecture removes the following deprecated APIs from the root of the NutrientView component. Use the PDFDocument class instead.

• 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.
• 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 new architecture consolidates the following APIs into one. Refer to the setToolbar() method in the NutrientView API reference for details.

• setLeftBarButtonItems: Use leftBarButtonItems in this.pdfRef.current?.setToolbar() instead.
• setRightBarButtonItems: Use rightBarButtonItems in 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.