Installations

npm install react-native-pdf

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

20.9.0

NPM Version

10.1.0 Pull Requests

Open

7

Total

177

Closed

21

Merged

149

Issues

Open

363

Total

771

Closed

408

Releases

69

v6.7.6

Updated on Dec 03, 2024

v6.7.5

Updated on Apr 20, 2024

v6.7.4

Updated on Dec 23, 2023

v6.7.1

Updated on Jun 25, 2023

v6.6.0

Updated on Jul 30, 2022

v6.5.0

Updated on Apr 08, 2022

View All 69 releases

Languages

9

C++

Objective-C++

JavaScript

Java

Objective-C

Ruby

Starlark

C

CMake

C++ (24.82%)

Objective-C++ (23.48%)

JavaScript (21.67%)

Java (21.62%)

Objective-C (4.48%)

Ruby (2.22%)

Starlark (1.15%)

C (0.42%)

CMake (0.13%)

Developer

wonday

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

1,685 Stars

736 Commits

597 Forks

15 Watchers

1 Branches

111 Contributors

Updated on Jul 14, 2025

Maintainers

1

View All 111 Contributors

Package Meta Information

Latest Version

6.7.7

Package Id

react-native-pdf@6.7.7

Unpacked Size

279.14 kB

Size

92.32 kB

File Count

62

NPM Version

10.1.0

Node Version

20.9.0

Published on

Feb 11, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

2

crypto-js deprecated-react-native-prop-types

Peer Dependencies

3

react react-native react-native-blob-util

Dev Dependencies

3

@babel/core @babel/runtime prop-types

react-native-pdf

A react native PDF view component (cross-platform support)

Feature

read a PDF from 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

Supported versions

We use react-native-blob-util to handle file system access in this package, So you should install react-native-pdf and react-native-blob-util

The table below shows the supported versions of React Native and react-native-blob-util for different versions of react-native-pdf.

React Native	0.4x - 0.56	0.57	0.60+	0.62+	0.62+
react-native-pdf	4.x.x - 5.0.x	5.0.9+	6.0.0+	6.2.0+	6.4.0+
react-native-blob-util					0.13.7+

🚨 Expo: This package is not available in the Expo Go app. Learn how you can use this package in Custom Dev Clients via the out-of-tree Expo Config Plugin. Example: with-pdf.

Installation

1# Using npm
2npm install react-native-pdf react-native-blob-util --save
3
4# or using yarn:
5yarn add react-native-pdf react-native-blob-util

Then follow the instructions for your platform to link react-native-pdf into your project:

iOS installation

iOS details

React Native 0.60 and above

Run pod install in the ios directory. Linking is not required in React Native 0.60 and above.

React Native 0.59 and below

1react-native link react-native-blob-util
2react-native link react-native-pdf

Android installation

Android details

If you use RN 0.59.0 and above, please add following to your android/app/build.gradle**

1android {
2
3+    packagingOptions {
4+       pickFirst 'lib/x86/libc++_shared.so'
5+       pickFirst 'lib/x86_64/libjsc.so'
6+       pickFirst 'lib/arm64-v8a/libjsc.so'
7+       pickFirst 'lib/arm64-v8a/libc++_shared.so'
8+       pickFirst 'lib/x86_64/libc++_shared.so'
9+       pickFirst 'lib/armeabi-v7a/libc++_shared.so'
10+     }
11
12   }

React Native 0.59.0 and below

1react-native link react-native-blob-util
2react-native link react-native-pdf

Windows installation

Windows details

Open your solution in Visual Studio 2019 (eg. windows\yourapp.sln)
Right-click Solution icon in Solution Explorer > Add > Existing Project...
If running RNW 0.62: add node_modules\react-native-pdf\windows\RCTPdf\RCTPdf.vcxproj
If running RNW 0.62: add node_modules\react-native-blob-util\windows\ReactNativeBlobUtil\ReactNativeBlobUtil.vcxproj
Right-click main application project > Add > Reference...
Select progress-view and in Solution Projects
- If running 0.62, also select RCTPdf and ReactNativeBlobUtil
In app pch.h add #include "winrt/RCTPdf.h"
- If running 0.62, also select #include "winrt/ReactNativeBlobUtil.h"
In App.cpp add PackageProviders().Append(winrt::progress_view::ReactPackageProvider()); before InitializeComponent();
- If running RNW 0.62, also add PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider()); and PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider());

