or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

component-control.mdevent-handling.mdindex.mdpdf-display.mduser-interface.md
tile.json

tessl/npm-react-native-pdf

A react native PDF view component for displaying PDF documents from various sources with caching support.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-native-pdf@6.7.x

To install, run

npx @tessl/cli install tessl/npm-react-native-pdf@6.7.0

index.mddocs/

React Native PDF

React Native PDF is a cross-platform PDF viewer component that enables mobile applications to display PDF documents from various sources including URLs, local files, blobs, and assets with caching support. It offers comprehensive PDF interaction features including scrolling, zooming, gestures, password-protected PDF support, and programmatic navigation.

Package Information

  • Package Name: react-native-pdf
  • Package Type: npm
  • Language: JavaScript with TypeScript definitions and Flow types
  • Installation: npm install react-native-pdf react-native-blob-util
  • Peer Dependencies: react-native-blob-util >= 0.13.7, react, react-native
  • Platform Support: iOS, Android, Windows
  • New Architecture: React Native Fabric/TurboModules compatible
  • React Native Version: 0.60+ (auto-linking), 0.59 and below requires manual linking

Core Imports

import Pdf from "react-native-pdf";

For CommonJS:

const Pdf = require("react-native-pdf");

Basic Usage

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

export default function PdfViewer() {
  return (
    <View style={styles.container}>
      <Pdf
        source={{
          uri: "https://example.com/document.pdf",
          cache: true
        }}
        onLoadComplete={(numberOfPages, filePath, { width, height }) => {
          console.log(`Loaded ${numberOfPages} pages`);
        }}
        onPageChanged={(page, numberOfPages) => {
          console.log(`Current page: ${page} of ${numberOfPages}`);
        }}
        onError={(error) => {
          console.error("PDF Error:", error);
        }}
        style={styles.pdf}
      />
    </View>
  );
}

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

Architecture

React Native PDF is built around several key components:

  • Main Pdf Component: Primary React component for rendering PDF documents with full feature set
  • Source Management: Flexible source handling supporting URLs, local files, base64 data, and bundled assets
  • Caching System: Intelligent caching layer using react-native-blob-util for network PDFs
  • Native Rendering: Platform-specific native PDF rendering with iOS PDFKit and Android PDF implementations
  • Gesture Handling: Touch gesture system for zoom, pan, tap, and scroll interactions
  • New Architecture Support: React Native Fabric/TurboModules compatibility via codegen

Capabilities

PDF Display and Rendering

Core PDF rendering functionality with support for multiple source types, caching, and display configuration. Handles all PDF loading, rendering, and basic interaction.

interface PdfProps {
  source: Source | number;
  page?: number;
  scale?: number;
  minScale?: number;
  maxScale?: number;
  horizontal?: boolean;
  spacing?: number;
  password?: string;
  singlePage?: boolean;
  fitPolicy?: 0 | 1 | 2;
  style?: ViewStyle;
  progressContainerStyle?: ViewStyle;
  onLoadProgress?: (percent: number) => void;
}

type Source = {
  uri?: string;
  headers?: { [key: string]: string };
  cache?: boolean;
  cacheFileName?: string;
  expiration?: number;
  method?: string;
  body?: string;
};

PDF Display

User Interface and Interaction

UI configuration and user interaction capabilities including scroll indicators, activity indicators, touch gestures, and accessibility features.

interface UIProps {
  showsHorizontalScrollIndicator?: boolean;
  showsVerticalScrollIndicator?: boolean;
  scrollEnabled?: boolean;
  enablePaging?: boolean;
  enableRTL?: boolean;
  renderActivityIndicator?: (progress: number) => React.ReactElement;
  enableAntialiasing?: boolean;
  enableAnnotationRendering?: boolean;
  enableDoubleTapZoom?: boolean;
  trustAllCerts?: boolean;
  progressContainerStyle?: ViewStyle;
  usePDFKit?: boolean;
}

User Interface

Event Handling and Callbacks

Comprehensive event system for PDF loading, page navigation, user interactions, and error handling with detailed callback information.

interface EventProps {
  onLoadProgress?: (percent: number) => void;
  onLoadComplete?: (
    numberOfPages: number,
    path: string,
    size: { height: number; width: number },
    tableContents?: TableContent[]
  ) => void;
  onPageChanged?: (page: number, numberOfPages: number) => void;
  onError?: (error: Error) => void;
  onPageSingleTap?: (page: number, x: number, y: number) => void;
  onScaleChanged?: (scale: number) => void;
  onPressLink?: (url: string) => void;
}

type TableContent = {
  children: TableContent[];
  mNativePtr: number;
  pageIdx: number;
  title: string;
};

Event Handling

Component Methods and Control

Programmatic control methods for navigation and component manipulation.

class Pdf extends React.Component<PdfProps> {
  setPage(pageNumber: number): void;
  setNativeProps(nativeProps: object): void;
}

Component Control

Complete API Reference

/**
 * Complete interface showing all available PDF component props
 * This combines all capability-specific interfaces into one comprehensive reference
 */
interface CompletePdfProps {
  // Core display props
  source: Source | number;
  page?: number;
  scale?: number;
  minScale?: number;
  maxScale?: number;
  horizontal?: boolean;
  spacing?: number;
  password?: string;
  singlePage?: boolean;
  fitPolicy?: 0 | 1 | 2;
  style?: ViewStyle;
  progressContainerStyle?: ViewStyle;
  
  // UI and interaction props
  showsHorizontalScrollIndicator?: boolean;
  showsVerticalScrollIndicator?: boolean;
  scrollEnabled?: boolean;
  enablePaging?: boolean;
  enableRTL?: boolean;
  renderActivityIndicator?: (progress: number) => React.ReactElement;
  enableAntialiasing?: boolean;
  enableAnnotationRendering?: boolean;
  enableDoubleTapZoom?: boolean;
  trustAllCerts?: boolean;
  usePDFKit?: boolean;
  
  // Event handlers
  onLoadProgress?: (percent: number) => void;
  onLoadComplete?: (
    numberOfPages: number,
    path: string,
    size: { height: number; width: number },
    tableContents?: TableContent[]
  ) => void;
  onPageChanged?: (page: number, numberOfPages: number) => void;
  onError?: (error: Error) => void;
  onPageSingleTap?: (page: number, x: number, y: number) => void;
  onScaleChanged?: (scale: number) => void;
  onPressLink?: (url: string) => void;
  
  // Accessibility props
  accessibilityLabel?: string;
  importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants";
  testID?: string;
  accessibilityLiveRegion?: "none" | "polite" | "assertive";
  accessibilityComponentType?: string;
  renderToHardwareTextureAndroid?: string;
  onLayout?: boolean;
}

Types

type Source = {
  /** URL or file path to PDF document */
  uri?: string;
  /** HTTP headers for network requests */
  headers?: { [key: string]: string };
  /** Enable caching for network PDFs */
  cache?: boolean;
  /** Custom cache file name */
  cacheFileName?: string;
  /** Cache expiration time in days */
  expiration?: number;
  /** HTTP method for network requests */
  method?: string;
  /** Request body for POST/PUT requests */
  body?: string;
};

type TableContent = {
  /** Nested table of contents items */
  children: TableContent[];
  /** Native pointer reference */
  mNativePtr: number;
  /** Page index for this item */
  pageIdx: number;
  /** Display title for this item */
  title: string;
};

/** Fit policy constants */
type FitPolicy = 0 | 1 | 2; // 0: fit width, 1: fit height, 2: fit both