React Native PDF View: Display PDFs with react-native-pdf

Quick answer: For a production React Native PDF view, most teams start with react-native-pdf (plus react-native-blob-util) so iOS/Android can render remote or local PDFs with zoom and page changes. It will not run inside Expo Go—you need a development build / prebuild. For a quick Expo experiment, a WebView + PDF.js approach can preview files with fewer features. If the in-app viewer keeps failing on weird fonts or huge scans, let users open the same file in a full reader such as WPS Office.

 

Search intent for react native pdf view is mostly developer how-to: which library to install, how to load a URL or file:// path, whether Expo works, and how to fix a blank screen. End users who land here usually just need a PDF that opens—cover that briefly after the implementation path.

What you need for a React Native PDF view

• Native viewer module — react-native-pdf is the widely used community component for iOS and Android.

• Blob helper — install react-native-blob-util alongside it for caching/downloads.

• Native build — Expo Go does not include this native code; use a custom dev client / EAS build.

• Clear source URI — HTTPS URL, file:/// path, asset URI, or Base64 (Base64 is the heaviest option).

How to add react-native-pdf (bare RN or Expo prebuild)

1. Install packages: react-native-pdf and react-native-blob-util.

2. For Expo, add the matching config plugins (for example @config-plugins/react-native-pdf and @config-plugins/react-native-blob-util), then run prebuild / rebuild the native app.

3. Import the component and give it a source plus style={{ flex: 1 }}.

4. Wire onLoadComplete, onPageChanged, and onError so blank screens are debuggable.

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

export default function InvoicePdf() {
  const source = {
    uri: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
    cache: true,
  };

  return (console.log('pages', pages)}
        onPageChanged={(page, pages) => console.log(page, '/', pages)}
        onError={(e) => console.warn(e)}
      />);
}

const styles = StyleSheet.create({
  box: { flex: 1 },
  pdf: { flex: 1, width: '100%' },
});

 

That single screen already covers the core react native pdf view job: load, show pages, report errors.

Expo Go vs development build

• Expo Go: native PDF modules are unavailable. Use a WebView/PDF.js viewer only for demos, or switch to a development build.

• Expo with native PDF: configure plugins, then npx expo prebuild / EAS Build so react-native-pdf is compiled in.

• After SDK upgrades: rebuild the client—stale binaries are a common reason PDFs “suddenly” stop rendering.

 

Load remote, local, asset, and Base64 PDFs

• Remote: { uri: 'https://…/file.pdf', cache: true } — add headers when the file needs auth.

• Local file: { uri: 'file:///…/doc.pdf' } — paths differ on iOS vs Android; avoid spaces/special characters when possible.

• Android assets: bundle-assets://… under android/app/src/main/assets.

• iOS require: require('./test.pdf') works on iOS in many setups; verify Android separately.

• Base64: works, but huge strings hurt memory—prefer files on disk for multi-megabyte reports.

react-native-pdf vs WebView vs commercial PDF SDK

 

Match cost to scope: a “show the invoice” screen rarely needs a paid SDK. Annotation, AcroForm fill, and legally defensible signing usually push teams to buy—or to hand the file to an external reader.

 

Fix a blank React Native PDF view

1. Confirm you are not testing inside Expo Go when using react-native-pdf.

2. Log onError and onLoadComplete—silent blanks often mean a bad URI or a native bridge issue.

3. On React Native New Architecture builds, use a current react-native-pdf release known to support Fabric (blank iOS views were a recurring report on older pairings).

4. Rebuild after upgrading RN/Expo SDK so native binaries match JS.

5. For large files, enable cache: true, avoid stuffing megabytes of Base64 into JS, and test low-memory Android devices.

 

When the in-app view is enough—and when to open in WPS PDF

Ship an in-app react native pdf view when PDF is part of the session (checkout receipts, policy review, ticket boarding passes). Deep-link or “Open with…” to a full suite when users need reliable markup, odd encodings, or mixed Office+PDF work outside your UI.

WPS Office PDF is a practical handoff: users can open the same file with search and markup, then keep Word/Excel nearby without installing a PDF-only toolchain. That does not replace your RN component—it covers the long tail of files lightweight viewers reject.

Need a universal way to open office files? See our free online file opener for PDF, Word, Excel, PPT, and more formats.

FAQ

What is the best library for a React Native PDF view?

For most preview screens, react-native-pdf is the common starting point. Pick a commercial SDK when you need production annotation, forms, or signing.

Does react-native-pdf work with Expo Go?

No. It needs native code. Use a development build with config plugins, or a WebView/PDF.js viewer for Expo Go demos only.

How do I open a local PDF file in React Native?

Pass a file:/// URI (or platform asset URI) to the viewer’s source. Test iOS and Android paths separately and avoid oversized Base64 payloads.

Why is my React Native PDF view a blank screen?

Typical causes: running in Expo Go, a bad URI, a stale native binary after an SDK upgrade, or New Architecture compatibility gaps on older library versions.

Should I use a WebView to display PDFs?

WebView/PDF.js is fine for lightweight remote preview. Prefer a native module when you need consistent zoom, caching, and offline local-file behavior.

When should the app open PDFs in WPS instead of in-app?

When PDF is occasional, files are messy/scanned, or users need markup and Office formats together—offer Open with WPS PDF while keeping a simple in-app preview for core flows.

Summary

A solid React Native PDF view usually means react-native-pdf + blob util, a real native build (not Expo Go), and careful URI/caching choices. Use WebView only for light Expo experiments, and budget a commercial SDK when annotation/forms are product-critical. Fix blanks by verifying architecture support and rebuilding after upgrades. For stubborn real-world files, let users finish in WPS PDF while your app keeps a fast in-app preview.

Free Office Download

• Use Word, Excel, and PPT for FREE, No Ads.

• Edit PDF files with the powerful PDF toolkit.

• Microsoft-like interface. Easy to learn. 100% Compatibility.

• Boost your productivity with WPS's abundant free Word, Excel, PPT, and CV templates.

Free Download

100% secure

Algirdas Jasaitis