react-native-pdf
Advanced tools
The react-native-pdf package is a React Native library that allows you to display PDF documents in your mobile applications. It provides a range of functionalities to handle PDF files, including loading PDFs from various sources, rendering pages, and handling user interactions such as zooming and scrolling.
Load PDF from URL
This feature allows you to load a PDF document from a URL and display it within your React Native application. The code sample demonstrates how to load a PDF from a remote URL and handle events such as loading completion, page changes, and errors.
import React from 'react';
import { View, StyleSheet } from 'react-native';
import Pdf from 'react-native-pdf';
const PdfExample = () => {
const source = { uri: 'http://www.pdf995.com/samples/pdf.pdf', cache: true };
return (
<View style={styles.container}>
<Pdf
source={source}
onLoadComplete={(numberOfPages, filePath) => {
console.log(`Number of pages: ${numberOfPages}`);
}}
onPageChanged={(page, numberOfPages) => {
console.log(`Current page: ${page}`);
}}
onError={(error) => {
console.log(error);
}}
style={styles.pdf}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
marginTop: 25,
},
pdf: {
flex: 1,
width: '100%',
height: '100%',
},
});
export default PdfExample;Load PDF from local file
This feature allows you to load a PDF document from a local file and display it within your React Native application. The code sample demonstrates how to load a PDF from a local file path and handle events such as loading completion, page changes, and errors.
import React from 'react';
import { View, StyleSheet } from 'react-native';
import Pdf from 'react-native-pdf';
const PdfExample = () => {
const source = require('./path/to/local/file.pdf');
return (
<View style={styles.container}>
<Pdf
source={source}
onLoadComplete={(numberOfPages, filePath) => {
console.log(`Number of pages: ${numberOfPages}`);
}}
onPageChanged={(page, numberOfPages) => {
console.log(`Current page: ${page}`);
}}
onError={(error) => {
console.log(error);
}}
style={styles.pdf}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
marginTop: 25,
},
pdf: {
flex: 1,
width: '100%',
height: '100%',
},
});
export default PdfExample;Zoom and scroll
This feature allows users to zoom in and out of the PDF document and scroll through its pages. The code sample demonstrates how to enable zooming and scrolling functionalities in the PDF viewer.
import React from 'react';
import { View, StyleSheet } from 'react-native';
import Pdf from 'react-native-pdf';
const PdfExample = () => {
const source = { uri: 'http://www.pdf995.com/samples/pdf.pdf', cache: true };
return (
<View style={styles.container}>
<Pdf
source={source}
onLoadComplete={(numberOfPages, filePath) => {
console.log(`Number of pages: ${numberOfPages}`);
}}
onPageChanged={(page, numberOfPages) => {
console.log(`Current page: ${page}`);
}}
onError={(error) => {
console.log(error);
}}
style={styles.pdf}
scale={1.0}
minScale={1.0}
maxScale={3.0}
horizontal={false}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
marginTop: 25,
},
pdf: {
flex: 1,
width: '100%',
height: '100%',
},
});
export default PdfExample;react-native-pdf-view is another React Native library for displaying PDF documents. It provides basic functionalities for rendering PDF pages and handling user interactions. However, it may not be as feature-rich or actively maintained as react-native-pdf.
react-native-pdf-lib is a library focused on creating and modifying PDF documents in React Native. While it offers functionalities for generating PDFs, it does not provide a built-in viewer for displaying PDF documents like react-native-pdf.
react-native-pdf-viewer is a lightweight library for rendering PDF documents in React Native applications. It offers basic viewing capabilities but may lack some advanced features and customization options available in react-native-pdf.
A react native PDF view component (cross-platform support)
The table below shows the supported versions of React Native for different versions of
react-native-pdf.
| react-native-pdf | 4.x.x - 5.0.x | 5.0.9+ |
|---|---|---|
| React Native | 0.4x - 0.56 | ^0.57 |
We use rn-fetch-blob to handle file system access in this package,
So you should install react-native-pdf and rn-fetch-blob
Notice: rn-fetch-blob v0.10.14 has a bug, please use v0.10.13
npm install rn-fetch-blob --save
npm install react-native-pdf --save
react-native link rn-fetch-blob
react-native link react-native-pdf
if you use RN 0.59.0+, please add following to your android/app/build.gradle
android {
+ 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'
+ }
}
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
v5.1.7
v5.1.6
v5.1.5
v5.1.4
v5.1.3
v5.1.2
v5.1.1
v5.1.0
/**
* Copyright (c) 2017-present, Wonday (@wonday.org)
* All rights reserved.
*
* This source code is licensed under the MIT-style license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import { StyleSheet, Dimensions, View } from 'react-native';
import Pdf from 'react-native-pdf';
export default class PDFExample extends React.Component {
render() {
const source = {uri:'http://samples.leanpub.com/thereactnativebook-sample.pdf',cache:true};
//const source = require('./test.pdf'); // ios only
//const source = {uri:'bundle-assets://test.pdf'};
//const source = {uri:'file:///sdcard/test.pdf'};
//const source = {uri:"data:application/pdf;base64,..."};
return (
<View style={styles.container}>
<Pdf
source={source}
onLoadComplete={(numberOfPages,filePath)=>{
console.log(`number of pages: ${numberOfPages}`);
}}
onPageChanged={(page,numberOfPages)=>{
console.log(`current page: ${page}`);
}}
onError={(error)=>{
console.log(error);
}}
style={styles.pdf}/>
</View>
)
}
}
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,
}
});
| Property | Type | Default | Description | iOS | Android | 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 |
| 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 |
| activityIndicator | Component | when loading show it as an indicator, you can use your component | ✔ | ✔ | <3.0 | |
| activityIndicatorProps | object | {color:'#009900', progressTintColor:'#009900'} | activityIndicator props | ✔ | ✔ | 3.1 |
| 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 |
| 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 | ✔ | ✔ | <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 |
| parameter | Description | default | iOS | Android |
|---|---|---|---|---|
| uri | pdf source, see the forllowing for detail. | required | ✔ | ✔ |
| cache | use cache or not | false | ✔ | ✔ |
| 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 | {} | ✔ | ✔ |
| Usage | Description | iOS | Android |
|---|---|---|---|
{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:"base64data"} | load pdf from base64 string | ✔ | ✔ |
{uri:"file:///absolute/path/to/xxx.pdf"} | load pdf from local file system | ✔ | ✔ |
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(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
FAQs
A react native PDF view component, support ios and android platform
The npm package react-native-pdf receives a total of 156,048 weekly downloads. As such, react-native-pdf popularity was classified as popular.
We found that react-native-pdf demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious PyPI package ‘set-utils’ steals Ethereum private keys by exfiltrating them through blockchain transactions via the Polygon RPC.
Research
Security News
Malicious Go packages are impersonating popular libraries to install hidden loader malware on Linux and macOS, targeting developers with obfuscated payloads.
Security News
Bybit's $1.46B hack by North Korea's Lazarus Group pushes 2025 crypto losses to $1.6B in just two months, already surpassing all of 2024's $1.49B total.