React Native PDF Viewer

What is react-native-pdf?

Developers can display PDF files inside their mobile applications with the help of the third-party react-native-pdf library. On both iOS and Android devices, it offers a mechanism to render PDF files using native components.

The native platforms underpinning react-native-pdf are used to support the PDF rendering capabilities. To manage the rendering and presentation of PDF documents, it makes use of the iOS PDFKit framework on iOS and the Android PdfRenderer API on Android.

Developers may add PDF reading capability to their React Native apps with react-native-pdf, enabling users to view, scroll, and zoom in or out of PDF files. The library offers several features and options for personalising the PDF viewer, including choosing the starting page, adjusting the zoom level, annotating documents, and enabling text selection.

Installation

• To install the react-native-pdf library, run the following command:

  or if you prefer using Yarn:

• Now Link the library: For React Native versions below 0.60, the library needs to be linked to your project. However, since React Native 0.60, linking is done automatically. If you're using an older version, run the following command to link the library:

• Update Gradle files (Android only) : You need to update the Gradle files if you're developing for Android. Open the android/build.gradle file and make the following changes:

  In the repositories section, add the maven { url https://jitpack.io } line:

  allprojects { repositories { // other repositories... maven { url 'https://jitpack.io' } } }

  In the dependencies section, add the following line: classpath 'com.github.barteksc:android-pdf-viewer:2.8.2'

Supported Versions

Installing both React Native PDF and React Native blob-util is recommended because they are needed to manage file system access in this package. For various versions of react-native-pdf, the supported React Native and react-native-blob-util versions are listed in the table below.

Features

React-native-pdf offers a practical method of rendering PDF files inside your app and comes with several features and functionalities. The following are some justifications for considering React Native PDF:

• Viewing PDF Documents: React Native PDF enables you to show PDF files directly within your app, giving consumers a fluid viewing experience. Important functions like zooming, scrolling, and page navigation are supported.
• Display Orientation: You have the flexibility to display the PDF horizontally or vertically based on your preference or the layout requirements of your application.
• Document Interactions: The library gives users the option to interact with PDF files by choosing and copying text, looking for particular information, and bookmarking pages. These features improve your app's usability and functionality.
• Customization: React Native PDF gives you the flexibility to alter the PDF viewer's appearance to fit your application's general style and theme. The viewer components can be customised, the colours can be changed, and your branding elements can be added.
• Offline Access: Users can access and view PDF files even while offline once downloaded or locally cached within the app. This is especially helpful in situations with spotty or unpredictable internet connectivity.
• PDF Manipulation: React Native PDF enables you to manipulate PDF files in several ways, including combining several PDF files, dividing a PDF into numerous pages, and extracting particular pages from a PDF. Applications that require PDF modification skills may find these features useful.
• Cross-Platform Support: React Native PDF is made to function flawlessly on iOS and Android devices. You may develop and launch your app on several platforms using a single codebase, which cuts down on the time and work required for development.
• Drag and Zoom: Users can interact with the PDF by dragging and zooming in or out to examine the content more closely. This feature enhances the user experience and allows for detailed viewing of the PDF.
• Double Tap Zoom: Users can double-tap on the PDF to quickly zoom in on a specific area of interest. This gesture simplifies the process of zooming and provides a convenient way to focus on specific details within the PDF.
• Support for Password-Protected PDFs: The react-native-pdf library can handle password-protected PDF files. It provides the necessary functionality to enter the password and decrypt the PDF content for seamless viewing.
• Jump to a Specific Page: Users can easily navigate to a particular page within the PDF. This feature allows for quick access to specific sections or content within the document, improving the overall usability of the PDF viewer.

React Native PDF offers a variety of features and customization options to improve the user experience while streamlining the process of incorporating PDF viewing functionality into your React Native application.

Methods

Using a reference to the PDF element, methods run. Using the following code, you may obtain a ref:

• setPage()
• setPage(pageNumber) Set the PDF component's current page. The integer pageNumber is positive. The current page is not altered if pageNumber is more than numberOfPages.

Example:

this.pdf.setPage(42);

Configurations

Properties with their description:

• source: It is the object having uri of the source and cache option.
• page: It is the index of the initial page( normally 1)
• scale: It is used to zoom in or zoom out the pdf
• minScale: The minimum value of scale.
• maxScale: The maximum value of scale.
• horizontal: It can be used to change the orientation from vertical to horizontal.
• fitWidth: If true, the width will be equal to the width of the view.
• fitPolicy: Can be fit-width (0), fit-height (1) or fit both (2). It is a number.
• spacing: Size separation between pages.
• password: Password for pdf.
• style: Style object to customise pdf view style.
• renderActivityIndicator: Bool to decide whether to Show ActivityIndicator for loading.
• enablePaging: Show only one page on the screen.
• enableRTL: Enable Right to left scrolling
• enableAnnotationRendering: Render annotations
• trustAllCerts: Allow connections to self-signed certificate servers
• singlePage: Only displays the first page, good for thumbnail views
• onLoadProgress: callback to get loading progress.
• onLoadComplete: callback that is called when the page gets loaded completely.
• onPageChanged: callback to handle the change of page.
• onError: It is used to handle errors.
• onPageSingleTap: Callback that is called when a page is single-tapped.
• onScaleChanged: Callback that is called when a page is scaled.
• onPressLink: Callback that is called when a link is pressed.

How to Open a PDF in React Native?

Here are the instructions for using react-native-pdf to open a PDF in React Native.

• Step 1: Installing the Prerequisites Yarn will be used to install the packages. Please set it up on your PC using the Yarn installation instructions if you haven't already.
  You must also install react-native-cli to build React Native applications from the command line:

• Step 2: Creating a New React Native App From the command line, we can use react-native to create a new React Native app; we gave ours the name PDFTutorial:
  For the rest of the session, we'll work in PDFTutorial.

• Step 3: Installing Dependencies
  React-navigation will be used in our project so that we may navigate between views:
  We'll then include react-native-pdf, which has a Pdf component we can use:

• Step 4: Writing the App
  We may now begin putting our software into use. We'll first import all necessary packages into App.js and set up our navigation stack:

Example:

An Open PDF button on the HomeScreen directs users to the PdfScreen. For PdfScreen to display a document.pdf file, it must be placed in the same directory as App.js.

We'll define our app next. Just our navigation stack is rendered:

Example:

In the end, we're defining styles :

In react-native-pdf, you can customize the appearance of the PDF viewer by using various props provided by the library.

Here are some ways to customize the appearance:

Colors:

• Page Text Color: Use the textColor prop to set the color of the text within the PDF viewer.

Example:

• Background Color: Set the background color of the PDF viewer using the backgroundColor prop.

Example:

Fonts:

Page Text Font: Specify a custom font for the text within the PDF viewer by utilizing the textProps prop. This prop accepts a style object, allowing you to define the desired font family, size, and other text properties.

Example:

Building a React Native PDF Viewer

• Step 1: Creating a React Native Project Change the current working directory to the location where you want to save your project in the terminal app. We'll use the /Documents directory in this example:

  Then, launch the command that follows to create the React Native project:

  You should then include the necessary dependencies.

• Step 2 : Adding the Required Dependencies
  Change the project's current working directory's location:

  Add the PSPDFKit dependency after that:

  Add the necessary dependencies for react-native-pdf as follows:

  Install all of the project's dependencies next:

  Open the build.gradle file for the project.

  To obtain the PSPDFKit library, add the PSPDFKit repository:

  

• Step 3: Opening a PDF Document
  Drag the desired PDF file into your project to include it in your application. To accept the default integration options, choose Finish on the dialogue that appears.

  Example:

  

  Replacing the current working directory's location with the project's root folder:

  If it doesn't already exist, create the assets directory:

  Put a PDF file in your assets directory by copying it:

  Launch the App.js file

  Write the following code in App.js:

  Reopen the terminal app, then execute:

FAQs

Q. Is react-native-pdf available with expo-app?

A. No. It is not available with the expo-go app. But it can be configured using plugins: When the native code is generated (through the npx expo prebuild), configure the plugin to automatically configure react-native-pdf. Add the package to your npm dependencies Checked with Expo SDK 48

After installing this npm package, include the config plugin in your app.json or app.config.js's plugins array :

Q. What kinds of URL can be used with react-native-pdf?

A. The react-native-pdf library allows you to display PDF files in a React Native application. It supports different kinds of URLs for loading PDF documents. Here are the types of URLs that can be used with react-native-pdf:

• Local File URLs : You can use file URLs to load PDF files from the local device storage. These URLs typically start with the "file://" protocol followed by the path to the PDF file on the device.
  Example: const localFileUrl = 'file:///path/to/your/pdf/file.pdf';
• Remote URLs: You can load PDF files from remote servers using their URLs. These URLs typically start with the "http://" or "https://" protocols. Example: const remoteUrl = 'https://example.com/path/to/your/pdf/file.pdf';
• Base64-encoded URLs: If you have a PDF file in base64-encoded format, you can use a base64-encoded URL to load it. These URLs typically start with the "data:application/pdf;base64" prefix followed by the base64-encoded PDF data. Example: const base64Url = 'data:application/pdf;base64,JVBERi0xLjMKJcTl8uXr....'; These are the common types of URLs that can be used with react-native-pdf. Choose the appropriate URL type based on the location and format of your PDF file.