Open PDF files in React Native

Nutrient React Native SDK allows you to open documents in two ways: using a native UI component, 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:

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

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

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

And here’s how you can open a PDF document using the native component API:

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

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

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

const DOCUMENT =
	Platform.OS === 'ios'
		? 'Document.pdf'
		: 'file:///android_asset/Document.pdf';
export default class App extends Component<{}> {
	var pdfRef: React.RefObject<PSPDFKitView> = React.createRef();
	render() {
		return (
			<PSPDFKitView
				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 PSPDFKitViewComponent example from the Catalog example project.

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:

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

PSPDFKit.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 from the Catalog example project.