Bundling PDFs with the app

To add a test.pdf like in the example add:

<None Include="..\..\test.pdf">
  <DeploymentContent>true</DeploymentContent>
</None>

in the app .vcxproj file, before <None Include="packages.config" />.

FAQ

FAQ details

Q1. After installation and running, I can not see the pdf file.
A1: maybe you forgot to excute react-native link or it does not run correctly. You can add it manually. For detail you can see the issue #24 and #2

Q2. When running, it shows 'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'
A2. Your react-native version is too old, please upgrade it to 0.47.0+ see also #39

Q3. When I run the example app I get a white/gray screen / the loading bar isn't progressing .
A3. Check your uri, if you hit a pdf that is hosted on a http you will need to do the following:

iOS: add an exception for the server hosting the pdf in the ios info.plist. Here is an example :

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>yourserver.com</key>
    <dict>
      <!--Include to allow subdomains-->
      <key>NSIncludesSubdomains</key>
      <true/>
      <!--Include to allow HTTP requests-->
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <true/>
      <!--Include to specify minimum TLS version-->
      <key>NSTemporaryExceptionMinimumTLSVersion</key>
      <string>TLSv1.1</string>
    </dict>
  </dict>
</dict>

Android: see here

Q4. why doesn't it work with react native expo?.
A4. Expo does not support native module. you can read more expo caveats here

Q5. Why can't I run the iOS example? 'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'
A5. Run the following commands in the project folder (e.g. react-native-pdf/example) to ensure that all dependencies are available:

yarn install (or npm install)
cd ios
pod install
cd ..
react-native run-ios

ChangeLog

ChangeLog details

