0
# PDF Display
1

2
Core PDF rendering functionality providing support for multiple source types, caching, display configuration, and basic PDF interaction. This handles all aspects of loading and displaying PDF documents from various sources.
3

4
## Capabilities
5

6
### PDF Source Configuration
7

8
Configure PDF document sources from URLs, local files, base64 data, or bundled assets.
9

10
```typescript { .api }
11
/**
12
 * PDF source configuration
13
 * Supports various source types: network URLs, local files, base64 data, bundled assets
14
 */
15
type Source = {
16
  /** URL or file path to PDF document */
17
  uri?: string;
18
  /** HTTP headers for network requests (authentication, content-type, etc.) */
19
  headers?: { [key: string]: string };
20
  /** Enable caching for network PDFs to improve performance */
21
  cache?: boolean;
22
  /** Custom cache file name (defaults to SHA1 hash of URI) */
23
  cacheFileName?: string;
24
  /** Cache expiration time in days (defaults to no expiration) */
25
  expiration?: number;
26
  /** HTTP method for network requests (GET, POST, PUT, etc.) */
27
  method?: string;
28
  /** Request body for POST/PUT requests */
29
  body?: string;
30
};
31
```
32

33
**Usage Examples:**
34

35
```typescript
36
// Network PDF with caching
37
const networkSource: Source = {
38
  uri: "https://example.com/document.pdf",
39
  cache: true,
40
  cacheFileName: "my-document.pdf",
41
  expiration: 7, // Cache for 7 days
42
  headers: {
43
    "Authorization": "Bearer token123"
44
  }
45
};
46

47
// Local file
48
const localSource: Source = {
49
  uri: "file:///path/to/document.pdf"
50
};
51

52
// Base64 encoded PDF
53
const base64Source: Source = {
54
  uri: "data:application/pdf;base64,JVBERi0xLjQKMSAwIG9iago8PAovVHlwZS..."
55
};
56

57
// Bundled asset (using require)
58
const assetSource = require("./assets/document.pdf");
59

60
// Bundle assets (platform-specific)
61
const iOSBundleSource: Source = {
62
  uri: "bundle-assets://document.pdf" // iOS only
63
};
64

65
const androidBundleSource: Source = {
66
  uri: "bundle-assets://path/to/document.pdf" // Android only
67
};
68

69
// Content URI (Android)
70
const contentUriSource: Source = {
71
  uri: "content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"
72
};
73

74
// Blob URL (Android)
75
const blobSource: Source = {
76
  uri: "blob:xxxxxxxx-...?offset=0&size=xxx"
77
};
78

79
// Windows app bundle
80
const windowsBundleSource: Source = {
81
  uri: "ms-appx:///document.pdf" // Windows UWP only
82
};
83
```
84

85
### Display Configuration
86

87
Configure PDF display properties including initial page, scaling, orientation, and layout.
88

89
```typescript { .api }
90
/**
91
 * Core display properties for PDF rendering
92
 */
93
interface DisplayProps {
94
  /** PDF source configuration */
95
  source: Source | number;
96
  /** Initial page number to display (1-based, default: 1) */
97
  page?: number;
98
  /** Initial scale factor (default: 1.0) */
99
  scale?: number;
100
  /** Minimum allowed scale factor (default: 1.0) */
101
  minScale?: number;
102
  /** Maximum allowed scale factor (default: 3.0) */
103
  maxScale?: number;
104
  /** Enable horizontal scrolling mode (default: false - vertical) */
105
  horizontal?: boolean;
106
  /** Space between pages in pixels (default: 10) */
107
  spacing?: number;
108
  /** Display only single page at a time (default: false) */
109
  singlePage?: boolean;
110
  /** PDF password for encrypted documents */
111
  password?: string;
112
  /** Component style */
113
  style?: ViewStyle;
114
}
115
```
116

117
### Fit Policy Configuration
118

