0
# React Native PDF
1

2
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.
3

4
## Package Information
5

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

15
## Core Imports
16

17
```typescript
18
import Pdf from "react-native-pdf";
19
```
20

21
For CommonJS:
22

23
```javascript
24
const Pdf = require("react-native-pdf");
25
```
26

27
## Basic Usage
28

29
```typescript
30
import React from "react";
31
import { View, StyleSheet } from "react-native";
32
import Pdf from "react-native-pdf";
33

34
export default function PdfViewer() {
35
  return (
36
    <View style={styles.container}>
37
      <Pdf
38
        source={{
39
          uri: "https://example.com/document.pdf",
40
          cache: true
41
        }}
42
        onLoadComplete={(numberOfPages, filePath, { width, height }) => {
43
          console.log(`Loaded ${numberOfPages} pages`);
44
        }}
45
        onPageChanged={(page, numberOfPages) => {
46
          console.log(`Current page: ${page} of ${numberOfPages}`);
47
        }}
48
        onError={(error) => {
49
          console.error("PDF Error:", error);
50
        }}
51
        style={styles.pdf}
52
      />
53
    </View>
54
  );
55
}
56

57
const styles = StyleSheet.create({
58
  container: {
59
    flex: 1,
60
  },
61
  pdf: {
62
    flex: 1,
63
    width: "100%",
64
  },
65
});
66
```
67

68
## Architecture
69

70
React Native PDF is built around several key components:
71

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

79
## Capabilities
80

81
### PDF Display and Rendering
82

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

85
```typescript { .api }
86
interface PdfProps {
87
  source: Source | number;
88
  page?: number;
89
  scale?: number;
90
  minScale?: number;
91
  maxScale?: number;
92
  horizontal?: boolean;
93
  spacing?: number;
94
  password?: string;
95
  singlePage?: boolean;
96
  fitPolicy?: 0 | 1 | 2;
97
  style?: ViewStyle;
98
  progressContainerStyle?: ViewStyle;
99
  onLoadProgress?: (percent: number) => void;
100
}
101

102
type Source = {
103
  uri?: string;
104
  headers?: { [key: string]: string };
105
  cache?: boolean;
106
  cacheFileName?: string;
107
  expiration?: number;
108
  method?: string;
109
  body?: string;
110
};
111
```
112

113
[PDF Display](./pdf-display.md)
114

115
### User Interface and Interaction
116

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

119
```typescript { .api }
120
interface UIProps {
121
  showsHorizontalScrollIndicator?: boolean;
122
  showsVerticalScrollIndicator?: boolean;
123
  scrollEnabled?: boolean;
124
  enablePaging?: boolean;
125
  enableRTL?: boolean;
126
  renderActivityIndicator?: (progress: number) => React.ReactElement;
127
  enableAntialiasing?: boolean;
128
  enableAnnotationRendering?: boolean;
129
  enableDoubleTapZoom?: boolean;
130
  trustAllCerts?: boolean;
131
  progressContainerStyle?: ViewStyle;
132
  usePDFKit?: boolean;
133
}
134
```
135

136
[User Interface](./user-interface.md)
137

138
### Event Handling and Callbacks
139

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

142
```typescript { .api }
143
interface EventProps {
144
  onLoadProgress?: (percent: number) => void;
145
  onLoadComplete?: (
146
    numberOfPages: number,
147
    path: string,
148
    size: { height: number; width: number },
149
    tableContents?: TableContent[]
150
  ) => void;
151
  onPageChanged?: (page: number, numberOfPages: number) => void;
152
  onError?: (error: Error) => void;
153
  onPageSingleTap?: (page: number, x: number, y: number) => void;
154
  onScaleChanged?: (scale: number) => void;
155
  onPressLink?: (url: string) => void;
156
}
157

158
type TableContent = {
159
  children: TableContent[];
160
  mNativePtr: number;
161
  pageIdx: number;
162
  title: string;
163
};
164
```
165

166
[Event Handling](./event-handling.md)
167

168
### Component Methods and Control
169

170
Programmatic control methods for navigation and component manipulation.
171

172
```typescript { .api }
173
class Pdf extends React.Component<PdfProps> {
174
  setPage(pageNumber: number): void;
175
  setNativeProps(nativeProps: object): void;
176
}
177
```
178

179
[Component Control](./component-control.md)
180

181
## Complete API Reference
182

183
```typescript { .api }
184
/**
185
 * Complete interface showing all available PDF component props
186
 * This combines all capability-specific interfaces into one comprehensive reference
187
 */
188
interface CompletePdfProps {
189
  // Core display props
190
  source: Source | number;
191
  page?: number;
192
  scale?: number;
193
  minScale?: number;
194
  maxScale?: number;
195
  horizontal?: boolean;
196
  spacing?: number;
197
  password?: string;
198
  singlePage?: boolean;
199
  fitPolicy?: 0 | 1 | 2;
200
  style?: ViewStyle;
201
  progressContainerStyle?: ViewStyle;
202
  
203
  // UI and interaction props
204
  showsHorizontalScrollIndicator?: boolean;
205
  showsVerticalScrollIndicator?: boolean;
206
  scrollEnabled?: boolean;
207
  enablePaging?: boolean;
208
  enableRTL?: boolean;
209
  renderActivityIndicator?: (progress: number) => React.ReactElement;
210
  enableAntialiasing?: boolean;
211
  enableAnnotationRendering?: boolean;
212
  enableDoubleTapZoom?: boolean;
213
  trustAllCerts?: boolean;
214
  usePDFKit?: boolean;
215
  
216
  // Event handlers
217
  onLoadProgress?: (percent: number) => void;
218
  onLoadComplete?: (
219
    numberOfPages: number,
220
    path: string,
221
    size: { height: number; width: number },
222
    tableContents?: TableContent[]
223
  ) => void;
224
  onPageChanged?: (page: number, numberOfPages: number) => void;
225
  onError?: (error: Error) => void;
226
  onPageSingleTap?: (page: number, x: number, y: number) => void;
227
  onScaleChanged?: (scale: number) => void;
228
  onPressLink?: (url: string) => void;
229
  
230
  // Accessibility props
231
  accessibilityLabel?: string;
232
  importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants";
233
  testID?: string;
234
  accessibilityLiveRegion?: "none" | "polite" | "assertive";
235
  accessibilityComponentType?: string;
236
  renderToHardwareTextureAndroid?: string;
237
  onLayout?: boolean;
238
}
239
```
240

241
## Types
242

243
```typescript { .api }
244
type Source = {
245
  /** URL or file path to PDF document */
246
  uri?: string;
247
  /** HTTP headers for network requests */
248
  headers?: { [key: string]: string };
249
  /** Enable caching for network PDFs */
250
  cache?: boolean;
251
  /** Custom cache file name */
252
  cacheFileName?: string;
253
  /** Cache expiration time in days */
254
  expiration?: number;
255
  /** HTTP method for network requests */
256
  method?: string;
257
  /** Request body for POST/PUT requests */
258
  body?: string;
259
};
260

261
type TableContent = {
262
  /** Nested table of contents items */
263
  children: TableContent[];
264
  /** Native pointer reference */
265
  mNativePtr: number;
266
  /** Page index for this item */
267
  pageIdx: number;
268
  /** Display title for this item */
269
  title: string;
270
};
271

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