react-native-pdf

What is react-native-pdf?

The react-native-pdf package is a React Native library that allows you to display PDF documents in your mobile applications. It provides a range of functionalities to handle PDF files, including loading PDFs from various sources, rendering pages, and handling user interactions such as zooming and scrolling.

What are react-native-pdf's main functionalities?

Load PDF from URL

This feature allows you to load a PDF document from a URL and display it within your React Native application. The code sample demonstrates how to load a PDF from a remote URL and handle events such as loading completion, page changes, and errors.

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Pdf from 'react-native-pdf';

const PdfExample = () => {
  const source = { uri: 'http://www.pdf995.com/samples/pdf.pdf', cache: true };
  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);
        }}
        style={styles.pdf}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginTop: 25,
  },
  pdf: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
});

export default PdfExample;

Load PDF from local file

This feature allows you to load a PDF document from a local file and display it within your React Native application. The code sample demonstrates how to load a PDF from a local file path and handle events such as loading completion, page changes, and errors.

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Pdf from 'react-native-pdf';

const PdfExample = () => {
  const source = require('./path/to/local/file.pdf');
  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);
        }}
        style={styles.pdf}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginTop: 25,
  },
  pdf: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
});

export default PdfExample;

Zoom and scroll

This feature allows users to zoom in and out of the PDF document and scroll through its pages. The code sample demonstrates how to enable zooming and scrolling functionalities in the PDF viewer.

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Pdf from 'react-native-pdf';

const PdfExample = () => {
  const source = { uri: 'http://www.pdf995.com/samples/pdf.pdf', cache: true };
  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);
        }}
        style={styles.pdf}
        scale={1.0}
        minScale={1.0}
        maxScale={3.0}
        horizontal={false}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginTop: 25,
  },
  pdf: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
});

export default PdfExample;

Other packages similar to react-native-pdf

react-native-pdf-view

react-native-pdf-view is another React Native library for displaying PDF documents. It provides basic functionalities for rendering PDF pages and handling user interactions. However, it may not be as feature-rich or actively maintained as react-native-pdf.

react-native-pdf-lib

react-native-pdf-lib is a library focused on creating and modifying PDF documents in React Native. While it offers functionalities for generating PDFs, it does not provide a built-in viewer for displaying PDF documents like react-native-pdf.

react-native-pdf-viewer

react-native-pdf-viewer is a lightweight library for rendering PDF documents in React Native applications. It offers basic viewing capabilities but may lack some advanced features and customization options available in react-native-pdf.

README

react-native-pdf

A react native PDF view component (cross-platform support)

Feature

• 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 contious tap for zoom in

Notice

• react-native-pdf does not support for react-native(iOS) ver<0.40, becouse of header file inluding changed, but you can modify it yourself to support react-native(iOS) ver<0.40.

Installation

npm install react-native-pdf --save

react-native link react-native-pdf

We use react-native-fetch-blob to handle file system access in this package and it requires an extra step during the installation. You should only have to do this once.

react-native link react-native-fetch-blob

Or, if you want to add Android permissions to AndroidManifest.xml automatically, use this one:

RNFB_ANDROID_PERMISSIONS=true react-native link react-native-fetch-blob

Usage

First, require it from your app's JavaScript files with:

import Pdf from 'react-native-pdf';

Example

//
//  PDFExample.js
// 
//
//  Created by Wonday on 17/4/21.
//  Copyright (c) wonday.org All rights reserved.
//

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);
        this.state = {
            page: 1,
            pageCount: 1,
        };
        this.pdf = null;
    }

    componentDidMount() {
    }

    prePage=()=>{
        if (this.pdf){
            let prePage = this.state.page>1?this.state.page-1:1;
            this.pdf.setNativeProps({page: prePage});
            this.setState({page:prePage});
            console.log(`prePage: ${prePage}`);
        }
    }

    nextPage=()=>{
        if (this.pdf){
            let nextPage = this.state.page+1>this.state.pageCount?this.state.pageCount:this.state.page+1;
            this.pdf.setNativeProps({page: nextPage});
            this.setState({page:nextPage});
            console.log(`nextPage: ${nextPage}`);
        }

    }

    render() {
        let source = {uri:'https://www.irs.gov/pub/irs-pdf/fw2.pdf',cache:true};
        //let source = require('./test.pdf');
        //let source = {uri:"data:application/pdf;base64, ..."}; // this is a dummy

        return (
            <View style={styles.container}>
                <View style={{flexDirection:'row'}}>
                    <TouchableHighlight  disabled={this.state.page==1} style={this.state.page==1?styles.btnDisable:styles.btn} onPress={()=>this.prePage()}>
                        <Text style={styles.btnText}>{'Previous'}</Text>
                    </TouchableHighlight>
                    <TouchableHighlight  disabled={this.state.page==this.state.pageCount} style={this.state.page==this.state.pageCount?styles.btnDisable:styles.btn}  onPress={()=>this.nextPage()}>
                        <Text style={styles.btnText}>{'Next'}</Text>
                    </TouchableHighlight>
                </View>
                <Pdf ref={(pdf)=>{this.pdf = pdf;}}
                    source={source}
                    page={1}
                    horizontal={false}
                    onLoadComplete={(pageCount)=>{
                        this.setState({pageCount: pageCount});
                        console.log(`total page count: ${pageCount}`);
                    }}
                    onPageChanged={(page,pageCount)=>{
                        this.setState({page:page});
                        console.log(`current page: ${page}`);}}
                    style={styles.pdf}/>
            </View>
        )
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginTop: 25,
    },
    btn: {
        margin: 5,
        padding:5,
        backgroundColor: "blue",
    },
    btnDisable: {
        margin: 5,
        padding:5,
        backgroundColor: "gray",
    },
    btnText: {
        color: "#FFF",
    },
    pdf: {
        flex:1,
        width:Dimensions.get('window').width,
    }
});

Configuration

Property	Type	Default	Description	iOS	Android
source	object	{}	PDF source like <Image>, can be:{uri:"http://xxx/xxx.pdf"} or {require("./test.pdf")} or {uri:"base64data"}. You also can cache it by add "cache" property to source like {url:"http://xxx/xxx.pdf",cache:true}, default not cache network file.	✔	✔
page	number	1	page index	✔	✔
scale	number	1.0	zoom scale, scale>=1	✔	✔
horizontal	bool	false	draw page direction	✔	✔
activityIndicator	Component	<ActivityIndicator>	when loading a file show it as a indicator	✔	✔
onLoadComplete	function	null	callback when page load complete, return total page count	✔	✔
onPageChanged	function	null	callback when page changed, ,return current page and total page count	✔	✔