119
Control how PDF pages are initially sized to fit the viewport.
120

121
```typescript { .api }
122
/**
123
 * PDF fit policy configuration
124
 * Controls initial zoom and page sizing behavior
125
 */
126
interface FitPolicyProps {
127
  /** 
128
   * Fit policy for initial page sizing:
129
   * 0 = fit width (page width matches container width)
130
   * 1 = fit height (page height matches container height)  
131
   * 2 = fit both (page fits entirely within container, default)
132
   */
133
  fitPolicy?: 0 | 1 | 2;
134
}
135
```
136

137
**Usage Examples:**
138

139
```typescript
140
// Fit to width - good for text documents
141
<Pdf
142
  source={{ uri: "document.pdf" }}
143
  fitPolicy={0}
144
  style={{ flex: 1 }}
145
/>
146

147
// Fit to height - good for presentations
148
<Pdf
149
  source={{ uri: "slides.pdf" }}
150
  fitPolicy={1}
151
  horizontal={true}
152
  style={{ flex: 1 }}
153
/>
154

155
// Fit both (default) - shows entire page
156
<Pdf
157
  source={{ uri: "document.pdf" }}
158
  fitPolicy={2}
159
  style={{ flex: 1 }}
160
/>
161
```
162

163
### PDF Rendering Settings
164

165
Configure PDF rendering quality and features.
166

167
```typescript { .api }
168
/**
169
 * PDF rendering configuration
170
 * Controls rendering quality and feature support
171
 */
172
interface RenderingProps {
173
  /** Enable antialiasing for smoother text and graphics (default: true) */
174
  enableAntialiasing?: boolean;
175
  /** Enable PDF annotation rendering (default: true) */
176
  enableAnnotationRendering?: boolean;
177
  /** Trust all SSL certificates for HTTPS requests (default: true) */
178
  trustAllCerts?: boolean;
179
}
180
```
181

182
### Asset Source Support
183

184
Support for bundled PDF assets using require().
185

186
```typescript { .api }
187
/**
188
 * Bundled asset support
189
 * Use require() to bundle PDFs with your app
190
 */
191
type AssetSource = number; // Result of require('./path/to/pdf')
192
```
193

194
**Usage Example:**
195

196
```typescript
197
// Bundle PDF with your app
198
const bundledPdf = require("./assets/user-guide.pdf");
199

200
<Pdf
201
  source={bundledPdf}
202
  style={{ flex: 1 }}
203
/>
204
```
205

206
### Advanced Source Configuration
207

208
Advanced networking and caching configuration for network PDFs.
209

210
```typescript { .api }
211
/**
212
 * Advanced network configuration
213
 * For complex authentication and request scenarios
214
 */
215
interface AdvancedSourceConfig {
216
  /** Full source configuration */
217
  source: {
218
    uri: string;
219
    /** Custom HTTP headers */
220
    headers?: {
221
      "Authorization"?: string;
222
      "User-Agent"?: string;
223
      "Content-Type"?: string;
224
      [key: string]: string;
225
    };
226
    /** HTTP method */
227
    method?: "GET" | "POST" | "PUT" | "PATCH";
228
    /** Request body for POST/PUT */
229
    body?: string;
230
    /** Cache configuration */
231
    cache?: boolean;
232
    cacheFileName?: string;
233
    expiration?: number;
234
  };
235
}
236
```
237

238
**Usage Example:**
239

240
```typescript
241
// Complex network configuration
242
<Pdf
243
  source={{
244
    uri: "https://api.example.com/documents/123",
245
    method: "POST",
246
    headers: {
247
      "Authorization": "Bearer " + accessToken,
248
      "Content-Type": "application/json"
249
    },
250
    body: JSON.stringify({ format: "pdf", quality: "high" }),
251
    cache: true,
252
    expiration: 1 // Cache for 1 day
253
  }}
254
  style={{ flex: 1 }}
255
/>
256
```