Is rn-pdf-reader-js better than react-native-pdf for Expo apps?

rn-pdf-reader-js is specifically designed for Expo and uses only JavaScript, avoiding native modules and ejection, whereas react-native-pdf often requires native linking. However, for performance-critical apps, native libraries like react-native-pdf might offer smoother rendering.

How to load a local PDF file with rn-pdf-reader-js?

Use the source prop with a file:// URI, such as source={{ uri: 'file:///path/to/local.pdf' }}. Ensure expo-file-system is installed for file access, and check app permissions for local storage.

Why doesn't my PDF render in rn-pdf-reader-js?

Common issues include incorrect source URI format (must start with http://, https://, or file://), missing dependencies like react-native-webview, or compatibility problems with your Expo SDK version. Refer to the GitHub issue linked in the README for troubleshooting.

Does rn-pdf-reader-js support pinch-to-zoom on both platforms?

Yes, pinch-to-zoom is supported via the withPinchZoom prop. However, rendering differs by platform: Android uses a custom PDF reader, while iOS uses direct WebView rendering, which may affect zoom behavior consistency.

Can I use rn-pdf-reader-js with Expo SDK 40 or higher?

The library is tested for Expo SDK 33-36+, and using it with newer versions like SDK 40 might lead to compatibility issues since updates aren't guaranteed. Check the GitHub repository for recent commits or consider forking if needed.

How to customize the navigation buttons in the PDF reader?

Use the customStyle prop to override styles for elements like readerContainerNavigate and readerContainerNavigateArrow. The README provides a list of CSS properties, allowing you to adjust colors, sizes, and positioning.

What are the performance implications for large PDFs?

Performance can degrade with large PDFs, especially when withScroll is enabled, due to the WebView and JavaScript rendering overhead. It's best for simpler viewing needs; for complex documents, consider native alternatives or optimize by disabling scroll.

Open-Awesome

rn-pdf-reader-js

MITTypeScriptv4.1.1

A JavaScript-only PDF reader component for React Native Expo apps, supporting Android and iOS without native libraries.

GitHub

398 stars165 forks0 contributors

What is rn-pdf-reader-js?

rn-pdf-reader-js is a React Native component that allows developers to embed PDF readers in Expo applications using only JavaScript, without relying on native libraries. It solves the problem of displaying PDFs in cross-platform mobile apps by leveraging WebView and pdf.js, supporting both Android and iOS with sources from URIs or base64 data.

Target Audience

React Native developers building Expo-based mobile applications that require PDF viewing capabilities, particularly those seeking to avoid native module integration.

Value Proposition

Developers choose this library for its simplicity and compatibility—it provides a pure JavaScript solution that works seamlessly within Expo's constraints, offers customizable UI options, and supports multiple PDF sources without platform-specific native code.

Overview

📄 PDF reader in JavaScript only for Expo - Android & iOS capable

Use Cases

Best For

Adding PDF viewing to Expo apps without ejecting or using native modules
Displaying PDFs from web URLs or local files in React Native
Implementing base64-encoded PDF rendering in mobile applications
Creating customizable PDF readers with pinch-to-zoom and navigation controls
Building cross-platform PDF features that work on both Android and iOS
Integrating PDF support in projects constrained to JavaScript-only dependencies

Not Ideal For

Applications handling confidential PDFs, as the optional Google PDF Reader mode sends data to external servers
Projects using newer Expo SDK versions (beyond 36) or React Native (beyond 0.60), due to limited compatibility updates
Apps requiring high-performance, smooth-scrolling PDF rendering, since enabling withScroll can cause performance issues
Teams needing advanced PDF features like form filling, annotations, or text selection, which are not supported

Pros & Cons

Pros

Pure JavaScript Implementation

Uses react-pdf (pdf.js) and WebView to render PDFs without native modules, eliminating the need for native linking and making it ideal for Expo apps where native integration is restricted.

Flexible Source Handling

Supports loading PDFs from web URIs (http/https), local files via file:// URIs, and base64-encoded strings, with optional custom headers for authentication, as detailed in the Source interface.

Customizable UI

Offers extensive style overrides via the customStyle prop for containers, WebView, and navigation elements, allowing developers to tailor the appearance without relying on pre-styled components.

Expo Ecosystem Integration

Designed for Expo SDK 33-36+ and integrates with expo-file-system and expo-constants, ensuring smooth operation within the Expo framework without requiring ejection.

Cons

Manual Dependency Management

Requires separate, manual installation of react-native-webview, expo-file-system, and expo-constants, adding extra steps to setup compared to libraries that bundle dependencies.

Performance Trade-offs

The README warns that enabling withScroll can cause performance issues, and the WebView-based approach may result in slower rendering or less smooth interactions compared to native PDF libraries.

Limited Version Support

Only confirmed compatible with older React Native 0.59-0.60 and Expo SDK 33-36+, which may not align with modern projects using updated SDKs, risking compatibility breaks.

Security Concerns for Modes

The useGoogleReader prop is explicitly not recommended for confidential data, as it sends PDFs to Google servers, limiting its use in secure applications.

Frequently Asked Questions

Related Projects

react-native-hyperlink

A <Hyperlink /> component for react-native that makes urls, fuzzy links, emails etc clickable

Stars813

Forks85

Last commit3 months ago

react-native-markdown-display

React Native 100% compatible CommonMark renderer

Stars789

Forks204

Last commit2 months ago

react-native-responsive-fontsize

🔠 Responsive fontSize based on screen-size of the device in React-Native

Stars739

Forks39

Last commit4 months ago

react-native-html-to-pdf

Convert html strings to PDF documents using React Native

Stars460

Forks274