Welcome folks today in this blog post we will be looking at a pdf viewer component in react native using react-native-pdf . All the full source code of the application is shown below.
Get Started
Built With
- React native
Usage
Prerequisites
- node
- npm
Clone the repository to your local machine
|
1 2 |
$ git clone https://github.com/wonday/react-native-pdf.git |
Change into the project directory
|
1 2 |
$ cd react-calculator |
Install dependencies
|
1 2 |
$ npm install |
Start development server
|
1 |
$ npm run start |
Installation
|
1 2 3 4 5 |
<span class="pl-c"># Using npm</span> npm install react-native-pdf rn-fetch-blob @react-native-community/progress-bar-android @react-native-community/progress-view --save <span class="pl-c"># or using yarn:</span> yarn add react-native-pdf rn-fetch-blob @react-native-community/progress-bar-android @react-native-community/progr |
Feature
- 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
- jump to a specific page in the pdf
In order to get started you need to create new react native project and then you need to download the entire full source code on github repository
Now after downloading the source code the directory structure will look something like this as shown below
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 |
| 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 |
| 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.1.2 |
| 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 | ✔ | ✔ | ✖ |
| 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 | ✖ | ✖ | ✔ |
Full Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
/** * 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,JVBERi0xLjcKJc..."}; 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); }} onPressLink={(uri)=>{ console.log(`Link presse: ${uri}`) }} 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, } }); |
