A react native PDF view component, support ios and android platform
npm install react-native-pdf-rnfbA 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
* double tap for zoom
* support password protected pdf
> The table below shows the supported versions of React Native for different versions of react-native-pdf-rnfb.
| react-native-pdf-rnfb | 4.x.x - 5.0.x | 5.0.9+ |
| ------------------------- | :------: | :-------------: |
| React Native | 0.47 - 0.56 | ^0.57 |
react-native-fetch-blob to handle file system access in this package,``bash
npm install react-native-fetch-blob --save
npm install react-native-pdf-rnfb --save
react-native link react-native-fetch-blob
react-native link react-native-pdf-rnfb
`
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.#24
You can add it manually. For detail you can see the issue and #2
Q2. When running, it shows `'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'` #39
A2. Your react-native version is too old, please upgrade it to 0.47.0+ see also
Q3. When I run the example app I get a white screen / the loading bar isn't progressing on IOS.
A3. Check your uri, if you hit a pdf that is hosted on a http you will need to add an exception for the server hosting the pdf in the ios info.plist. Here is an example :
`
Q4. why doesn't it work with react native expo?.
A4. Expo does not support native module. you can read more expo caveats here
v5.0.10
1. support enablePaging for ios<11.0
2. disable long press on ios (the same with android)
v5.0.9
1. fix podspec
2. NS_CLASS_AVAILABLE_IOS(11_0) to PDFKit related codes
3. Fix pdfs when pipe appears in table content json
4. modify build.gradle for RN 0.57
v5.0.8
1. fix podspec
v5.0.7
1. onLoadComplete return table of contents
2. delete tmp file after downloaded
v5.0.6
1. add accessible to PdfPageView
2. restore podspec
v5.0.5
1. add minScale, maxScale props
2. fix pdf display box
3. fix Content-length check
v5.0.4
1. fix ios background not work
2. fix can not show two pdf in in one page
v5.0.3
1. add enableAnnotationRendering property support, default enableAnnotationRendering=true
2. android build.gradle can reference root project sdk and buildTool setting
3. fix ios progressbar not work
v5.0.2
1. fix file successfully download check
v5.0.1
1. add paging support (ios and android)
2. add RTL support (ios)
3. fix position when set page (ios)
v5.0.0 (break change)
1. use iOS PDFKit to show pdf (iOS SDK>=11)
2. use js+native to show pdf (iOS SDK<11, the same with 4.0.0)
3. support pdf with layers (iOS SDK>=11)
4. support pdf with links (iOS SDK>=11)
5. fix zoom (iOS SDK>=11)
[[more]](https://github.com/wonday/react-native-pdf-rnfb/releases)
`js
/**
* 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-rnfb';
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 (
onLoadComplete={(numberOfPages,filePath)=>{
console.log(number of pages: ${numberOfPages});current page: ${page}
}}
onPageChanged={(page,numberOfPages)=>{
console.log();
}}
onError={(error)=>{
console.log(error);
}}
style={styles.pdf}/>
)
}
}
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 | 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 | max scale| ✔ | ✔ | 5.0.5 |
| maxScale | number | 3.0 | min 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]](https://github.com/wonday/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 |
| 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 |
#### parameters of source
| 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 | {} | ✔ | ✔ |
#### types of source.uri
| 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 | ✔ | ✔ |
|