React Native PDF View Component

7.0.4 · active · verified Sun Apr 19

react-native-pdf is an actively maintained React Native component designed for displaying PDF documents across iOS, Android, and Windows platforms. The current stable version is 7.0.4, with releases occurring frequently to address bugs and add features. It enables developers to render PDFs from various sources, including URLs, blobs, local files, and app assets, with built-in caching capabilities. Key features include horizontal or vertical display, drag and zoom gestures, double-tap zoom, support for password-protected PDFs, and the ability to jump to specific pages. It differentiates itself by offering comprehensive cross-platform support and robust viewing functionalities, leveraging `react-native-blob-util` for efficient file system interactions. For Expo users, it requires a Custom Dev Client and an Expo Config Plugin rather than Expo Go. This library is a strong choice for applications requiring native PDF rendering capabilities.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to import and render a PDF from a URL using the `PDF` component. It includes basic error handling, page change logging, and styling to make the viewer occupy most of the screen, showing common props like `enablePaging`, `page`, `scale`, and `fitPolicy`.

import React from 'react';
import { StyleSheet, View, Text, Dimensions } from 'react-native';
import PDF from 'react-native-pdf';

const MyPdfViewer = () => {
  // Example source: a public PDF URL
  const source = {
    uri: 'https://www.africau.edu/images/default/sample.pdf',
    cache: true,
  };

  // For a local file, you might use:
  // const localSource = { uri: 'file:///data/user/0/com.yourpackage/files/my_document.pdf' };
  // For an asset:
  // const assetSource = require('./assets/document.pdf');

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Viewing a PDF Document</Text>
      <PDF
        source={source}
        onLoadComplete={(numberOfPages, filePath) => {
          console.log(`Number of pages: ${numberOfPages}`);
        }}
        onPageChanged={(page, numberOfPages) => {
          console.log(`Current page: ${page} / ${numberOfPages}`);
        }}
        onError={(error) => {
          console.log(error);
        }}
        onPressLink={(uri) => {
          console.log(`Link pressed: ${uri}`);
        }}
        style={styles.pdf}
        enablePaging={true} // Enable horizontal paging for multi-page PDFs
        page={1}
        scale={1.0}
        minScale={0.5}
        maxScale={3.0}
        fitPolicy={0} // 0: width, 1: height, 2: both
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginTop: 25,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  pdf: {
    flex: 1,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height - 100, // Adjust height to leave space for title
  },
});

export default MyPdfViewer;

view raw JSON →