v6.7.7 1. Added: add support for customizable scroll indicators in PdfView component (#904) 2. Fixed: fix field values not being visible on android. issue #864 :bug: (#896)

v6.7.6

Fixed: Add missing 'enableDoubleTapZoom' to fabric codegen source (#832)
Fixed: added missing 'scrollEnabled' prop (#842)
Fixed: java.lang.IllegalStateException: Tried to access a JS module before the React instance was fully set up (#840)
Fixed: an issue that crashes when cancel is not present (#852)
Added: add load method (#861)
Fixed: encoded accented character is decoded incorrectly (#873)
Fixed: enableDoubleTapZoom bugfix

v6.7.5

Added progressContainerStyle prop
Improved: Added enableDoubleTapZoom option
Fixed: Fix app crash with this.lastRNBFTask.cancel is not a function (#827)
Fixed: Remove override to fix 'no matching methods to override' error (#822)

v6.7.4

Fixed: fix Android crash issue

v6.7.3

Fixed: fix android package name

v6.7.2

Fixed: fix iOS double tap zoom scrolling
Fixed: fix RN 73 compatibility
Fixed: bump crypto-js to avoid critical vulnerability

v6.7.1

Fixed: fix ios project setting
Fixed: fix typo in RNPDFPdfViewManagerInterface interface causing android build error

v6.7.0

Fixed: fix(iOS): center page at tap point after double tap to zoom
Fixed: add PDFKit to podspec to make ios compile
Improved: Update build.gradle to support RN 0.71 on new arch
Fixed: fix some small bugs and documents.

v6.6.2

Fixed: Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'
Added: Decode File Path for iOS
Improved: prefer current page for calculating scale factor on fit

v6.6.1 depresed

v6.6.0 depresed

Fixed: Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'
Added: Decode File Path for iOS
Improved: prefer current page for calculating scale factor on fit
Improved: Typescript version source

v6.5.0

Fix: replace mavenCentral with maven
Breaking Change(Android): replace deprecated repository: jcenter()
Fix: loading progress
Add: Typed "source" prop
Remove: dependency to fbjs

v6.4.0

Remove sample for reducing NPM package size
Add support for setting a filename for the cached pdf file
Use react-native-blob-util instead of rn-fetch-blob
Add blob support
remove progress-view dependency

v6.3.0

Add windows support
Fixed some bugs

[more]

Example

1/**
2 * Copyright (c) 2017-present, Wonday (@wonday.org)
3 * All rights reserved.
4 *
5 * This source code is licensed under the MIT-style license found in the
6 * LICENSE file in the root directory of this source tree.
7 */
8
9import React from 'react';
10import { StyleSheet, Dimensions, View } from 'react-native';
11import Pdf from 'react-native-pdf';
12
13export default class PDFExample extends React.Component {
14    render() {
15        const source = { uri: 'http://samples.leanpub.com/thereactnativebook-sample.pdf', cache: true };
16        //const source = require('./test.pdf');  // ios only
17        //const source = {uri:'bundle-assets://test.pdf' };
18        //const source = {uri:'file:///sdcard/test.pdf'};
19        //const source = {uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."};
20        //const source = {uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"};
21        //const source = {uri:"blob:xxxxxxxx-...?offset=0&size=xxx"};
22
23        return (
24            <View style={styles.container}>
25                <Pdf
26                    source={source}
27                    onLoadComplete={(numberOfPages,filePath) => {
28                        console.log(`Number of pages: ${numberOfPages}`);
29                    }}
30                    onPageChanged={(page,numberOfPages) => {
31                        console.log(`Current page: ${page}`);
32                    }}
33                    onError={(error) => {
34                        console.log(error);
35                    }}
36                    onPressLink={(uri) => {
37                        console.log(`Link pressed: ${uri}`);
38                    }}
39                    style={styles.pdf}/>
40            </View>
41        )
42    }
43}
44
45const styles = StyleSheet.create({
46    container: {
47        flex: 1,
48        justifyContent: 'flex-start',
49        alignItems: 'center',
50        marginTop: 25,
51    },
52    pdf: {
53        flex:1,
54        width:Dimensions.get('window').width,
55        height:Dimensions.get('window').height,
56    }
57});
58

Configuration

Property	Type	Default	Description	iOS	Android	Windows	FirstRelease
source	object	not null	PDF source like {uri:xxx, cache:false}. see the following for detail.	✔	✔	✔	<3.0
page	number	1	initial page index	✔	✔	✔	<3.0
scale	number	1.0	should minScale<=scale<=maxScale	✔	✔	✔	<3.0
minScale	number	1.0	min scale	✔	✔	✔	5.0.5
maxScale	number	3.0	max scale	✔	✔	✔	5.0.5
horizontal	bool	false	draw page direction, if you want to listen the orientation change, you can use [react-native-orientation-locker]	✔	✔	✔	<3.0
showsHorizontalScrollIndicator	bool	true	shows or hides the horizontal scroll bar indicator on iOS	✔			6.6
showsVerticalScrollIndicator	bool	true	shows or hides the vertical scroll bar indicator on iOS	✔			6.6
scrollEnabled	bool	true	enable or disable scroll	✔			6.6
fitWidth	bool	false	if true fit the width of view, can not use fitWidth=true together with scale	✔	✔	✔	<3.0, abandoned from 3.0
fitPolicy	number	2	0:fit width, 1:fit height, 2:fit both(default)	✔	✔	✔	3.0
spacing	number	10	the breaker size between pages	✔	✔	✔	<3.0
password	string	""	pdf password, if password error, will call OnError() with message "Password required or incorrect password."	✔	✔	✔	<3.0
style	object	{backgroundColor:"#eee"}	support normal view style, you can use this to set border/spacing color...	✔	✔	✔	<3.0
progressContainerStyle	object	{backgroundColor:"#eee"}	support normal view style, you can use this to set border/spacing color...	✔	✔	✔	6.9.0
renderActivityIndicator	(progress) => Component		when loading show it as an indicator, you can use your component	✔	✔	✖	<3.0
enableAntialiasing	bool	true	improve rendering a little bit on low-res screens, but maybe course some problem on Android 4.4, so add a switch	✖	✔	✖	<3.0
enablePaging	bool	false	only show one page in screen	✔	✔	✔	5.0.1
enableRTL	bool	false	scroll page as "page3, page2, page1"	✔	✖	✔	5.0.1
enableAnnotationRendering	bool	true	enable rendering annotation, notice:iOS only support initial setting,not support realtime changing	✔	✔	✖	5.0.3
enableDoubleTapZoom	bool	true	Enable double tap to zoom gesture	✔	✔	✖	6.8.0
trustAllCerts	bool	true	Allow connections to servers with self-signed certification	✔	✔	✖	6.0.?
singlePage	bool	false	Only show first page, useful for thumbnail views	✔	✔	✔	6.2.1
onLoadProgress	function(percent)	null	callback when loading, return loading progress (0-1)	✔	✔	✖	<3.0
onLoadComplete	function(numberOfPages, path, {width, height}, tableContents)	null	callback when pdf load completed, return total page count, pdf local/cache path, {width,height} and table of contents	✔	✔	✔ but without tableContents	<3.0
onPageChanged	function(page,numberOfPages)	null	callback when page changed ,return current page and total page count	✔	✔	✔	<3.0
onError	function(error)	null	callback when error happened	✔	✔	✔	<3.0
onPageSingleTap	function(page)	null	callback when page was single tapped	✔	✔	✔	3.0
onScaleChanged	function(scale)	null	callback when scale page	✔	✔	✔	3.0
onPressLink	function(uri)	null	callback when link tapped	✔	✔	✖	6.0.0

parameters of source

parameter	Description	default	iOS	Android	Windows
uri	pdf source, see the forllowing for detail.	required	✔	✔	✔
cache	use cache or not	false	✔	✔	✖
cacheFileName	specific file name for cached pdf file	SHA1(uri) result	✔	✔	✖
expiration	cache file expired seconds (0 is not expired)	0	✔	✔	✖
method	request method when uri is a url	"GET"	✔	✔	✖
headers	request headers when uri is a url	{}	✔	✔	✖

types of source.uri

Usage	Description	iOS	Android	Windows
`{uri:"http://xxx/xxx.pdf"}`	load pdf from a url	✔	✔	✔
`{require("./test.pdf")}`	load pdf relate to js file (do not need add by xcode)	✔	✖	✖
`{uri:"bundle-assets://path/to/xxx.pdf"}`	load pdf from assets, the file should be at android/app/src/main/assets/path/to/xxx.pdf	✖	✔	✖
`{uri:"bundle-assets://xxx.pdf"}`	load pdf from assets, you must add pdf to project by xcode. this does not support folder.	✔	✖	✖
`{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."}`	load pdf from base64 string	✔	✔	✔
`{uri:"file:///absolute/path/to/xxx.pdf"}`	load pdf from local file system	✔	✔	✔
`{uri:"ms-appx:///xxx.pdf"}}`	load pdf bundled with UWP app	✖	✖	✔
`{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"}`	load pdf from content URI	✔*	✖	✖
`{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"}`	load pdf from blob URL	✖	✔	✖

*) requires building React Native from source with this patch

Methods

setPage

Methods operate on a ref to the PDF element. You can get a ref with the following code:

return (
  <Pdf
    ref={(pdf) => { this.pdf = pdf; }}
    source={source}
    ...
  />
);

setPage()

setPage(pageNumber)

Set the current page of the PDF component. pageNumber is a positive integer. If pageNumber > numberOfPages, current page is not changed.

Example:

this.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

8

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

7

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

1

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

4

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-native-pdf

Other packages similar to react-native-pdf

react-native-pdf

Installations

Developer Guide

No

CommonJS

20.9.0

10.1.0

Pull Requests

7

177

21

149

Issues

363

771

408

Releases

Languages

Developer

wonday

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-native-pdf

Feature

Supported versions

Installation

iOS installation

Android installation

Windows installation

Bundling PDFs with the app

FAQ

ChangeLog

Example

Configuration

parameters of source

types of source.uri

Methods

setPage()

10

10

10

8

7

1

0

0

0

0

0

0

0

4

/10