Open PDF Files in React Native

PSPDFKit for React Native 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;
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 } from 'react-native';
import PSPDFKitView from 'react-native-pspdfkit';

const DOCUMENT =
	Platform.OS === 'ios'
		? 'Document.pdf'
		: 'file:///android_asset/Document.pdf';
export default class App extends Component<{}> {
	render() {
		return (
			<PSPDFKitView
				document={DOCUMENT}
				ref="pdfView"
				fragmentTag="PDF1"
				style={{ flex: 1 }}
			/>
		);
	}
}

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

For more details about how to open a document using PSPDFKit for React Native, take a look at our PSPDFKitViewComponent example from the Catalog example project.

Opening an Image

In addition to the ability to open PDF documents, PSPDFKit for React Native 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 PSPDFKit for React Native, take a look at our OpenImageDocument.js example from the Catalog example project.