How to Build a React Native PDF Viewer?

By ComPDFKit | 2023 Dec 07
React Native iOS Android

In this article, we delve into the process of creating a PDF viewer within React Native utilizing two PDF libraries: the open-source library React Native PDF, and the commercial SDK ComPDFKit for React Native.



What Is React Native & React Native PDF


React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to build cross-platform mobile applications using JavaScript. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. React Native makes it easy to simultaneously develop for both Android and iOS. 


React Native PDF is a mature component for react native to view PDFs, and has been downloaded more than 104K times weekly. It provides the following features. If you need a simple library for viewing PDFs.


         - Read a PDF from a URL, blob, local file, or asset and can cache it.

         - Display horizontally or vertically.

         - Drag and zoom.

         - Double tap for zoom.

         - Support password-protected PDF.

         - Jump to a specific page in the PDF.


React Native PDF Tutorial: Create a PDF Viewer with React Native PDF


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 => {
        onPressLink={uri => {
          console.log(`Link presse: ${uri}`);

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.


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 ComPDFKit to Your Project


For iOS:


1. Open your project’s Podfile in a text editor:

open ios/Podfile


2. Update the platform to iOS 11 and add the ComPDFKit Podspec:

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

- platform :ios, '10.0'
+ platform :ios, '11.0'
install! 'cocoapods', :deterministic_uuids => false

target 'PDFView_RN' do
  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()

    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => flags[:hermes_enabled],
    :fabric_enabled => flags[:fabric_enabled],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."

  target 'PDFView_RNTests' do
    inherit! :complete
    # Pods for testing

+  pod 'ComPDFKit_Tools', podspec:'https://www.compdf.com/download/ios/cocoapods/xcframeworks/compdfkit_tools/1.11.0.podspec'
+  pod 'ComPDFKit', podspec:'https://www.compdf.com/download/ios/cocoapods/xcframeworks/compdfkit/1.11.0.podspec'

  # Enables Flipper.
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.

  post_install do |installer|


3. Go to the compdfkit_rn/ios folder and run the pod install command:

pod install


4. Open your project’s Workspace in Xcode:

open ios/PDFView_RN.xcworkspace	


Open your project’s Workspace of ComPDFKit in Xcode


5. Import resource file, CPDFViewController view controller that contains ready-to-use UI module implementations:


Import resource file for your ComPDFKit project


6. In the Build Settings search for "bridging" locate the Objective-C Bridging Header, and enter the file path for that header:


In the Build Settings search for


7. Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use “developer_guide_ios.pdf” as an example.


Add the PDF document you want to display


8. To protect user privacy, before accessing the sensitive privacy data, you need to find the Info configuration in your iOS 10.0 or higher iOS project and configure the relevant privacy terms as shown in the following picture.


To protect user privacy in iOS


Your consent is required before you could access the function.

Your consent is required before you could access the function.

Your consent is required before you could access the function.

Your consent is required before you could access the function.


For Android:


1. Open the “android/build.gradle” file located in the project root directory and add the mavenCentral repository:

repositories {
+   mavenCentral()


2. Open the app’s Gradle build file “android/app/build.gradle”:

open android/app/build.gradle


3. Modify the minimum SDK version, all this is done inside the android section:

android {
     defaultConfig {
-        minSdkVersion rootProject.ext.minSdkVersion
+        minSdkVersion 21


4. Add ComPDFKit SDK inside the dependencies section:

dependencies {
+    implementation 'com.compdf:compdfkit:1.11.0'
+    implementation 'com.compdf:compdfkit-ui:1.11.0'
+    implementation 'com.compdf:compdfkit-tools:1.11.0'


5. open “android/app/src/main/AndroidManifest.xml”, add ComPDFKit License and Storage Permission.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    <!-- Required to read and write documents from device storage -->
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

        <!-- Please replace it with your ComPDFKit license -->
+        <meta-data
+            android:name="compdfkit_key"
+            android:value="{your license key}" />


6. Enable viewBinding in the Android node setting of app/build.gradle.

android {
    buildFeatures {
        viewBinding = true


7. Copy the pdf folder and res/layout code from the sample project — Android project, to your project.


py the pdf folder and res/layout code


8. Open the MainApplication file and fill in the following code in the openDocumentgetPackages() method:

protected List getPackages() {
  List packages = new PackageList(this).getPackages();
+  packages.add(new PDFReactPackage());
  return packages;


9. Add PDFActivity in “AndroidManifest.xml” file:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    <activity
+              android:name=".pdf.PDFActivity"
+              android:configChanges="keyboardHidden|orientation|screenSize"
+              android:windowSoftInputMode="adjustPan"
+              android:exported="true"/>



10. Copy the sample pdf file to the assets directory:


Copy the sample pdf file to the assets directory


11. Open your “App.tsx” file.

open App.tsx


12. Replace the entire contents of “App.tsx” with the following code.

import React, { Component } from 'react';
 import {
 } from 'react-native';

 var nativeModule = NativeModules.OpenNativeModule;
 // var analyticsModule = NativeModules.UMAnalyticsModule;

 const instructions = Platform.select({
   ios: 'Press Cmd+R to reload,\n' +
     'Cmd+D or shake for dev menu',
   android: 'Double tap R on your keyboard to reload,\n' +
     'Shake or press menu button for dev menu',

 // set disable functionality:
 const configuration = {
                         "modeConfig": {
                           // setting the default display mode when opening
                           // viewer、annotations、contentEditor、forms、digitalSignatures
                           "initialViewMode": "viewer"
                         // top toolbar configuration:
                         "toolbarConfig": {
                           "androidAvailableActions": [
                           // ios top toolbar left buttons
                           // ios top toolbar right buttons
                           "availableMenus": [
                         // readerView configuration
                         "readerViewConfig": {
                           "linkHighlight": true,
                           "formFieldHighlight": true
 type Props = {};
 export default class App extends Component {
   render() {
     return (
           Welcome to React Native!
           To get started, edit App.js
   jumpToNativeView() {
        // NativeModules.OpenPDFModule.openPDFByConfiguration(filePath, password, JSON.stringify(configuration))
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
   welcome: {
     fontSize: 20,
     textAlign: 'center',
     margin: 10,
   instructions: {
     textAlign: 'center',
     color: '#333333',
     marginBottom: 5,


Display a PDF


1. We have provided two quick ways to open PDFs:

         - Open the default document directly.



         - Open the document in the specified path.

NativeModules.OpenPDFModule.openPDFByConfiguration(String filePath, String password, String configuration)


2. The app is now ready to launch! Go back to the terminal.

//Run on Android devices
npx react-native run-android


//Run on iOS devices
npx react-native run-ios


The output of this react native pdf viewer examples on Android and iOS are given below:


react native pdf viewer examples on Android



react native pdf viewer examples on iOS




As you have seen, adding PDF reading functionality to your app with the react-native-pdf package is a breeze. However, if your React Native project requires more advanced PDF features currently or in the future, such as PDF annotations, page editing, content editing, form filling, redaction, etc., then you should definitely consider using a commercial library.


ComPDFKit for React Native is a commercial PDF SDK that is built for your cross-platform mobile projects. If you need to add more features to your React Native Viewer with ComPDFKit. Follow the steps above, you can also get a React Native PDF Editor including the following features. 


The features ComPDFKit could provide include the following: 


         - PDF Viewer: searching, zooming, scrolling, single-page or double-page displaying.

         - Navigation with thumbnails, outlines, bookmarks, etc.

         - All kinds of annotation creating and editing.

         - Night and custom reading themes.

         - Forms filling and signing with electronic and digital signatures

         - Pages manipulation like adding, deleting, rearranging, splitting, merging, replacing, etc.

         - …

ComPDFKit for React Native offers a comprehensive set of out-of-the-box features and a user-friendly default UI. Try our PDF library with our free trial and check out our demos to see what capabilities are available.