react-native-optimized-pdf 1.0.1 → 1.2.0

package/ios/Views/TiledPDFPageView.swift

@@ -0,0 +1,312 @@
+import UIKit
+import CoreGraphics
+import PDFKit
+
+
+import UIKit
+import CoreGraphics
+
+/// A view that renders a PDF page using CATiledLayer for efficient tiled rendering.
+///
+/// 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
+
+    var pdfPage: CGPDFPage? {
+        didSet { setNeedsDisplay() }
+    }
+
+    var pdfURL: URL?
+    var pageIndex: Int = 0
+
+    var enableAntialiasing: Bool = true {
+        didSet { setNeedsDisplay() }
+    }
+
+    var configuration: PDFConfiguration = .default {
+        didSet { applyConfiguration() }
+    }
+
+    override class var layerClass: AnyClass { CATiledLayer.self }
+
+    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
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        commonInit()
+    }
+
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        commonInit()
+    }
+
+    convenience init(frame: CGRect, configuration: PDFConfiguration) {
+        self.init(frame: frame)
+        self.configuration = configuration
+        applyConfiguration()
+    }
+
+    private func commonInit() {
+        applyConfiguration()
+        contentScaleFactor = UIScreen.main.scale
+        backgroundColor = .white
+    }
+
+    // MARK: - Configuration
+
+    private func applyConfiguration() {
+        tiledLayer.tileSize = configuration.tileSize
+        tiledLayer.levelsOfDetail = configuration.levelsOfDetail
+        tiledLayer.levelsOfDetailBias = configuration.levelsOfDetailBias
+        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 = _activePage else { return }
+
+        renderPage(page, in: context, rect: rect)
+    }
+
+    private func renderPage(_ page: CGPDFPage, in context: CGContext, rect: CGRect) {
+        context.saveGState()
+        defer { context.restoreGState() }
+
+        context.setShouldAntialias(enableAntialiasing)
+        context.interpolationQuality = determineInterpolationQuality()
+
+        context.setFillColor(UIColor.white.cgColor)
+        context.fill(rect)
+
+        context.translateBy(x: 0, y: bounds.height)
+        context.scaleBy(x: 1.0, y: -1.0)
+
+        let pdfTransform = page.getDrawingTransform(
+            .cropBox,
+            rect: bounds,
+            rotate: 0,
+            preserveAspectRatio: true
+        )
+        context.concatenate(pdfTransform)
+        // Draw the page
+        context.drawPDFPage(page)
+    }
+
+    private func determineInterpolationQuality() -> CGInterpolationQuality {
+        tiledLayer.levelsOfDetail == 1 ? .low : .high
+    }
+}
+
+// MARK: - Public Methods
+
+extension TiledPDFPageView {
+
+    func prepareForReuse() {
+        pdfPage = nil
+        _activePage = nil
+        layer.contents = nil
+    }
+
+    /// Updates the view size to match the page dimensions.
+    func updateFrame(for page: CGPDFPage) {
+        let pageRect = page.getBoxRect(.cropBox)
+        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.0.1",
-  "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__/**"]
 }