A react native PDF view component (cross-platform support)
- read a PDF from url/local file/asset and can cache it.
- display horizontally or vertically
- drag and zoom
- first tap for reset zoom and continuous tap for zoom in
- support password protected pdf
We use react-native-fetch-blob
to handle file system access in this package,
So you should install react-native-pdf and react-native-fetch-blob
npm install react-native-pdf --save
npm install react-native-fetch-blob --save
react-native link react-native-pdf
react-native link react-native-fetch-blob
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
v2.0.3
- Fix iOS load pdf problem
#76
v2.0.2
- Fix pdf canvas was clipped problem
#69
v2.0.1
- Improve iOS version scrolling performance
- Fix never ending loop rendering problem in example code
v2.0.0
- Reimplement iOS version by UIScrollView, improve scrolling performance
- Fix iOS paging
#63
v1.3.5
- Improve scolling performance
- Return pdf local/cache path when callback onLoadComplete
#57
v1.3.4
- Update iOS project to Xcode9 format.
- Fix crash problem when load from base64
#58
- Fix TypeScript definition for onError
#53
- Update sample code in readme
v1.3.3
- Improve iOS scrolling performance, fix
#47
v1.3.2
- Move react-native and react-native-fetch-blob to peerDependencies
v1.3.1
- Refactor android source
- Stop page scrolling when tap screen
#41
v1.3.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,
TouchableHighlight,
Dimensions,
View,
Text
} from 'react-native';
import Pdf from 'react-native-pdf';
export default class PDFExample extends React.Component {
constructor(props) {
super(props);
}
render() {
let source = {uri:'http://samples.leanpub.com/thereactnativebook-sample.pdf',cache:true};
//let source = require('./test.pdf'); // ios only
//let source = {uri:'bundle-assets://test.pdf'};
//let source = {uri:'file:///sdcard/test.pdf'};
//let source = {uri:"data:application/pdf;base64,..."};
return (
<View style={styles.container}>
<Pdf
source={source}
onLoadComplete={(pageCount)=>{
console.log(`total page count: ${pageCount}`);
}}
onPageChanged={(page,pageCount)=>{
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,
}
});
Property | Type | Default | Description | iOS | Android |
---|---|---|---|---|---|
source | object | not null | PDF source like {uri:xxx, cache:false}. see the following for detail. | ✔ | ✔ |
page | number | 1 | initial page index | ✔ | ✔ |
scale | number | 1.0 | zoom scale, 1<=scale<=3 | ✔ | ✔ |
horizontal | bool | false | draw page direction, if you want to listen the orientation change, you can use [react-native-orientation-locker] | ✔ | ✔ |
fitWidth | bool | false | if true fit the width of view, can not use fitWidth=true together with scale | ✔ | ✔ |
spacing | number | 10 | the breaker size between pages | ✔ | ✔ |
password | string | "" | pdf password, if password error, will call OnError() with message "Password required or incorrect password." | ✔ | ✔ |
style | object | {backgroundColor:"#eee"} | support normal view style, you can use this to set border/spacing color... | ✔ | ✔ |
activityIndicator | Component | when loading show it as an indicator, you can use your component | ✔ | ✔ | |
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 | ✖ | ✔ |
onLoadProgress | function | null | callback when loading, return loading progress (0-1) | ✔ | ✔ |
onLoadComplete | function | null | callback when pdf load completed, return total page count and pdf local/cache path | ✔ | ✔ |
onPageChanged | function | null | callback when page changed ,return current page and total page count | ✔ | ✔ |
onError | function | null | callback when error happened | ✔ | ✔ |
parameter | Description | default | iOS | Android |
---|---|---|---|---|
uri | pdf source, see the forllowing for detail. | required | ✔ | ✔ |
cache | use cache or not | false | ✔ | ✔ |
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 | ✔ | ✔ |