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 article serves as 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 getting started guides or take our Catalog example project for a spin.

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';
if (Platform.OS === 'android') {
	PSPDFKit.presentImage(IMAGE, {});
} else if (Platform.OS === 'ios') {
	PSPDFKit.present(IMAGE, {});
}