How to Build a React Native PDF Viewer?

3 min readJan 9, 2024

This article explores the creation of a PDF viewer in React Native using two libraries: React Native PDF (an open-source option) and ComPDFKit for React Native (a commercial SDK). Read and learn how to build a React Native PDF viewer.

Introduction to React Native & React Native PDF:

React Native is an open-source UI framework developed by Meta Platforms, Inc., enabling the creation of cross-platform mobile apps using JavaScript. Derived from React, Facebook’s JavaScript library for UI building, React Native targets mobile platforms rather than browsers. This framework facilitates simultaneous development for Android and iOS.

React Native PDF is a well-established component for React Native designed to view PDFs, with over 104,000 weekly downloads. It offers various features for those seeking a straightforward library for PDF viewing, including:

Reading PDFs from URLs, blobs, local files, or assets with caching capabilities.
Supporting horizontal or vertical display orientations.
Enabling drag and zoom functionality.
Implementing double-tap for zooming.
Handling password-protected PDFs.
Allowing navigation to specific pages within the PDF.

How to Create a PDF Viewer with React Native PDF

Step 1: Create a Project

1. In the terminal app, change the current working directory to the location you wish to save your project. In this example, we’ll use the ~/Documents/ directory cd ~/Documents.

2. Create the React Native project by running the following command:

react-native init compdfkit_rn

3. In the terminal app, change the location of the current working directory inside the newly created project:

cd compdfkit_rn

Add react-pdf

1. To make React Native PDF work you also need another library react native blob util. Install both libraries using the command given below.

npm install react-native-pdf react-native-blob-util --save

2. Also, don’t forget to run the pod install command inside the iOS folder. On Android, open android/app/build.gradle and add the following inside the android {} tag.

packagingOptions {
       pickFirst 'lib/x86/libc++_shared.so'
       pickFirst 'lib/x86_64/libjsc.so'
       pickFirst 'lib/arm64-v8a/libjsc.so'
       pickFirst 'lib/arm64-v8a/libc++_shared.so'
       pickFirst 'lib/x86_64/libc++_shared.so'
       pickFirst 'lib/armeabi-v7a/libc++_shared.so'
     }

Display a PDF

Now, you can create a simple pdf viewer in react native as given below.

import React from 'react';
import {StyleSheet, Dimensions, View, Platform} from 'react-native';
import Pdf from 'react-native-pdf';

const source = {
  uri: 'https://www.africau.edu/images/default/sample.pdf',
  cache: true,
};
const App = () => {
  return (
    
       {
          console.log(`number of pages: ${numberOfPages}`);
        }}
        onPageChanged={(page, numberOfPages) => {
          console.log(`current page: ${page}`);
        }}
        onError={error => {
          console.log(error);
        }}
        onPressLink={uri => {
          console.log(`Link presse: ${uri}`);
        }}
        style={styles.pdf}
      />
    
  );
};export default App;const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginTop: 25,
  },
  pdf: {
    flex: 1,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
})

This PDF component displays the PDF file and provides callbacks for various events, such as when the PDF file is completely loaded, when a page is changed, when an error occurs, and when a link is pressed.

Create a React Native PDF Viewer with ComPDFKit

You can follow the steps to integrate ComPDFKit for React Native.

Create a Project

1. In the terminal app, change the current working directory to the location you wish to save your project. In this example, we’ll use the ~/Documents/ directory cd ~/Documents.