React Native react-native-pdf PDF Viewer Cross Platform Component to View PDF Documents in Javascript Full Project For Beginners

 

 

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

$ git clone https://github.com/wonday/react-native-pdf.git

Change into the project directory

$ cd react-calculator

Install dependencies

$ npm install

Start development server

$ npm run start

 

Installation

# Using npm
npm install react-native-pdf rn-fetch-blob @react-native-community/progress-bar-android @react-native-community/progress-view --save

# or using yarn:
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

 

DOWNLOAD SOURCE CODE

 

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
See also  React.js Media Player For Streaming Youtube,Facebook Videos Using react-player Library Full Tutorial With Examples

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)
method request method when uri is a url “GET”
headers request headers when uri is a url {}
See also  Join 10 React Native Whatsapp Group Links For Web Developers in 2021 | Whatsapp Group Links For React Native App Developers

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

 

 

/**
 * 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,
    }
});

Leave a Reply