Opening a PDF in React Native

React Native lets you create mobile apps in JavaScript, but instead of building a “hybrid app,” you use the same UI building blocks as regular iOS and Android apps. In this post, we’ll use React Native to build an app that opens a PDF with the press of a button.

In the first part of this tutorial, we’ll use wonday’s react-native-pdf library to open a PDF in an app. In the second part, we’ll see how to view PDFs using our React Native PDF Library.

Opening a PDF in React Native with react-native-pdf

Below are the steps for how to open a PDF in React Native with react-native-pdf.

Step 1 — Installing the Prerequisites

We’ll use yarn to install packages. If you haven’t yet installed it, please follow the Yarn installation guide to set it up on your system.

To create React Native apps from the command line, you also need to install react-native-cli:

yarn global add react-native-cli

Step 2 — Creating a New React Native App

We can use react-native to create a new React Native app from the command line (we chose the name OpeningaPDF for our app):

react-native init OpeningaPDF

For the rest of the tutorial, we’ll work in OpeningaPDF:

cd OpeningaPDF

Step 3 — Installing Dependencies

We’ll use react-navigation so that we can switch from one view to another in our app:

yarn add react-navigation

Next, we’ll add react-native-pdf, which includes a Pdf component for us to use:

yarn add react-native-pdf
yarn add react-native-fetch-blob
react-native link react-native-pdf
react-native link react-native-fetch-blob

Step 4 — Writing the App

Now we can start implementing our app. First, we’ll import all the required packages and initialize our navigation stack in App.js:

import React, { Component } from 'react';
import { StyleSheet, Dimensions, Button, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Pdf from 'react-native-pdf';

// Simple screen containing an Open PDF button.
class HomeScreen extends Component {
	static navigationOptions = {
		title: 'Home',
	};
	render() {
		const { navigate } = this.props.navigation;
		return (
			<View style={styles.container}>
				<Button onPress={() => navigate('Pdf')} title="Open PDF" />
			</View>
		);
	}
}

// Screen that shows the contents of a PDF.
class PdfScreen extends Component {
	static navigationOptions = {
		title: 'PDF',
	};

	render() {
		const source = require('./document.pdf');

		return <Pdf source={source} style={styles.pdf} />;
	}
}

const PdfApp = StackNavigator({
	Home: { screen: HomeScreen },
	Pdf: { screen: PdfScreen },
});

HomeScreen contains an Open PDF button that navigates to PdfScreen. We need to put a document.pdf file into the same path as App.js so that PdfScreen can show it.

Next, we’ll define our App. It simply renders our navigation stack:

export default class App extends Component<{}> {
	render() {
		return <PdfApp />;
	}
}

At the end of App.js, we’ll define our styles:

const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
	},
	pdf: {
		flex: 1,
		width: Dimensions.get('window').width,
	},
});

We center the Open PDF button and allow the PDF to fill the entire screen. Here’s how it looks on Android:

And here’s how the app looks on iOS:

You can find the complete content of App.js on GitHub.

After these few steps, we can now tap on a button and scroll through a PDF document. However, we can’t do anything else; there’s no zooming, and there are no annotations. We only have the scrolling view mode.

But that’s where PSPDFKit comes in: It includes all of these features and more without you having to configure anything.

Opening a PDF with PSPDFKit’s React Native PDF Library

To start, follow the integration guide for Android and iOS.

Once this is done, add a second button to HomeScreen that opens a PDF with PSPDFKit:

var PSPDFKit = NativeModules.PSPDFKit;

const DOCUMENT =
	Platform.OS === 'ios' ? 'document.pdf' : 'file:///sdcard/document.pdf';

// Simple screen containing an Open PDF button.
class HomeScreen extends Component {
	_presentPSPDFKit() {
		PSPDFKit.present(DOCUMENT, {
			pageTransition: 'scrollContinuous',
			scrollDirection: 'vertical',
		});
	}

	static navigationOptions = {
		title: 'Home',
	};

	render() {
		const { navigate } = this.props.navigation;
		return (
			<View style={styles.container}>
				<Button
					onPress={() => navigate('Pdf')}
					title="Open PDF with react-native-pdf"
				/>
				<Button
					onPress={this._presentPSPDFKit}
					title="Open PDF with PSPDFKit"
				/>
			</View>
		);
	}
}

All we need is PSPDFKit.present('document.pdf') and we can view a PDF in PSPDFKit. Not only that, but we can also zoom, create annotations, look at the document’s outline, and lots of other things. We can also customize the PDF viewer by passing a dictionary to PSPDFKit.present.

Now, here’s our React Native app powered by PSPDFKit, as seen on Android:

And here’s the same thing, only on iOS:

You can find the source code for the entire project on GitHub.

Conclusion

As you saw, adding PDF support to your app with the react-native-pdf package is a breeze.

However, if your React Native project requires more advanced PDF functionality, such as PDF annotations or PDF form filling, you should definitely look at using a commercial library.

Our React Native PDF SDK comes with more than 30 out-of-the-box features and has well-documented APIs to handle advanced use cases. Try out our PDF library using our free trial, and check out our demos to see what’s possible.

PSPDFKit also comes with great customer support, so please reach out to us if you have any questions about our React Native integration.