--- title: "Nutrient React Native SDK 4 migration guide" canonical_url: "https://www.nutrient.io/guides/react-native/migration-guides/react-native-4-migration-guide/" md_url: "https://www.nutrient.io/guides/react-native/migration-guides/react-native-4-migration-guide.md" last_updated: "2026-06-02T20:21:13.909Z" description: "Learn how to migrate to Nutrient React Native SDK 4.0." --- **Backward compatibility** — This version adds support for React Native’s [new architecture](https://reactnative.dev/architecture/landing-page), but the SDK maintains backward compatibility for projects still using the old architecture. 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`: ```ruby ENV['RCT_NEW_ARCH_ENABLED'] = '1' ``` Then reinstall your pods: ```bash cd ios rm -rf Pods Podfile.lock pod install --repo-update ``` ### Android Add the following to your `android/gradle.properties` file: ```properties newArchEnabled=true ``` Then clean and rebuild your project: ```bash 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: ```js 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: ```diff - + ``` - `toolbarTitle` is now a property of the `PDFConfiguration` class: ```diff - + ``` The new architecture removes the following deprecated APIs from the root of the `NutrientView` component. Use the [`PDFDocument`](https://www.nutrient.io/api/react-native/PDFDocument.html) class instead. - `getAnnotations`: Use [`this.pdfRef.current?.getDocument().getAnnotations()`](https://www.nutrient.io/api/react-native/PDFDocument.html#.getAnnotations) or [`getAnnotationsForPage()`](https://www.nutrient.io/api/react-native/PDFDocument.html#.getAnnotationsForPage) instead. - `addAnnotation`: Use [`this.pdfRef.current?.getDocument().addAnnotations()`](https://www.nutrient.io/api/react-native/PDFDocument.html#.addAnnotations) or [`applyInstantJSON()`](https://www.nutrient.io/api/react-native/PDFDocument.html#.applyInstantJSON) instead. - `addAnnotations`: Use [`this.pdfRef.current?.getDocument().addAnnotations()`](https://www.nutrient.io/api/react-native/PDFDocument.html#.addAnnotations) or [`applyInstantJSON()`](https://www.nutrient.io/api/react-native/PDFDocument.html#.applyInstantJSON) instead. - `removeAnnotation`: Use [`this.pdfRef.current?.getDocument().removeAnnotations()`](https://www.nutrient.io/api/react-native/PDFDocument.html#.removeAnnotations) instead. - `removeAnnotations`: Use [`this.pdfRef.current?.getDocument().removeAnnotations()`](https://www.nutrient.io/api/react-native/PDFDocument.html#.removeAnnotations) instead. - `getAllUnsavedAnnotations`: Use [`this.pdfRef.current?.getDocument().getAllUnsavedAnnotations()`](https://www.nutrient.io/api/react-native/PDFDocument.html#.getAllUnsavedAnnotations) instead. - `getAllAnnotations`: Use [`this.pdfRef.current?.getDocument().getAnnotations()`](https://www.nutrient.io/api/react-native/PDFDocument.html#.getAnnotations) instead. - `setAnnotationFlags`: Use [`this.pdfRef.current?.getDocument().setAnnotationFlags()`](https://www.nutrient.io/api/react-native/PDFDocument.html#.setAnnotationFlags) instead. - `getAnnotationFlags`: Use [`this.pdfRef.current?.getDocument().getAnnotationFlags()`](https://www.nutrient.io/api/react-native/PDFDocument.html#.getAnnotationFlags) instead. - `saveCurrentDocument`: Use [`this.pdfRef.current?.getDocument().save()`](https://www.nutrient.io/api/react-native/PDFDocument.html#.save) instead. - `importXFDF`: Use [`this.pdfRef.current?.getDocument().importXFDF()`](https://www.nutrient.io/api/react-native/PDFDocument.html#.importXFDF) instead. - `exportXFDF`: Use [`this.pdfRef.current?.getDocument().exportXFDF()`](https://www.nutrient.io/api/react-native/PDFDocument.html#.exportXFDF) instead. - `setFormFieldValue`: Use one of the `update` APIs on the [`PDFDocument.forms`](https://www.nutrient.io/api/react-native/Forms.html) object instead. - `getFormFieldValue`: Use the [`getFormElements()`](https://www.nutrient.io/api/react-native/Forms.html#.getFormElements) API on the [`PDFDocument.forms`](https://www.nutrient.io/api/react-native/Forms.html) object instead, and filter by `fullyQualifiedFieldName`. The new architecture consolidates the following APIs into one. Refer to the [`setToolbar()`](https://www.nutrient.io/api/react-native/NutrientView.html#.setToolbar) method in the `NutrientView` API reference for details. - `setLeftBarButtonItems`: Use `leftBarButtonItems` in [`this.pdfRef.current?.setToolbar()`](https://www.nutrient.io/api/react-native/NutrientView.html#.setToolbar) instead. - `setRightBarButtonItems`: Use `rightBarButtonItems` in [`this.pdfRef.current?.setToolbar()`](https://www.nutrient.io/api/react-native/NutrientView.html#.setToolbar) instead. - `setToolbarMenuItems`: Use `toolbarMenuItems` in [`this.pdfRef.current?.setToolbar()`](https://www.nutrient.io/api/react-native/NutrientView.html#.setToolbar) instead. - `leftBarButtonItems`, `rightBarButtonItems` and `toolbarMenuItems` now fall under the `toolbar` prop in `NutrientView`: ```diff - + ``` ## API signature changes - All `NotificationCenter` callback events are now typed. For example: ```diff - 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: ```diff - const version = Nutrient.versionString; + const version = Nutrient.versionString(); ``` For more information, refer to the [Nutrient React Native SDK 4 changelog](https://www.nutrient.io/guides/react-native/changelog.md#4.0). --- ## Related pages - [React Native 2 3 Migration Guide](/guides/react-native/migration-guides/react-native-2-3-migration-guide.md) - [React Native 2 13 Migration Guide](/guides/react-native/migration-guides/react-native-2-13-migration-guide.md) - [React Native 2 9 Migration Guide](/guides/react-native/migration-guides/react-native-2-9-migration-guide.md) - [React Native 2 16 Migration Guide](/guides/react-native/migration-guides/react-native-2-16-migration-guide.md) - [How to upgrade to the latest React Native version](/guides/react-native/migration-guides/upgrading.md) - [React Native 3 Migration Guide](/guides/react-native/migration-guides/react-native-3-migration-guide.md) - [React Native 2 8 Migration Guide](/guides/react-native/migration-guides/react-native-2-8-migration-guide.md) - [React Native 2 12 Migration Guide](/guides/react-native/migration-guides/react-native-2-12-migration-guide.md) - [React Native 2 2 Migration Guide](/guides/react-native/migration-guides/react-native-2-2-migration-guide.md)