react-native-optimized-pdf 1.1.0 → 1.2.0

package/ios/Views/OptimizedPDFView.swift

@@ -1,5 +1,6 @@
 import UIKit
 import React
+import PDFKit
 
 /// Protocol for receiving PDF view events.
 @objc protocol OptimizedPDFViewDelegate: AnyObject {
@@ -44,7 +45,7 @@ final class OptimizedPDFView: UIScrollView {
     @objc var enableAntialiasing: Bool = true {
         didSet {
             configuration.enableAntialiasing = enableAntialiasing
-            tiledPageView.enableAntialiasing = enableAntialiasing
+            tiledPageView?.enableAntialiasing = enableAntialiasing
         }
     }
 
@@ -73,7 +74,8 @@ final class OptimizedPDFView: UIScrollView {
     // MARK: - Private Properties
 
     private var pdfDocument: CGPDFDocument?
-    private let tiledPageView: TiledPDFPageView
+    private var tiledPageView: TiledPDFPageView!
+    private var pdfURL: URL?
     private var configuration = PDFConfiguration.default
     private let documentLoader: PDFDocumentLoading
 
@@ -145,6 +147,8 @@ private extension OptimizedPDFView {
 
     func handleSourceChange() {
         resetDocument()
+        pdfURL = nil
+        FlattenedPageCache.shared.removeAll()
         pendingPageIndex = page.intValue
         needsLoad = true
         setNeedsLayout()
@@ -173,6 +177,9 @@ private extension OptimizedPDFView {
     func loadDocument() {
         guard !source.isEmpty else { return }
 
+        let path = source.hasPrefix("file://") ? String(source.dropFirst(7)) : source
+        pdfURL = URL(fileURLWithPath: path)
+
         let result = documentLoader.loadDocument(from: source, password: configuration.password)
 
         switch result {
@@ -234,7 +241,22 @@ private extension OptimizedPDFView {
         currentPageRect = pageRect
 
         prepareForPageDisplay()
-        configureTiledView(for: page, rect: pageRect)
+
+        tiledPageView?.cancel()
+        tiledPageView?.removeFromSuperview()
+
+        let newView = TiledPDFPageView(frame: CGRect(origin: .zero, size: pageRect.size))
+        newView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        newView.configuration = configuration
+        newView.pdfURL = pdfURL
+        newView.pageIndex = index
+        newView.pdfPage = page
+        addSubview(newView)
+        tiledPageView = newView
+
+        contentSize = pageRect.size
+        tiledPageView.preparePage()
+
         applyFitScale(for: pageRect)
         centerContent()
         notifyPageDisplayed(index: index, size: pageRect.size)
@@ -245,11 +267,6 @@ private extension OptimizedPDFView {
         contentOffset = .zero
     }
 
-    func configureTiledView(for page: CGPDFPage, rect: CGRect) {
-        tiledPageView.updateFrame(for: page)
-        contentSize = rect.size
-    }
-
     func applyFitScale(for pageRect: CGRect) {
         let fitScale = calculateFitScale(for: pageRect)
         minimumZoomScale = fitScale

package/ios/Views/TiledPDFPageView.swift

@@ -1,3 +1,8 @@
+import UIKit
+import CoreGraphics
+import PDFKit
+
+
 import UIKit
 import CoreGraphics
 
@@ -5,40 +10,93 @@ import CoreGraphics
 ///
 /// CATiledLayer divides the content into tiles, allowing smooth zooming and scrolling
 /// without rendering the entire PDF at once. This is essential for large PDF documents.
+
+// MARK: - Global cache of flattened pages
+final class FlattenedPageCache {
+    static let shared = FlattenedPageCache()
+
+    private let cache = NSCache<NSString, FlattenedPageEntry>()
+
+    private init() {
+        cache.countLimit = 10
+    }
+
+    func entry(forKey key: String) -> FlattenedPageEntry? {
+        cache.object(forKey: key as NSString)
+    }
+
+    func setEntry(_ entry: FlattenedPageEntry, forKey key: String) {
+        cache.setObject(entry, forKey: key as NSString)
+    }
+
+    func removeEntry(forKey key: String) {
+        cache.removeObject(forKey: key as NSString)
+    }
+
+    func removeAll() {
+        cache.removeAllObjects()
+    }
+}
+
+final class FlattenedPageEntry: NSObject {
+    let document: CGPDFDocument
+    let page: CGPDFPage
+
+    init(document: CGPDFDocument, page: CGPDFPage) {
+        self.document = document
+        self.page = page
+    }
+}
+
+// MARK: - Atomic flag for thread-safe cancellation
+
+final class OSAtomicFlag {
+    private var _value: Bool = false
+    private var _lock = os_unfair_lock()
+
+    func set() {
+        os_unfair_lock_lock(&_lock)
+        _value = true
+        os_unfair_lock_unlock(&_lock)
+    }
+
+    func isSet() -> Bool {
+        os_unfair_lock_lock(&_lock)
+        let v = _value
+        os_unfair_lock_unlock(&_lock)
+        return v
+    }
+}
+
+// MARK: - TiledPDFPageView
+
 final class TiledPDFPageView: UIView {
 
     // MARK: - Properties
 
-    /// The PDF page to render.
     var pdfPage: CGPDFPage? {
-        didSet {
-            setNeedsDisplay()
-        }
+        didSet { setNeedsDisplay() }
     }
 
-    /// Whether antialiasing is enabled for rendering.
+    var pdfURL: URL?
+    var pageIndex: Int = 0
+
     var enableAntialiasing: Bool = true {
-        didSet {
-            setNeedsDisplay()
-        }
+        didSet { setNeedsDisplay() }
     }
 
-    /// The configuration for tiled rendering.
     var configuration: PDFConfiguration = .default {
-        didSet {
-            applyConfiguration()
-        }
+        didSet { applyConfiguration() }
     }
 
-    /// Returns CATiledLayer as the backing layer.
-    override class var layerClass: AnyClass {
-        CATiledLayer.self
-    }
+    override class var layerClass: AnyClass { CATiledLayer.self }
 
-    /// Typed accessor for the tiled layer.
-    private var tiledLayer: CATiledLayer {
-        layer as! CATiledLayer
-    }
+    private var tiledLayer: CATiledLayer { layer as! CATiledLayer }
+
+    private var _activePage: CGPDFPage?
+    private var _pdfKitDocument: PDFDocument?
+    private var _generation: UInt = 0
+    private let _cancelled = OSAtomicFlag()
 
     // MARK: - Initialization
 
@@ -52,7 +110,6 @@ final class TiledPDFPageView: UIView {
         commonInit()
     }
 
-    /// Initializes with a specific configuration.
     convenience init(frame: CGRect, configuration: PDFConfiguration) {
         self.init(frame: frame)
         self.configuration = configuration
@@ -74,35 +131,138 @@ final class TiledPDFPageView: UIView {
         enableAntialiasing = configuration.enableAntialiasing
     }
 
+    // MARK: - Cancellation
+
+    func cancel() {
+        _cancelled.set()
+    }
+
+    private var currentCacheKey: String {
+        guard let url = pdfURL else { return "" }
+        return "\(url.absoluteString)_page\(pageIndex)"
+    }
+
+    // MARK: - Prepare Page (Flatten Pipeline)
+
+    func preparePage() {
+        _generation &+= 1
+        let currentGen = _generation
+
+        let cacheKey = currentCacheKey
+        if let cached = FlattenedPageCache.shared.entry(forKey: cacheKey) {
+            _activePage = cached.page
+            setNeedsDisplay()
+            return
+        }
+
+        _activePage = pdfPage
+
+        guard let url = pdfURL,
+              let originalPage = pdfPage else { return }
+
+        let idx = pageIndex
+        let originalCropBox = originalPage.getBoxRect(.cropBox)
+        let rotation = originalPage.rotationAngle
+
+        let pdfKitDoc: PDFDocument
+        if let existing = _pdfKitDocument {
+            pdfKitDoc = existing
+        } else if let newDoc = PDFDocument(url: url) {
+            _pdfKitDocument = newDoc
+            pdfKitDoc = newDoc
+        } else {
+            return
+        }
+
+        guard let pdfKitPage = pdfKitDoc.page(at: idx) else { return }
+        let annotations = pdfKitPage.annotations
+        if annotations.isEmpty { return }
+
+        DispatchQueue.global(qos: .userInitiated).async { [weak self] in
+            guard let self = self else { return }
+
+            let entry = Self.createFlattenedEntry(
+                pdfKitPage: pdfKitPage,
+                originalCropBox: originalCropBox,
+                rotation: Int(rotation)
+            )
+
+            guard let entry = entry else { return }
+            FlattenedPageCache.shared.setEntry(entry, forKey: cacheKey)
+
+            DispatchQueue.main.async { [weak self] in
+                guard let self = self, self._generation == currentGen else { return }
+                self._activePage = entry.page
+                self.setNeedsDisplay()
+            }
+        }
+    }
+
+    // MARK: - Flattening Logic
+    private static func createFlattenedEntry(
+        pdfKitPage: PDFPage,
+        originalCropBox: CGRect,
+        rotation: Int
+    ) -> FlattenedPageEntry? {
+        let finalSize: CGSize
+        if rotation == 90 || rotation == 270 {
+            finalSize = CGSize(width: originalCropBox.height, height: originalCropBox.width)
+        } else {
+            finalSize = originalCropBox.size
+        }
+
+        var mediaBox = CGRect(origin: .zero, size: finalSize)
+
+        let pdfData = NSMutableData()
+        guard let consumer = CGDataConsumer(data: pdfData as CFMutableData),
+              let pdfContext = CGContext(consumer: consumer, mediaBox: &mediaBox, nil) else {
+            return nil
+        }
+
+        pdfContext.beginPage(mediaBox: &mediaBox)
+
+        if originalCropBox.origin.x != 0 || originalCropBox.origin.y != 0 {
+            pdfContext.translateBy(x: -originalCropBox.origin.x, y: -originalCropBox.origin.y)
+        }
+
+        pdfKitPage.draw(with: .cropBox, to: pdfContext)
+
+        pdfContext.endPage()
+        pdfContext.closePDF()
+
+        guard let provider = CGDataProvider(data: pdfData as CFData),
+              let flattenedDoc = CGPDFDocument(provider),
+              let flattenedCGPage = flattenedDoc.page(at: 1) else {
+            return nil
+        }
+
+        return FlattenedPageEntry(document: flattenedDoc, page: flattenedCGPage)
+    }
+
     // MARK: - Rendering
 
     override func draw(_ rect: CGRect) {
+        guard !_cancelled.isSet() else { return }
+
         guard let context = UIGraphicsGetCurrentContext(),
-              let page = pdfPage else {
-            return
-        }
+              let page = _activePage else { return }
 
         renderPage(page, in: context, rect: rect)
     }
 
-    /// Renders the PDF page in the given graphics context.
     private func renderPage(_ page: CGPDFPage, in context: CGContext, rect: CGRect) {
         context.saveGState()
         defer { context.restoreGState() }
 
-        // Configure rendering quality
         context.setShouldAntialias(enableAntialiasing)
         context.interpolationQuality = determineInterpolationQuality()
 
-        // Fill background
         context.setFillColor(UIColor.white.cgColor)
         context.fill(rect)
 
-        // Transform coordinate system (UIKit uses top-left origin, PDF uses bottom-left)
         context.translateBy(x: 0, y: bounds.height)
         context.scaleBy(x: 1.0, y: -1.0)
 
-        // Apply PDF transform to fit the page
         let pdfTransform = page.getDrawingTransform(
             .cropBox,
             rect: bounds,
@@ -110,12 +270,10 @@ final class TiledPDFPageView: UIView {
             preserveAspectRatio: true
         )
         context.concatenate(pdfTransform)
-
         // Draw the page
         context.drawPDFPage(page)
     }
 
-    /// Determines the interpolation quality based on zoom level.
     private func determineInterpolationQuality() -> CGInterpolationQuality {
         tiledLayer.levelsOfDetail == 1 ? .low : .high
     }
@@ -125,9 +283,9 @@ final class TiledPDFPageView: UIView {
 
 extension TiledPDFPageView {
 
-    /// Prepares the view for displaying a new page.
     func prepareForReuse() {
         pdfPage = nil
+        _activePage = nil
         layer.contents = nil
     }
 
@@ -137,4 +295,18 @@ extension TiledPDFPageView {
         frame = CGRect(origin: .zero, size: pageRect.size)
         pdfPage = page
     }
+
+    func invalidateCache() {
+        FlattenedPageCache.shared.removeEntry(forKey: currentCacheKey)
+        _activePage = pdfPage
+        _pdfKitDocument = nil
+        setNeedsDisplay()
+    }
+
+    func invalidateAllCache() {
+        FlattenedPageCache.shared.removeAll()
+        _pdfKitDocument = nil
+        _activePage = pdfPage
+        setNeedsDisplay()
+    }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-optimized-pdf",
-  "version": "1.1.0",
-  "description": "Ultra high-performance PDF viewer for React Native. Renders massive PDFs (1000+ pages) with extreme zoom levels while using minimal memory. 10x faster than native PDFKit on iOS, prevents crashes on large documents. Uses CATiledLayer (iOS) and PdfRenderer (Android) for tile-based rendering.",
+  "version": "1.2.0",
+  "description": "React Native PDF viewer with high performance, zoom, and support for large PDF files. Fast, memory-efficient, and supports annotations (annots) on iOS and Android.",
   "main": "index.ts",
   "types": "index.d.ts",
   "scripts": {
@@ -14,21 +14,27 @@
   },
   "keywords": [
     "react-native",
+    "react-native-pdf",
     "pdf",
     "pdf-viewer",
-    "viewer",
+    "react-native-pdf-viewer",
+    "pdf-reader",
+    "pdf-renderer",
+    "pdf-display",
     "ios",
     "android",
-    "performance",
-    "high-performance",
     "large-pdf",
+    "big-pdf",
+    "pdf-performance",
+    "fast-pdf",
     "memory-efficient",
     "tiled-rendering",
     "zoom",
-    "catiled-layer",
-    "pdfrenderer",
-    "no-crash",
-    "optimized"
+    "annotations",
+    "annots",
+    "pdfkit",
+    "pdfium",
+    "catiledlayer"
   ],
   "author": "Your Name",
   "license": "MIT",
@@ -39,8 +45,8 @@
   "devDependencies": {
     "@react-native-community/eslint-config": "^3.2.0",
     "@types/crypto-js": "^4.2.2",
-    "@types/react": "^18.0.0",
-    "@types/react-native": "^0.72.0",
+    "@types/react": "^18.2.6",
+    "@types/react-native": "^0.64.19",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "eslint": "^8.0.0",
@@ -48,6 +54,8 @@
     "eslint-plugin-jest": "^29.11.0",
     "eslint-plugin-prettier": "^5.5.4",
     "prettier": "2.8.8",
+    "react": "18.2.0",
+    "react-native": "0.73.11",
     "typescript": "^5.0.0"
   },
   "repository": {

package/src/OptimizedPdfView.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-const { View, Platform, requireNativeComponent } = require('react-native');
+import { View, Platform, requireNativeComponent } from 'react-native';
 import { PdfCacheService } from './services/pdfCache';
 import { PdfNavigationControls } from './components/PdfNavigationControls';
 import { PdfLoadingOverlay, PdfErrorOverlay } from './components/PdfOverlays';
@@ -9,11 +9,16 @@ import {
   DEFAULT_SHOW_NAVIGATION_CONTROLS,
   ERROR_MESSAGES,
 } from './constants';
-import type { OptimizedPdfViewProps, NativeLoadCompleteEvent, NativePageCountEvent } from './types';
+import type {
+  OptimizedPdfViewProps,
+  NativeLoadCompleteEvent,
+  NativePageCountEvent,
+  NativeOptimizedPdfViewProps,
+} from './types';
 
 const NativeOptimizedPdfView =
   Platform.OS === 'ios' || Platform.OS === 'android'
-    ? requireNativeComponent('OptimizedPdfView')
+    ? requireNativeComponent<NativeOptimizedPdfViewProps>('OptimizedPdfView')
     : () => null;
 
 /**
@@ -37,6 +42,7 @@ const NativeOptimizedPdfView =
  */
 export default function OptimizedPdfView({
   source,
+  page,
   password,
   maximumZoom = DEFAULT_MAXIMUM_ZOOM,
   enableAntialiasing = DEFAULT_ENABLE_ANTIALIASING,
@@ -52,7 +58,7 @@ export default function OptimizedPdfView({
   const [loading, setLoading] = useState(true);
   const [progress, setProgress] = useState(0);
   const [error, setError] = useState<string | null>(null);
-  const [page, setPage] = useState(0);
+  const [internalPage, setInternalPage] = useState(0);
   const [totalPages, setTotalPages] = useState(1);
   const lastSource = useRef<string | null>(null);
 
@@ -64,7 +70,7 @@ export default function OptimizedPdfView({
       setProgress(0);
       setError(null);
       setLocalPath(null);
-      setPage(0);
+      setInternalPage(0);
       setTotalPages(1);
       lastSource.current = source.uri;
 
@@ -96,23 +102,23 @@ export default function OptimizedPdfView({
   }, [source.uri, source.cache, source.cacheFileName, source.expiration, onError, source]);
 
   const handleNextPage = () => {
-    if (page < totalPages - 1) {
-      const newPage = page + 1;
-      setPage(newPage);
+    if (internalPage < totalPages - 1) {
+      const newPage = internalPage + 1;
+      setInternalPage(newPage);
       onPageChange?.(newPage);
     }
   };
 
   const handlePrevPage = () => {
-    if (page > 0) {
-      const newPage = page - 1;
-      setPage(newPage);
+    if (internalPage > 0) {
+      const newPage = internalPage - 1;
+      setInternalPage(newPage);
       onPageChange?.(newPage);
     }
   };
 
   const handlePageChange = (newPage: number) => {
-    setPage(newPage);
+    setInternalPage(newPage);
     onPageChange?.(newPage);
   };
 
@@ -143,7 +149,7 @@ export default function OptimizedPdfView({
     <View style={[{ flex: 1 }, style]}>
       <NativeOptimizedPdfView
         source={localPath}
-        page={page}
+        page={showNavigationControls ? internalPage : page || 0}
         enableAntialiasing={enableAntialiasing}
         maximumZoom={maximumZoom}
         password={password || ''}
@@ -155,7 +161,7 @@ export default function OptimizedPdfView({
       />
       {showNavigationControls && (
         <PdfNavigationControls
-          currentPage={page}
+          currentPage={internalPage}
           totalPages={totalPages}
           onNextPage={handleNextPage}
           onPrevPage={handlePrevPage}

package/src/components/PdfNavigationControls.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-const { View, Text, TouchableOpacity, TextInput, StyleSheet } = require('react-native');
+import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native';
 import type { PdfNavigationControlsProps } from '../types';
 
 /**

package/src/components/PdfOverlays.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-const { View, Text, ActivityIndicator, StyleSheet } = require('react-native');
+import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';
 import type { PdfLoadingOverlayProps, PdfErrorOverlayProps } from '../types';
 
 /**
@@ -8,7 +8,7 @@ import type { PdfLoadingOverlayProps, PdfErrorOverlayProps } from '../types';
 export const PdfLoadingOverlay: React.FC<PdfLoadingOverlayProps> = ({ progress, style }) => {
   return (
     <View style={[styles.container, style]}>
-      <ActivityIndicator size="large" color="#fff" />
+      <ActivityIndicator size="large" color="#000000" />
       <Text style={styles.progressText}>{progress}%</Text>
     </View>
   );
@@ -33,7 +33,7 @@ const styles = StyleSheet.create({
     padding: 20,
   },
   progressText: {
-    color: '#fff',
+    color: '#000000',
     marginTop: 10,
     fontSize: 16,
     fontWeight: '600',

package/src/types/index.ts

@@ -41,6 +41,8 @@ export interface PdfErrorEvent {
 export interface OptimizedPdfViewProps {
   /** PDF source configuration */
   source: PdfSource;
+  /** Current page index (0-based) */
+  page?: number;
   /** Password for encrypted PDF files */
   password?: string;
   /** Maximum zoom level. Default: 3 */
@@ -110,3 +112,26 @@ export interface PdfErrorOverlayProps {
   error: string;
   style?: ViewStyle;
 }
+
+export interface NativeOptimizedPdfViewProps {
+  /** PDF source configuration */
+  source: string;
+  /** Current page index (0-based) */
+  page: number;
+  /** Password for encrypted PDF files */
+  password?: string;
+  /** Maximum zoom level. Default: 3 */
+  maximumZoom?: number;
+  /** Enable antialiasing for better rendering quality. Default: true */
+  enableAntialiasing?: boolean;
+  /** Callback when PDF is loaded successfully */
+  onLoadComplete?: (event: NativeLoadCompleteEvent) => void;
+  /** Callback when an error occurs */
+  onError?: (error: PdfErrorEvent) => void;
+  /** Callback when page count is available */
+  onPageCount?: (event: NativePageCountEvent) => void;
+  /** Callback when page changes */
+  onPasswordRequired?: () => void;
+  /** Custom style for the container */
+  style?: ViewStyle;
+}

package/tsconfig.json

@@ -1,17 +1,24 @@
 {
+  // "extends": "@react-native/typescript-config/tsconfig.json",
   "compilerOptions": {
-    "target": "es2017",
-    "module": "commonjs",
-    "lib": ["es6"],
-    "allowJs": true,
-    "jsx": "react-native",
-    "noEmit": true,
-    "isolatedModules": true,
-    "strict": true,
-    "moduleResolution": "node",
+    "target": "ESNext",
+    "module": "ESNext",
     "esModuleInterop": true,
+    "moduleResolution": "bundler",
+    "jsx": "react-native",
     "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noEmit": false,
+    "checkJs": false,
+    "allowJs": false,
+    "noImplicitAny": false,
+    "declaration": true,
+    "paths": {
+      "react-native-calendars": ["./src/index.ts"]
+    },
   },
+  "include": ["src/**/*", "example/App.tsx"],
   "exclude": ["node_modules", "**/__tests__/**"]
 }