---
title: "React Native open PDF file | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/react-native/open-a-document/from-local-storage/"
md_url: "https://www.nutrient.io/guides/react-native/open-a-document/from-local-storage.md"
last_updated: "2026-06-19T09:21:00.309Z"
description: "Open PDF documents in React Native using Nutrient React Native SDK. Learn to implement both native module API and NutrientView component for seamless integration."
---

# Open PDF files in React Native

Nutrient React Native SDK enables you to open documents in two ways: using a [native UI component](https://reactnative.dev/docs/native-platform), and using a native module. This is a step-by-step guide to get you started quickly.

## Opening a PDF

Here’s how you can open a PDF document using the native module API:

```js

import React, { Component } from 'react';
import { AppRegistry, NativeModules, Platform } from 'react-native';

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

const DOCUMENT =
	Platform.OS === 'ios'? 'Document.pdf'
		: 'file:///android_asset/Document.pdf';
export default class App extends Component<Props> {
	componentDidMount() {
		Nutrient.present(DOCUMENT, {});
	}
	render() {
		return null;
	}
}

AppRegistry.registerComponent('App', () => App);

```

And here’s how you can open a PDF document using the `NutrientView` component:

```js

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

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

const DOCUMENT =
	Platform.OS === 'ios'? 'Document.pdf'
		: 'file:///android_asset/Document.pdf';
export default class App extends Component<{}> {
	var pdfRef: React.RefObject<NutrientView | null> = React.createRef();
	render() {
		return (
			<NutrientView
				document={DOCUMENT}
				ref={pdfRef}
				fragmentTag="PDF1"
				style={{ flex: 1 }}
			/>
		);
	}
}

AppRegistry.registerComponent('App', () => App);

```

For more details about how to open a document using Nutrient React Native SDK, take a look at our [`NutrientViewComponent` example](https://github.com/PSPDFKit/react-native/tree/master/samples/Catalog/examples/NutrientViewComponent.tsx) from the [Catalog example project](https://www.nutrient.io/guides/react-native/prebuilt-solutions/example-projects.md#pspdfkit-catalog).

## Opening an image

In addition to the ability to open PDF documents, Nutrient React Native SDK also allows you to open and annotate images (PNG, JPEG, and TIFF). The following example shows how to open a PNG image using our native module API:

```js

const IMAGE =
	Platform.OS === 'ios'? 'image.png'
		: 'file:///android_asset/image.png';

Nutrient.present(IMAGE, {});

```

For more details and sample code showing how to open an image using Nutrient React Native SDK, take a look at our [`OpenImageDocument.tsx` example](https://github.com/PSPDFKit/react-native/tree/master/samples/Catalog/examples/OpenImageDocument.tsx) from the [Catalog example project](https://www.nutrient.io/guides/react-native/prebuilt-solutions/example-projects.md#pspdfkit-catalog).
---

## Related pages

- [Open remote PDF files in React Native](/guides/react-native/open-a-document/from-remote-url.md)