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

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