---
title: "How to add annotations to a PDF using React Native"
canonical_url: "https://www.nutrient.io/blog/react-native-pdf-annotation/"
md_url: "https://www.nutrient.io/blog/react-native-pdf-annotation.md"
last_updated: "2026-08-05T08:27:03.654Z"
description: "Learn how to add ink and text annotations to PDFs in React Native using the Nutrient SDK — set an annotation author and embed annotations directly into the file."
---

In this post, you’ll learn how to use React Native to add annotations to PDF documents.

Nutrient lets you add document annotation functionality to your React Native application. This tutorial will explore how to add ink and text annotations, how to set an annotation author, and how to embed annotations into PDFs.

## Nutrient React Native PDF library

Nutrient offers a commercial [React Native PDF library](https://www.nutrient.io/guides/react-native.md) for viewing, generating, annotating, and editing PDFs. You can use it to quickly add PDF functionality to your React Native applications.

It offers a variety of additional features and capabilities, including:

- [17+ out-of-the-box annotations](https://www.nutrient.io/guides/react-native/annotations.md) to mark up, draw on, and add comments to documents.

- [PDF editing](https://www.nutrient.io/sdk/solutions/editing/) to merge, split, rotate, and crop documents.

- [PDF forms](https://www.nutrient.io/guides/react-native/forms.md) to create, fill, and capture PDF form data.

- [Digital signatures](https://www.nutrient.io/sdk/solutions/signing/) to validate the authenticity and integrity of a PDF.

New to React Native PDFs? Start with [how to build a React Native PDF viewer](https://www.nutrient.io/blog/how-to-build-a-react-native-pdf-viewer.md) for the end-to-end setup, then come back here to add annotations.

## Requirements

For this tutorial, you’ll need a React Native [development environment](https://reactnative.dev/docs/environment-setup) for running React Native projects using the React Native command-line interface (CLI) — not the Expo CLI — and configured for the platforms you want to build (Android, iOS, or both).

## Dependencies

There are two dependencies you’ll need:

- [`@nutrient-sdk/react-native`](https://github.com/PSPDFKit/react-native)

- [`react-native-fs`](https://www.npmjs.com/package/react-native-fs)

## Getting started

Here’s an overview of the steps you’ll follow:

1. [Installing the necessary dependencies](#installing-the-necessary-dependencies)

2. [Displaying a PDF document](#displaying-a-pdf-document)

3. [Creating ink annotations](#creating-ink-annotations)

4. [Adding text annotations](#adding-text-annotations)

5. [Setting an annotation author](#setting-an-annotation-author)

6. [Embedding annotations into a PDF](#embedding-annotations-into-a-pdf)

## Installing the necessary dependencies

1. Create a fresh React Native project:

   ```bash

   npx react-native@latest init NutrientAnnotations
   ```

2. Change to the project directory and add the [Nutrient React Native SDK](https://github.com/PSPDFKit/react-native):

   ```bash

   cd NutrientAnnotations
   yarn add @nutrient-sdk/react-native
   ```

3. Add the [`react-native-fs`](https://www.npmjs.com/package/react-native-fs) dependency:

   ```

   yarn add react-native-fs
   ```

4. Now, install all the dependencies for the project:

   ```

   yarn install
   ```

5. Open your project’s `android/build.gradle` file and add the Nutrient repository so Gradle can download the Nutrient library:

   ```diff

   allprojects {
       repositories {
           mavenCentral()
   +       maven { url 'https://my.nutrient.io/maven/' }
       }
   }
   ```

6. Open your project’s `ios/Podfile` and set the platform version to iOS 15. The Nutrient pod is linked automatically through the npm package, so no manual `pod` entry is required:

   ```diff

   - platform :ios, '11.0'
   + platform :ios, '15.0'
   ```

7. Change to the `ios` directory and install the CocoaPods dependencies:

   ```bash

   cd ios
   pod install
   ```

8. Open your project’s Workspace in Xcode:

   ```bash

   open NutrientAnnotations.xcworkspace
   ```

9. Make sure the deployment target is set to 15.0 or higher.![Image showing Xcode interface to set deployment target](@/assets/images/blog/2023/react-native-pdf-annotation/xcode-deployment-target.png)

10. Change `View controller-based status bar appearance` to `YES` in your project’s `Info.plist`.![Image showing the project’s info.plist in Xcode](@/assets/images/blog/2023/react-native-pdf-annotation/xcode-info-plist.png)

## Displaying a PDF document

1. Add the PDF document you want to display to your application by dragging it into your project. In the dialogue that’s displayed, select Finish to accept the default integration options. Any PDF will work as a sample.

2. Change to the root of your project and create the `assets` directory:

   ```

   cd..
   mkdir android/app/src/main/assets
   ```

3. Then, copy the PDF document you want to display to the `assets` directory.

4. Open the `App.js` file and delete all its contents. Then, add the following import statements:

   ```js

   import React, { Component } from 'react';
   import { Platform, NativeModules } from 'react-native';
   import NutrientView from '@nutrient-sdk/react-native';
   ```

5. Point to the document you added earlier:

   ```js

   const DOCUMENT =
   	Platform.OS === 'ios'? 'Document.pdf'
   		: 'file:///android_asset/Document.pdf';
   ```

6. Now, display the document with the `NutrientView` component:

   ```js

   <NutrientView
   	document={DOCUMENT}
   	configuration={{
   		showThumbnailBar: 'scrollable',
   		pageTransition: 'scrollContinuous',
   		scrollDirection: 'vertical',
   	}}
   	ref={this.pdfRef}
   	fragmentTag="PDF1"
   	style={{ flex: 1 }}
   />
   ```

7. Put it all together:

   ```js

   import React, { Component } from 'react';
   import { Platform, NativeModules } from 'react-native';
   import NutrientView from '@nutrient-sdk/react-native';

   const Nutrient = NativeModules.Nutrient;
   Nutrient.setLicenseKey(null);

   const DOCUMENT =
   	Platform.OS === 'ios'? 'Document.pdf'
   		: 'file:///android_asset/Document.pdf';

   export default class NutrientDemo extends Component {
   	constructor(props) {
   		super(props);
   		this.pdfRef = React.createRef();
   	}

   	render() {
   		return (
   			<NutrientView
   				document={DOCUMENT}
   				configuration={{
   					showThumbnailBar: 'scrollable',
   					pageTransition: 'scrollContinuous',
   					scrollDirection: 'vertical',
   				}}
   				ref={this.pdfRef}
   				fragmentTag="PDF1"
   				style={{ flex: 1 }}
   			/>
   		);
   	}
   }
   ```

8. Open your terminal and launch your application:

   ```bash

   npx react-native run-android
   ```![GIF showing the result of 'npx react-native run-android'](@/assets/images/blog/2023/react-native-pdf-annotation/display-pdf-android.gif)

```bash

npx react-native run-ios

```![GIF showing the result of 'npx react-native run-ios'](@/assets/images/blog/2023/react-native-pdf-annotation/display-pdf-ios.gif)

## Creating ink annotations

1. Nutrient React Native SDK leverages [Instant JSON](https://www.nutrient.io/guides/react-native/annotations/import-and-export/instant-json.md) to import and export annotations. The PDF changes, such as annotations, can be stored in a separate JSON file with Instant JSON and added as an overlay to the existing PDF. You’ll use the following JSON for this example:

```json

const annotationJSONInk = {
    bbox: [
        89.586334228515625, 98.5791015625, 143.12948608398438,
        207.1583251953125,
    ],
    isDrawnNaturally: false,
    lineWidth: 5,
    lines: {
        intensities: [
            [0.5, 0.5, 0.5],
            [0.5, 0.5, 0.5],
        ],
        points: [
            [
                [92.086334228515625, 101.07916259765625],
                [92.086334228515625, 202.15826416015625],
                [138.12950134277344, 303.2374267578125],
            ],
            [
                [184.17266845703125, 101.07916259765625],
                [184.17266845703125, 202.15826416015625],
                [230.2158203125, 303.2374267578125],
            ],
        ],
    },
    opacity: 1,
    pageIndex: 0,
    name: 'A167811E-6D10-4546-A147-B7AD775FE8AC',
    strokeColor: '#DC143C',

    type: 'pspdfkit/ink',
    v: 1,
};

```

The `bbox` array contains the size and positional data for the annotation’s bounding box.

2. You can add ink annotations to your document by passing the JSON above to the `getDocument().addAnnotations([jsonAnnotation])` function. Create a `Button` component, which will trigger the `addAnnotations` function when pressed:

```js

<Button
	onPress={() => {
		const annotationJSONInk = {
			bbox: [
				89.586334228515625,
				98.5791015625,
				143.12948608398438,
				207.1583251953125,
			],
			isDrawnNaturally: false,
			lineWidth: 5,
			lines: {
				intensities: [
					[0.5, 0.5, 0.5],
					[0.5, 0.5, 0.5],
				],
				points: [
					[
						[92.086334228515625, 101.07916259765625],
						[92.086334228515625, 202.15826416015625],
						[138.12950134277344, 303.2374267578125],
					],
					[
						[184.17266845703125, 101.07916259765625],
						[184.17266845703125, 202.15826416015625],
						[230.2158203125, 303.2374267578125],
					],
				],
			},
			opacity: 1,
			pageIndex: 0,
			name: 'A167811E-6D10-4546-A147-B7AD775FE8AC',
			strokeColor: '#DC143C',

			type: 'pspdfkit/ink',
			v: 1,
		};
		this.pdfRef.current?.getDocument().addAnnotations([annotationJSONInk]).then((result) => {
				if (result) {
					alert('Annotation was successfully added.');
				} else {
					alert('Failed to add annotation.');
				}
			}).catch((error) => {
				alert(JSON.stringify(error));
			});
	}}
	title="Add Ink Annotation"
	accessibilityLabel="Add Ink Annotation"
/>

```

3. Put it all together:

```js

import React, { Component } from 'react';
import { Platform, Button, NativeModules } from 'react-native';
import NutrientView from '@nutrient-sdk/react-native';

const Nutrient = NativeModules.Nutrient;
Nutrient.setLicenseKey(null);

const DOCUMENT =
	Platform.OS === 'ios'? 'Document.pdf'
		: 'file:///android_asset/Document.pdf';

export default class NutrientDemo extends Component {
	constructor(props) {
		super(props);
		this.pdfRef = React.createRef();
	}

	render() {
		return (
			<>
				<NutrientView
					document={DOCUMENT}
					configuration={{
						showThumbnailBar: 'scrollable',
						pageTransition: 'scrollContinuous',
						scrollDirection: 'vertical',
					}}
					ref={this.pdfRef}
					fragmentTag="PDF1"
					style={{ flex: 1 }}
				/>

				<Button
					onPress={() => {
						const annotationJSONInk = {
							bbox: [
								89.586334228515625,
								98.5791015625,
								143.12948608398438,
								207.1583251953125,
							],
							isDrawnNaturally: false,
							lineWidth: 5,
							lines: {
								intensities: [
									[0.5, 0.5, 0.5],
									[0.5, 0.5, 0.5],
								],
								points: [
									[
										[92.086334228515625, 101.07916259765625],
										[92.086334228515625, 202.15826416015625],
										[138.12950134277344, 303.2374267578125],
									],
									[
										[184.17266845703125, 101.07916259765625],
										[184.17266845703125, 202.15826416015625],
										[230.2158203125, 303.2374267578125],
									],
								],
							},
							opacity: 1,
							pageIndex: 0,
							name: 'A167811E-6D10-4546-A147-B7AD775FE8AC',
							strokeColor: '#DC143C',

							type: 'pspdfkit/ink',
							v: 1,
						};
						this.pdfRef.current?.getDocument().addAnnotations([annotationJSONInk]).then((result) => {
								if (result) {
									alert('Annotation was successfully added.');
								} else {
									alert('Failed to add annotation.');
								}
							}).catch((error) => {
								alert(JSON.stringify(error));
							});
					}}
					title="Add Ink Annotation"
					accessibilityLabel="Add Ink Annotation"
				/>
			</>
		);
	}
}

```

Replace the contents of `App.js` with the code above for a working example.

4. Launch the app:

```bash

npx react-native run-android

```![GIF showing the result of 'npx react-native run-android'](@/assets/images/blog/2023/react-native-pdf-annotation/ink-annotation-android.gif)

```bash

npx react-native run-ios

```![GIF showing the result of 'npx react-native run-ios'](@/assets/images/blog/2023/react-native-pdf-annotation/ink-annotation-ios.gif)

## Adding text annotations

1. Similar to ink annotations, you’ll define the text annotation JSON first:

```json

const annotationJSONText = {
  bbox: [
    89.586334228515625, 98.5791015625, 143.12948608398438,
    207.1583251953125,
  ],
  horizontalAlign: 'center',
  verticalAlign: 'center',
  isBold: true,
  text: 'Welcome to\nNutrient',
  font: 'Helvetica',
  fontColor: '#DC143C',

  fontSize: 24.0,

  opacity: 1,
  pageIndex: 0,
  name: 'A167811E-6D10-4546-A147-B7AD775FE8AC',
  type: 'pspdfkit/text',
  v: 1,
};

```

2. Create a `Button` component, which will trigger the `addAnnotations([jsonAnnotation])` function when pressed:

```js

<Button
	onPress={() => {
		const annotationJSONText = {
			bbox: [
				89.586334228515625,
				98.5791015625,
				143.12948608398438,
				207.1583251953125,
			],
			horizontalAlign: 'center',
			verticalAlign: 'center',
			isBold: true,
			text: 'Welcome to\nNutrient',
			font: 'Helvetica',
			fontColor: '#DC143C',

			fontSize: 24.0,

			opacity: 1,
			pageIndex: 0,
			name: 'A167811E-6D10-4546-A147-B7AD775FE8AC',
			type: 'pspdfkit/text',
			v: 1,
		};
		this.pdfRef.current?.getDocument().addAnnotations([annotationJSONText]).then((result) => {
				if (result) {
					alert('Annotation was successfully added.');
				} else {
					alert('Failed to add annotation.');
				}
			}).catch((error) => {
				alert(JSON.stringify(error));
			});
	}}
	title="Add Text Annotation"
	accessibilityLabel="Add Text Annotation"
/>

```

3. In your `App.js` file, you’ll have:

```js

import React, { Component } from 'react';
import { Platform, Button, NativeModules } from 'react-native';
import NutrientView from '@nutrient-sdk/react-native';

const Nutrient = NativeModules.Nutrient;
Nutrient.setLicenseKey(null);

const DOCUMENT =
	Platform.OS === 'ios'? 'Document.pdf'
		: 'file:///android_asset/Document.pdf';

export default class NutrientDemo extends Component {
	constructor(props) {
		super(props);
		this.pdfRef = React.createRef();
	}

	render() {
		return (
			<>
				<NutrientView
					document={DOCUMENT}
					configuration={{
						showThumbnailBar: 'scrollable',
						pageTransition: 'scrollContinuous',
						scrollDirection: 'vertical',
					}}
					ref={this.pdfRef}
					fragmentTag="PDF1"
					style={{ flex: 1 }}
				/>

				<Button
					onPress={() => {
						const annotationJSONInk = {
							bbox: [
								89.586334228515625,
								98.5791015625,
								143.12948608398438,
								207.1583251953125,
							],
							isDrawnNaturally: false,
							lineWidth: 5,
							lines: {
								intensities: [
									[0.5, 0.5, 0.5],
									[0.5, 0.5, 0.5],
								],
								points: [
									[
										[92.086334228515625, 101.07916259765625],
										[92.086334228515625, 202.15826416015625],
										[138.12950134277344, 303.2374267578125],
									],
									[
										[184.17266845703125, 101.07916259765625],
										[184.17266845703125, 202.15826416015625],
										[230.2158203125, 303.2374267578125],
									],
								],
							},
							opacity: 1,
							pageIndex: 0,
							name: 'A167811E-6D10-4546-A147-B7AD775FE8AC',
							strokeColor: '#DC143C',

							type: 'pspdfkit/ink',
							v: 1,
						};
						this.pdfRef.current?.getDocument().addAnnotations([annotationJSONInk]).then((result) => {
								if (result) {
									alert('Annotation was successfully added.');
								} else {
									alert('Failed to add annotation.');
								}
							}).catch((error) => {
								alert(JSON.stringify(error));
							});
					}}
					title="Add Ink Annotation"
					accessibilityLabel="Add Ink Annotation"
				/>

				<Button
					onPress={() => {
						const annotationJSONText = {
							bbox: [
								89.586334228515625,
								98.5791015625,
								143.12948608398438,
								207.1583251953125,
							],
							horizontalAlign: 'center',
							verticalAlign: 'center',
							isBold: true,
							text: 'Welcome to\nNutrient',
							font: 'Helvetica',
							fontColor: '#DC143C',

							fontSize: 24.0,

							opacity: 1,
							pageIndex: 0,
							name: 'A167811E-6D10-4546-A147-B7AD775FE8AC',
							type: 'pspdfkit/text',
							v: 1,
						};
						this.pdfRef.current?.getDocument().addAnnotations([annotationJSONText]).then((result) => {
								if (result) {
									alert('Annotation was successfully added.');
								} else {
									alert('Failed to add annotation.');
								}
							}).catch((error) => {
								alert(JSON.stringify(error));
							});
					}}
					title="Add Text Annotation"
					accessibilityLabel="Add Text Annotation"
				/>
			</>
		);
	}
}

```

Replace the contents of `App.js` with the code above for a working example.

4. Launch your app:

```bash

npx react-native run-android

```

```bash

npx react-native run-ios

```![GIF showing the result of 'npx react-native run-ios'](@/assets/images/blog/2023/react-native-pdf-annotation/text-annotation-ios.gif)

## Setting an annotation author

Programmatically adding an author name is accomplished by passing the `annotationAuthorName` prop in the `NutrientView` component:

```diff

<NutrientView
  document={DOCUMENT}
  annotationAuthorName={'Jane Appleseed'}
  configuration={{
    showThumbnailBar: 'scrollable',
    pageTransition: 'scrollContinuous',
    scrollDirection: 'vertical',
  }}
  ref={this.pdfRef}
  fragmentTag="PDF1"
  style={{flex: 1}}
/>

```

## Embedding annotations into a PDF

Before creating a new document with embedded annotations, it’s necessary to save all the annotations in the current document first. This can be done by calling the `getDocument().save()` function.

After a successful save, call the `Nutrient.processAnnotations(annotationChange, annotationType, sourceDocumentPath, processedDocumentPath)` function to create a new document with embedded annotations.

Once again, you’ll create a `Button` component, which will trigger the above steps. Don’t forget to import the `react-native-fs` and `NativeModules` before continuing:

```diff

import React, {Component} from 'react';

- import {Platform, Button} from 'react-native';

+ import {Platform, Button, NativeModules} from 'react-native';
import NutrientView from '@nutrient-sdk/react-native';
import RNFS from 'react-native-fs';

const DOCUMENT =
  Platform.OS === 'ios'? 'Document.pdf' : 'file:///android_asset/Document.pdf';

+ const {Nutrient} = NativeModules;

+ Nutrient.setLicenseKey(null);...

```

```js

<Button
	onPress={async () => {
		const processedDocumentPath =
			RNFS.DocumentDirectoryPath + '/flattened.pdf';
		// Delete the processed document if it already exists.
		RNFS.exists(processedDocumentPath).then((exists) => {
				if (exists) {
					RNFS.unlink(processedDocumentPath);
				}
			}).then(() => {
				// First, save all annotations in the current document.
				this.pdfRef.current?.getDocument().save().then((success) => {
						if (success) {
							console.log(Nutrient);
							// Then, embed all the annotations.
							Nutrient.processAnnotations(
								'embed',
								'all',
								DOCUMENT,
								processedDocumentPath,
							).then((success) => {
									if (success) {
										// And finally, present the newly processed document with embedded annotations.
										Nutrient.present(
											processedDocumentPath,
											{},
										);
									} else {
										alert('Failed to embed annotations.');
									}
								}).catch((error) => {
									alert(JSON.stringify(error));
								});
						} else {
							alert('Failed to save current document.');
						}
					});
			});
	}}
	title="Embed All Annotations"
/>

```

You’ll have the following in your `App.js`:

```js

import React, { Component } from 'react';
import { Platform, Button, NativeModules } from 'react-native';
import NutrientView from '@nutrient-sdk/react-native';
import RNFS from 'react-native-fs';

const DOCUMENT =
	Platform.OS === 'ios'? 'Document.pdf'
		: 'file:///android_asset/Document.pdf';

const { Nutrient } = NativeModules;
Nutrient.setLicenseKey(null);

export default class NutrientDemo extends Component {
	constructor(props) {
		super(props);
		this.pdfRef = React.createRef();
	}

	render() {
		return (
				<>
				<NutrientView
					document={DOCUMENT}
					annotationAuthorName={'Jane Appleseed'}
					configuration={{
						showThumbnailBar: 'scrollable',
						pageTransition: 'scrollContinuous',
						scrollDirection: 'vertical',
					}}
					ref={this.pdfRef}
					fragmentTag="PDF1"
					style={{ flex: 1 }}
				/>

				<Button
					onPress={() => {
						const annotationJSONInk = {
							bbox: [
								89.586334228515625,
								98.5791015625,
								143.12948608398438,
								207.1583251953125,
							],
							isDrawnNaturally: false,
							lineWidth: 5,
							lines: {
								intensities: [
									[0.5, 0.5, 0.5],
									[0.5, 0.5, 0.5],
								],
								points: [
									[
										[92.086334228515625, 101.07916259765625],
										[92.086334228515625, 202.15826416015625],
										[138.12950134277344, 303.2374267578125],
									],
									[
										[184.17266845703125, 101.07916259765625],
										[184.17266845703125, 202.15826416015625],
										[230.2158203125, 303.2374267578125],
									],
								],
							},
							opacity: 1,
							pageIndex: 0,
							name: 'A167811E-6D10-4546-A147-B7AD775FE8AC',
							strokeColor: '#DC143C',

							type: 'pspdfkit/ink',
							v: 1,
						};
						this.pdfRef.current?.getDocument().addAnnotations([annotationJSONInk]).then((result) => {
								if (result) {
									alert('Annotation was successfully added.');
								} else {
									alert('Failed to add annotation.');
								}
							}).catch((error) => {
								alert(JSON.stringify(error));
							});
					}}
					title="Add Ink Annotation"
					accessibilityLabel="Add Ink Annotation"
				/>

				<Button
					onPress={() => {
						const annotationJSONText = {
							bbox: [
								89.586334228515625,
								98.5791015625,
								143.12948608398438,
								207.1583251953125,
							],
							horizontalAlign: 'center',
							verticalAlign: 'center',
							isBold: true,
							text: 'Welcome to\nNutrient',
							font: 'Helvetica',
							fontColor: '#DC143C',

							fontSize: 24.0,

							opacity: 1,
							pageIndex: 0,
							name: 'A167811E-6D10-4546-A147-B7AD775FE8AC',
							type: 'pspdfkit/text',
							v: 1,
						};
						this.pdfRef.current?.getDocument().addAnnotations([annotationJSONText]).then((result) => {
								if (result) {
									alert('Annotation was successfully added.');
								} else {
									alert('Failed to add annotation.');
								}
							}).catch((error) => {
								alert(JSON.stringify(error));
							});
					}}
					title="Add Text Annotation"
					accessibilityLabel="Add Text Annotation"
				/>

				<Button
					onPress={async () => {
						const processedDocumentPath =
							RNFS.DocumentDirectoryPath + '/flattened.pdf';
						// Delete the processed document if it already exists.
						RNFS.exists(processedDocumentPath).then((exists) => {
								if (exists) {
									RNFS.unlink(processedDocumentPath);
								}
							}).then(() => {
								// First, save all annotations in the current document.
								this.pdfRef.current?.getDocument().save().then((success) => {
										if (success) {
											// Then, embed all the annotations.
											Nutrient.processAnnotations(
												'embed',
												'all',
												DOCUMENT,
												processedDocumentPath,
											).then((success) => {
													if (success) {
														// And finally, present the newly processed document with embedded annotations.
														Nutrient.present(
															processedDocumentPath,
															{},
														);
													} else {
														alert(
															'Failed to embed annotations.',
														);
													}
												}).catch((error) => {
													alert(JSON.stringify(error));
												});
										} else {
											alert(
												'Failed to save current document.',
											);
										}
									});
							});
					}}
					title="Embed All Annotations"
				/>
			</>
		);
	}
}

```

Replace the contents of `App.js` with the code above for a working example.

Launch your app:

```bash

npx react-native run-android

```![GIF showing the result of 'npx react-native run-ios'](@/assets/images/blog/2023/react-native-pdf-annotation/embedding-annotations-android.gif)

```bash

npx react-native run-ios

```![GIF showing the result of 'npx react-native run-ios'](@/assets/images/blog/2023/react-native-pdf-annotation/embedding-annotations-ios.gif)

## Conclusion

In this post, you learned how to annotate PDFs and embed annotations into a PDF in React Native using Nutrient React Native SDK. In case of any hiccups, don’t hesitate to [reach out to our Support team](https://www.nutrient.io/support/) for help.

Nutrient React Native SDK is an SDK for viewing, annotating, and editing PDFs. It offers developers the ability to quickly add PDF functionality to any React Native application. Try it for [free](https://www.nutrient.io/try/), or visit [our demo][] to see it in action.

## FAQ

#### How can I add annotations to a PDF in React Native?

You can add annotations using the `NutrientView` component, which enables you to display and modify PDF documents.

#### What types of annotations can I add using Nutrient in React Native?

You can add various types of annotations like ink, text, and more using Nutrient’s React Native PDF library.

#### Does Nutrient support both iOS and Android for React Native applications?

Yes, Nutrient supports both iOS and Android in React Native applications.

#### Can I embed annotations directly into the PDF file?

Yes, annotations can be embedded into the PDF file using the provided functionality in Nutrient.

#### Do I need a license key to use Nutrient in React Native?

Yes, you need a Nutrient license key, though you can pass `null` during the trial period.
---

## Related pages

- [The business case for accessibility: Five ways it drives enterprise value](/blog/5-ways-accessibility-drives-enterprise-value.md)
- [Accessibility Untangled Why It Matters Guide](/blog/accessibility-untangled-why-it-matters-guide.md)
- [Advanced Techniques For React Native Ui Components](/blog/advanced-techniques-for-react-native-ui-components.md)
- [`vector_store` holds your indexed documents (see the multimodal RAG post](/blog/agentic-rag.md)
- [Ai Document Automation Extraction To Action](/blog/ai-document-automation-extraction-to-action.md)
- [Ai Legal Assistant Document Authoring](/blog/ai-legal-assistant-document-authoring.md)
- [Angular File Viewer Pdf Image Office Files](/blog/angular-file-viewer-pdf-image-office-files.md)
- [Auto Tagging And Document Accessibility In Dotnet Sdk](/blog/auto-tagging-and-document-accessibility-in-dotnet-sdk.md)
- [Best Document Viewers](/blog/best-document-viewers.md)
- [The CEO’s AI playbook: Why decision architecture beats model selection](/blog/ceo-ai-playbook-decision-architecture.md)
- [1. Extract and chunk the PDF.](/blog/chat-with-pdf.md)
- [Complete Guide To Pdfjs](/blog/complete-guide-to-pdfjs.md)
- [Construction Document Data Extraction](/blog/construction-document-data-extraction.md)
- [Convert One Drive Files To Pdf In Sharepoint](/blog/convert-one-drive-files-to-pdf-in-sharepoint.md)
- [Create And Edit Pdfs In Flutter](/blog/create-and-edit-pdfs-in-flutter.md)
- [Create Pdfs With React](/blog/create-pdfs-with-react.md)
- [Creating A Document Scanner With Ocr In Python](/blog/creating-a-document-scanner-with-ocr-in-python.md)
- [Creating And Filling Pdf Forms Programmatically In Javascript](/blog/creating-and-filling-pdf-forms-programmatically-in-javascript.md)
- [The CTO’s AI playbook: Why accountability architecture beats orchestration](/blog/cto-ai-playbook-accountability-architecture.md)
- [Digital Signatures](/blog/digital-signatures.md)
- [Digital Workflow Automation](/blog/digital-workflow-automation.md)
- [Document Ai Vs Ocr](/blog/document-ai-vs-ocr.md)
- [Document Extraction Confidence Scores](/blog/document-extraction-confidence-scores.md)
- [Document Viewer](/blog/document-viewer.md)
- [Document Watermarking](/blog/document-watermarking.md)
- [Emerging threats: Your logging system may be an agentic threat vector](/blog/emerging-threats-your-logging-system.md)
- [app.py](/blog/extract-text-from-pdf-using-python.md)
- [Fillable Pdf](/blog/fillable-pdf.md)
- [How To Add Digital Signature To Pdf Using React](/blog/how-to-add-digital-signature-to-pdf-using-react.md)
- [How To Build A Dotnet Maui Pdf Viewer](/blog/how-to-build-a-dotnet-maui-pdf-viewer.md)
- [How To Build A Flutter Pdf Viewer](/blog/how-to-build-a-flutter-pdf-viewer.md)
- [or](/blog/how-to-build-a-javascript-pdf-viewer-with-pdfjs.md)
- [How To Build A Javascript Pdf Viewer](/blog/how-to-build-a-javascript-pdf-viewer.md)
- [or](/blog/how-to-build-a-nextjs-pdf-viewer.md)
- [How To Build A Powerpoint Viewer Using Javascript](/blog/how-to-build-a-powerpoint-viewer-using-javascript.md)
- [Using Yarn](/blog/how-to-build-a-react-excel-viewer.md)
- [How To Build A React Native Pdf Viewer](/blog/how-to-build-a-react-native-pdf-viewer.md)
- [How To Build A React Powerpoint Viewer](/blog/how-to-build-a-react-powerpoint-viewer.md)
- [How To Build A Reactjs File Viewer](/blog/how-to-build-a-reactjs-file-viewer.md)
- [or](/blog/how-to-build-a-reactjs-pdf-viewer-with-react-pdf.md)
- [or](/blog/how-to-build-a-reactjs-pdf-viewer.md)
- [How To Build A Reactjs Viewer With Pdfjs](/blog/how-to-build-a-reactjs-viewer-with-pdfjs.md)
- [How To Build A Vuejs Pdf Viewer With Pdfjs](/blog/how-to-build-a-vuejs-pdf-viewer-with-pdfjs.md)
- [How To Build A Vuejs Pdf Viewer](/blog/how-to-build-a-vuejs-pdf-viewer.md)
- [How To Build An Android Pdf Viewer](/blog/how-to-build-an-android-pdf-viewer.md)
- [How To Build An Angular Pdf Viewer With Ng2 Pdf Viewer](/blog/how-to-build-an-angular-pdf-viewer-with-ng2-pdf-viewer.md)
- [How To Build An Angular Pdf Viewer With Pdfjs](/blog/how-to-build-an-angular-pdf-viewer-with-pdfjs.md)
- [How To Convert Docx To Pdf Using Javascript](/blog/how-to-convert-docx-to-pdf-using-javascript.md)
- [How To Convert Docx To Pdf Using Python](/blog/how-to-convert-docx-to-pdf-using-python.md)
- [How To Convert Html To Pdf Using Html2pdf](/blog/how-to-convert-html-to-pdf-using-html2pdf.md)
- [or](/blog/how-to-convert-html-to-pdf-using-react.md)
- [How To Convert Html To Pdf Using Wkhtmltopdf And Csharp](/blog/how-to-convert-html-to-pdf-using-wkhtmltopdf-and-csharp.md)
- [or](/blog/how-to-convert-html-to-pdf-using-wkhtmltopdf-and-python.md)
- [How To Convert Word To Pdf In Nodejs](/blog/how-to-convert-word-to-pdf-in-nodejs.md)
- [or](/blog/how-to-create-a-react-js-signature-pad.md)
- [How To Create Pdfs With React To Pdf](/blog/how-to-create-pdfs-with-react-to-pdf.md)
- [How To Edit Pdfs Using Ios Pdf Library](/blog/how-to-edit-pdfs-using-ios-pdf-library.md)
- [How To Embed A Pdf Viewer In Your Website](/blog/how-to-embed-a-pdf-viewer-in-your-website.md)
- [How To Extract Tables From Pdf And Images](/blog/how-to-extract-tables-from-pdf-and-images.md)
- [How To Generate Pdf From Html With Nodejs](/blog/how-to-generate-pdf-from-html-with-nodejs.md)
- [base_url tells WeasyPrint where to resolve relative asset paths](/blog/how-to-generate-pdf-reports-from-html-in-python.md)
- [How To Merge Pdfs Using Javascript](/blog/how-to-merge-pdfs-using-javascript.md)
- [How To Ocr Pdfs In Linux](/blog/how-to-ocr-pdfs-in-linux.md)
- [How To Print Pdf In Csharp](/blog/how-to-print-pdf-in-csharp.md)
- [Open an image.](/blog/how-to-use-tesseract-ocr-in-python.md)
- [From an HTML string.](/blog/html-in-pdf-format.md)
- [Javascript Pdf Editors](/blog/javascript-pdf-editors.md)
- [Javascript Pdf Libraries](/blog/javascript-pdf-libraries.md)
- [Linearized Pdf](/blog/linearized-pdf.md)
- [or](/blog/merge-pdfs.md)
- [Swift Package Manager](/blog/mobile-pdf-sdk.md)
- [`elements` come from your document parser — each has a type and content.](/blog/multimodal-rag.md)
- [Nutrient Vs Conga Composer](/blog/nutrient-vs-conga-composer.md)
- [Online Document Viewer](/blog/online-document-viewer.md)
- [Open Pdf In Your Web App](/blog/open-pdf-in-your-web-app.md)
- [Building WCAG 2.2, Section 508, and PDF/UA-compliant PDFs with an SDK](/blog/pdf-accessibility.md)
- [Pdf Extraction Benchmark Opendataloader Bench](/blog/pdf-extraction-benchmark-opendataloader-bench.md)
- [Pdf Extraction Document Case Studies](/blog/pdf-extraction-document-case-studies.md)
- [Pdf Page Labels](/blog/pdf-page-labels.md)
- [Pdf Sdk Compliance Security Checklist](/blog/pdf-sdk-compliance-security-checklist.md)
- [Pdf Sdk Performance Benchmark](/blog/pdf-sdk-performance-benchmark.md)
- [Pdf Ua Compliance Guide](/blog/pdf-ua-compliance-guide.md)
- [Pdfjs Accessibility Structtree Printing](/blog/pdfjs-accessibility-structtree-printing.md)
- [Pdfjs Advanced Loading Streaming Workers](/blog/pdfjs-advanced-loading-streaming-workers.md)
- [Pdfjs Annotation Editor Layer](/blog/pdfjs-annotation-editor-layer.md)
- [Pdfjs Area Annotations Canvas Capture](/blog/pdfjs-area-annotations-canvas-capture.md)
- [Pdfjs Coordinate Systems Pdf To Screen](/blog/pdfjs-coordinate-systems-pdf-to-screen.md)
- [Pdfjs Document Outline Bookmarks Metadata](/blog/pdfjs-document-outline-bookmarks-metadata.md)
- [Pdfjs Eventbus Guide](/blog/pdfjs-eventbus-guide.md)
- [macOS](/blog/pdfjs-generating-pdf-thumbnails-pdf2pic.md)
- [Pdfjs Limitations Commercial Upgrade](/blog/pdfjs-limitations-commercial-upgrade.md)
- [Pdfjs Native Annotation Layer Forms](/blog/pdfjs-native-annotation-layer-forms.md)
- [Pdfjs Navigation Zoom Rotation](/blog/pdfjs-navigation-zoom-rotation.md)
- [Pdfjs Pdf Page Manipulation Pdf Lib](/blog/pdfjs-pdf-page-manipulation-pdf-lib.md)
- [Pdfjs React Viewer Setup](/blog/pdfjs-react-viewer-setup.md)
- [Pdfjs Rendering Overlays React Portals](/blog/pdfjs-rendering-overlays-react-portals.md)
- [Pdfjs Server Side Text Extraction](/blog/pdfjs-server-side-text-extraction.md)
- [Pdfjs Sticky Note Annotations](/blog/pdfjs-sticky-note-annotations.md)
- [Pdfjs Text Highlight Annotations](/blog/pdfjs-text-highlight-annotations.md)
- [Pdfjs Text Search Pdffindcontroller](/blog/pdfjs-text-search-pdffindcontroller.md)
- [Pdfjs Thumbnail Sidebar](/blog/pdfjs-thumbnail-sidebar.md)
- [Process Flows](/blog/process-flows.md)
- [Using Yarn](/blog/react-pdf-editor.md)
- [or](/blog/sample-blog-updated.md)
- [Sdk Product Updates Q2 2026](/blog/sdk-product-updates-q2-2026.md)
- [Add DWS MCP Server to your Claude Code project.](/blog/teaching-llms-to-read-pdfs.md)
- [Open an image file.](/blog/tesseract-python-guide.md)
- [Define the HTML part of the document.](/blog/top-10-ways-to-generate-pdfs-in-python.md)
- [Top 5 Javascript Pdf Viewers](/blog/top-5-javascript-pdf-viewers.md)
- [or](/blog/top-js-pdf-libraries.md)
- [Convert an HTML file to PDF.](/blog/top-ten-ways-to-convert-html-to-pdf.md)
- [Vector Pdf](/blog/vector-pdf.md)
- [Wcag2 Accessibility Requirements Documents](/blog/wcag2-accessibility-requirements-documents.md)
- [Web Sdk Is Now Headless](/blog/web-sdk-is-now-headless.md)
- [What Are Annotations](/blog/what-are-annotations.md)
- [What Is A Vpat](/blog/what-is-a-vpat.md)
- [What Is Document Processing](/blog/what-is-document-processing.md)
- [What Is Intelligent Document Processing](/blog/what-is-intelligent-document-processing.md)
- [What Is Pdf Ua](/blog/what-is-pdf-ua.md)
- [Why Pdfium Is A Trusted Platform For Pdf Rendering](/blog/why-pdfium-is-a-trusted-platform-for-pdf-rendering.md)
- [Why Your Ai Agent Hallucinates Pdf Table Data](/blog/why-your-ai-agent-hallucinates-pdf-table-data.md)

