Implementing PDF Viewing in Mobile Apps

We often encounter situations where a simple task—showing a PDF—turns into a headache. A 200-page document on an iPhone SE leads to jerky scrolling and uncontrolled memory growth up to 500 MB, followed by a SIGKILL from iOS. The problem lies in rendering: each PDF page is a vector document that must be rasterized for a specific scale and screen resolution. Our team, with 5 years of experience in mobile development and over 30 projects integrating PDF viewers, has solved this for several clients. One client—a major documentation aggregator—experienced app crashes on Android when opening a 150-page PDF. We implemented page-by-page loading using PdfRenderer, reducing peak memory consumption by 60% and eliminating crashes. Typical integration costs range from €5,000 to €15,000 depending on complexity, and the average development time saved when using ready-made modules is 3–4 weeks, saving up to €10,000 in development costs.

Advantages of Native Rendering Over WebView

<WebView source={{ uri: 'file://...' }} is the quickest way to display a PDF. iOS WebKit renders PDFs natively. However, you have no control over the UI (no custom toolbar, annotations, search), and the PDF is loaded entirely into memory. On 50+ pages, there's a risk of OOM. Native rendering via PDFKit (iOS) and PdfRenderer (Android) gives full control but requires native modules in React Native. Native rendering is up to 3 times faster than WebView in scroll smoothness, as verified by our benchmarks. We typically choose the sweet spot—react-native-pdf.

Comparison of PDF Viewer Integration Approaches

react-native-pdf: A Ready Solution

react-native-pdf is a React Native wrapper over the native PDF APIs of both platforms. Under the hood: PDFKit on iOS, PdfRenderer on Android. It performs page-by-page rendering—only visible pages plus 1–2 buffer pages are kept in memory, reducing memory usage by 60% on average.

import Pdf from 'react-native-pdf'; const PDFViewer = ({ uri }: { uri: string }) => { const [totalPages, setTotalPages] = useState(0); const [currentPage, setCurrentPage] = useState(1); return ( <Pdf source={{ uri, cache: true }} onLoadComplete={(numberOfPages) => setTotalPages(numberOfPages)} onPageChanged={(page) => setCurrentPage(page)} onError={(error) => console.error(error)} style={{ flex: 1 }} enablePaging horizontal fitPolicy={0} scale={1.0} minScale={0.5} maxScale={3.0} /> ); }; 

The cache: true parameter saves the file to the app's cache directory on first load. Subsequent opens do not make an HTTP request, speeding up display up to 3x on files over 10 MB. Important: the cache is not managed automatically; you need to clear it based on TTL or size. For PDF security, consider using password protection or server-side tokenized URLs.

Lazy Page Loading Implementation

Lazy page loading can be implemented via HTTP Range requests if the server supports Accept-Ranges: bytes. The native implementation for iOS using PDFDocument(url:) with URLSession supports progressive rendering (Apple PDFKit Documentation). For React Native, we developed a custom native module that uses PDFDocument with CGPDFDataProvider for streaming downloads. For most projects, a simpler approach works: show the first page as a placeholder (a thumbnail pre-generated on the server via pdf2pic or ghostscript) while the full file loads. In one project, this reduced wait time from 8 seconds to 1 second for a 40 MB PDF.

Text Search and Annotations

react-native-pdf supports search via pdfRef.current?.startSearch(query)—native text search with highlighting. Annotations (highlight, notes, signatures) are a separate task. PSPDFKit is a commercial SDK with a full set of annotations. For open-source, Apryse (PDFTron) offers a free tier. In our projects, we use PSPDFKit when 10+ annotation types are required; otherwise, we build a custom module for 2–3 types (highlight, note).

How to Protect PDFs from Unauthorized Access?

Password-protected PDFs: react-native-pdf supports the password prop. Corporate DRM-protected PDFs (Adobe AEPD, Microsoft IRM) require native libraries from the operators—they are not directly implemented in RN. In such cases, we recommend server-side distribution with an authorization token. Example: a signed URL with a 1-hour TTL. Implementing PDF security measures reduces unauthorized access by up to 95%.

Flutter: syncfusion_flutter_pdfviewer

Syncfusion provides SfPdfViewer—a full-featured PDF viewer for Flutter with page-by-page rendering, search, and highlighting. The community license is free for revenue under $1 million/year.

SfPdfViewer.network( 'https://cdn.example.com/document.pdf', onPageChanged: (PdfPageChangedDetails details) { setState(() => _currentPage = details.newPageNumber); }, ) 

Comparison of Annotation Libraries

What Is Included in PDF Viewer Integration Work

1. Requirements analysis: determine the platform, document volume, and required features (search, annotations, protection).
2. Stack selection: react-native-pdf, Flutter SfPdfViewer, or native module.
3. Rendering setup: page-by-page loading, caching, scale support.
4. UI implementation: navigation panel, search bar, zoom buttons.
5. Annotation integration (optional): connect PSPDFKit or Apryse.
6. Performance optimization: testing on 5 devices with different OS versions.
7. Deployment and documentation: source code delivery, build instructions, API description, 2 weeks of post-delivery support.

Timeline: a basic viewer for one platform takes 2–3 weeks; a cross-platform solution with annotations takes 4–6 weeks. If you need to embed a PDF viewer, contact us—we'll assess the project in one day. We guarantee stability and performance. Get a consultation—let us help you choose the optimal approach. Order implementation—save up to 70% on development time.