Skip to main content

PDF Component API

Complete API reference for the Pdf component in react-native-pdf-jsi.

Import​

const PdfModule = require('react-native-pdf-jsi');
const Pdf = PdfModule.default;

Props​

source (required)​

PDF source object with the following properties:

PropertyTypeDefaultDescription
uristringrequiredPDF source URI (URL, file path, base64, etc.)
cachebooleanfalseEnable caching for the PDF
cacheFileNamestringSHA1(uri)Custom cache file name
expirationnumber0Cache expiration in seconds (0 = never expires)
methodstring"GET"HTTP method for URL sources
headersobjectHTTP headers for URL sources

Source URI Types:

  • http:// or https:// - Load from URL
  • file:// - Load from local file system
  • data:application/pdf;base64, - Load from base64 string
  • bundle-assets:// - Load from app bundle/assets
  • require('./file.pdf') - Load from bundled asset (iOS only)

page​

TypeDefaultDescription
number1Initial page to display (1-indexed)

scale​

TypeDefaultDescription
number1.0Initial zoom scale (must be between minScale and maxScale)

minScale​

TypeDefaultDescription
number1.0Minimum zoom scale

maxScale​

TypeDefaultDescription
number3.0Maximum zoom scale

horizontal​

TypeDefaultDescription
booleanfalseDisplay pages horizontally (true) or vertically (false)

fitPolicy​

TypeDefaultDescription
number2Fit policy: 0 = fit width, 1 = fit height, 2 = fit both

spacing​

TypeDefaultDescription
number10Spacing between pages in pixels

password​

TypeDefaultDescription
string""Password for password-protected PDFs

enablePaging​

TypeDefaultDescription
booleanfalseShow only one page at a time

enableRTL​

TypeDefaultDescription
booleanfalseEnable right-to-left page order

enableAntialiasing​

TypeDefaultDescription
booleantrueEnable antialiasing for better rendering (Android only)

enableAnnotationRendering​

TypeDefaultDescription
booleantrueEnable annotation rendering

enableDoubleTapZoom​

TypeDefaultDescription
booleantrueEnable double tap to zoom gesture

singlePage​

TypeDefaultDescription
booleanfalseShow only the first page (useful for thumbnails)

trustAllCerts​

TypeDefaultDescription
booleantrueAllow connections to servers with self-signed certificates

style​

TypeDefaultDescription
objectReact Native style object for the PDF container

Event Handlers​

onLoadProgress​

Called during PDF loading to report progress.

onLoadProgress={(percent) => {
  console.log(`Loading: ${(percent * 100).toFixed(1)}%`);
}}

Parameters:

  • percent (number): Loading progress from 0 to 1

onLoadComplete​

Android Fix in v4.1.0

As of v4.1.0, this callback now works reliably on Android. The fix addresses timing issues and error handling specific to Android's implementation. iOS has always worked correctly using a notification-based approach. See What's New in v4.1.0 for details.

Called when PDF loading is complete.

onLoadComplete={(numberOfPages, filePath, size, tableContents) => {
  console.log(`PDF loaded: ${numberOfPages} pages`);
  console.log(`File path: ${filePath}`);
  console.log(`Size: ${size.width} x ${size.height}`);
  console.log(`Table of contents:`, tableContents);
}}

Parameters:

  • numberOfPages (number): Total number of pages in the PDF
  • filePath (string): Local file path of the loaded PDF
  • size (object): Page size with width and height properties
  • tableContents (array): Table of contents structure (if available)

onPageChanged​

Called when the displayed page changes.

onPageChanged={(page, numberOfPages) => {
  console.log(`Page ${page} of ${numberOfPages}`);
}}

Parameters:

  • page (number): Current page number (1-indexed)
  • numberOfPages (number): Total number of pages

onError​

Called when an error occurs.

onError={(error) => {
  console.error('PDF Error:', error);
  if (error.message && error.message.includes('password')) {
    // Handle password-protected PDF
  }
}}

Parameters:

  • error (object): Error object with message property

onPageSingleTap​

Called when a page is single-tapped.

onPageSingleTap={(page) => {
  console.log(`Tapped page ${page}`);
}}

Parameters:

  • page (number): Page number that was tapped (1-indexed)

onScaleChanged​

Called when the zoom scale changes.

onScaleChanged={(scale) => {
  console.log(`Scale: ${scale}`);
}}

Parameters:

  • scale (number): Current zoom scale

Called when a link in the PDF is tapped.

onPressLink={(uri) => {
  console.log(`Link pressed: ${uri}`);
  // Handle link navigation
}}

Parameters:

  • uri (string): URI of the pressed link

Methods​

setPage(pageNumber)​

Programmatically navigate to a specific page.

const pdfRef = useRef(null);

<Pdf ref={pdfRef} source={source} />

// Navigate to page 5
pdfRef.current?.setPage(5);

Parameters:

  • pageNumber (number): Page number to navigate to (1-indexed)

Returns: void

Platform Support​

FeatureiOSAndroidWindows
Basic viewing✅✅✅
Zoom & pan✅✅✅
Password protection✅✅✅
onLoadComplete✅✅ (v4.1.0+)✅
onPageChanged✅✅✅
onError✅✅✅
onPageSingleTap✅✅✅
onScaleChanged✅✅✅
onPressLink✅❌❌
enableAntialiasing❌✅❌

Examples​

Basic Usage​

const PdfModule = require('react-native-pdf-jsi');
const Pdf = PdfModule.default;

<Pdf
  source={{ uri: 'https://example.com/document.pdf' }}
  style={{ flex: 1 }}
/>

With Event Handlers​

const PdfModule = require('react-native-pdf-jsi');
const Pdf = PdfModule.default;

<Pdf
  source={{ uri: 'https://example.com/document.pdf' }}
  style={{ flex: 1 }}
  onLoadComplete={(numberOfPages, filePath, size, tableContents) => {
    console.log(`Loaded ${numberOfPages} pages`);
  }}
  onPageChanged={(page, numberOfPages) => {
    console.log(`Page ${page} of ${numberOfPages}`);
  }}
  onError={(error) => {
    console.error('Error:', error);
  }}
/>

Password-Protected PDF​

const PdfModule = require('react-native-pdf-jsi');
const Pdf = PdfModule.default;

<Pdf
  source={{ uri: 'https://example.com/protected.pdf' }}
  password="yourpassword"
  style={{ flex: 1 }}
  onError={(error) => {
    if (error.message && error.message.includes('password')) {
      // Handle password error
    }
  }}
/>