0
# User Interface
1

2
UI configuration and user interaction capabilities including scroll indicators, activity indicators, touch gestures, and accessibility features. This covers all aspects of how users interact with the PDF viewer.
3

4
## Capabilities
5

6
### Scroll Configuration
7

8
Configure scrolling behavior and visual indicators.
9

10
```typescript { .api }
11
/**
12
 * Scroll configuration options
13
 * Controls scrolling behavior and visual indicators
14
 */
15
interface ScrollProps {
16
  /** Show horizontal scroll indicator (default: true) */
17
  showsHorizontalScrollIndicator?: boolean;
18
  /** Show vertical scroll indicator (default: true) */
19
  showsVerticalScrollIndicator?: boolean;
20
  /** Enable scrolling (default: true) */
21
  scrollEnabled?: boolean;
22
  /** Enable paging mode - snap to page boundaries (default: false) */
23
  enablePaging?: boolean;
24
  /** Enable right-to-left layout for RTL languages (default: false) */
25
  enableRTL?: boolean;
26
}
27
```
28

29
**Usage Examples:**
30

31
```typescript
32
// Hide scroll indicators for clean UI
33
<Pdf
34
  source={{ uri: "document.pdf" }}
35
  showsHorizontalScrollIndicator={false}
36
  showsVerticalScrollIndicator={false}
37
  style={{ flex: 1 }}
38
/>
39

40
// Enable paging mode for magazine-style navigation
41
<Pdf
42
  source={{ uri: "magazine.pdf" }}
43
  enablePaging={true}
44
  horizontal={true}
45
  style={{ flex: 1 }}
46
/>
47

48
// RTL layout for Arabic/Hebrew documents
49
<Pdf
50
  source={{ uri: "arabic-document.pdf" }}
51
  enableRTL={true}
52
  style={{ flex: 1 }}
53
/>
54
```
55

56
### Loading Indicators
57

58
Customize loading progress display during PDF download and processing.
59

60
```typescript { .api }
61
/**
62
 * Loading indicator configuration
63
 * Custom progress display during PDF loading
64
 */
65
interface LoadingProps {
66
  /** 
67
   * Custom activity indicator component
68
   * @param progress - Loading progress from 0 to 1
69
   * @returns React element to display during loading
70
   */
71
  renderActivityIndicator?: (progress: number) => React.ReactElement;
72
  /** Style for progress container */
73
  progressContainerStyle?: ViewStyle;
74
}
75
```
76

77
**Usage Examples:**
78

79
```typescript
80
import { ActivityIndicator, Text, View } from "react-native";
81

82
// Custom loading indicator
83
<Pdf
84
  source={{ uri: "large-document.pdf" }}
85
  renderActivityIndicator={(progress) => (
86
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
87
      <ActivityIndicator size="large" color="#0000ff" />
88
      <Text>{Math.round(progress * 100)}% loaded</Text>
89
    </View>
90
  )}
91
  style={{ flex: 1 }}
92
/>
93

94
// Custom progress container styling
95
<Pdf
96
  source={{ uri: "document.pdf" }}
97
  progressContainerStyle={{
98
    backgroundColor: "rgba(0,0,0,0.5)",
99
    borderRadius: 10,
100
    padding: 20
101
  }}
102
  style={{ flex: 1 }}
103
/>
104
```
105

106
### Zoom and Gesture Configuration
107

108
Configure zoom behavior and touch gesture responses.
109

110
```typescript { .api }
111
/**
112
 * Zoom and gesture configuration
113
 * Controls user interaction with zoom and touch gestures
114
 */
115
interface GestureProps {
116
  /** Enable double-tap to zoom (default: platform dependent) */
117
  enableDoubleTapZoom?: boolean;
118
  /** Initial scale factor (default: 1.0) */
119
  scale?: number;
120
  /** Minimum zoom scale (default: 1.0) */
121
  minScale?: number;
122
  /** Maximum zoom scale (default: 3.0) */
123
  maxScale?: number;
124
}
125
```
126

127
**Usage Examples:**
128

129
```typescript
130
// Disable double-tap zoom for better custom gesture handling
131
<Pdf
132
  source={{ uri: "document.pdf" }}
133
  enableDoubleTapZoom={false}
134
  onPageSingleTap={(page, x, y) => {
135
    console.log(`Tapped page ${page} at (${x}, ${y})`);
136
  }}
137
  style={{ flex: 1 }}
138
/>
139

140
// Wide zoom range for detailed documents
141
<Pdf
142
  source={{ uri: "technical-drawing.pdf" }}
143
  minScale={0.5}
144
  maxScale={10.0}
145
  style={{ flex: 1 }}
146
/>
147
```
148

149
### Rendering Quality
150

151
Configure rendering quality and visual enhancements.
152

153
```typescript { .api }
154
/**
155
 * Rendering quality configuration
156
 * Visual enhancement and rendering options
157
 */
158
interface QualityProps {
159
  /** Enable antialiasing for smoother text and graphics (default: true) */
160
  enableAntialiasing?: boolean;
161
  /** Enable PDF annotation rendering - forms, highlights, etc. (default: true) */
162
  enableAnnotationRendering?: boolean;
163
}
164
```
165

166
**Usage Examples:**
167

168
```typescript
169
// Disable antialiasing for performance on older devices
170
<Pdf
171
  source={{ uri: "large-document.pdf" }}
172
  enableAntialiasing={false}
173
  style={{ flex: 1 }}
174
/>
175

176
// Disable annotations for print-focused viewing
177
<Pdf
178
  source={{ uri: "form-document.pdf" }}
179
  enableAnnotationRendering={false}
180
  style={{ flex: 1 }}
181
/>
182
```
183

184
### Accessibility Configuration
185

186
Standard React Native accessibility props for screen readers and assistive technologies.
187

188
```typescript { .api }
189
/**
190
 * Accessibility configuration
191
 * Standard React Native accessibility support
192
 */
193
interface AccessibilityProps {
194
  /** Accessibility label for screen readers */
195
  accessibilityLabel?: string;
196
  /** Control accessibility focus */
197
  importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants";
198
  /** Test identifier for automated testing */
199
  testID?: string;
200
  /** Accessibility live region for dynamic content */
201
  accessibilityLiveRegion?: "none" | "polite" | "assertive";
202
  /** Accessibility component type (legacy) */
203
  accessibilityComponentType?: string;
204
}
205
```
206

207
**Usage Example:**
208

209
```typescript
210
<Pdf
211
  source={{ uri: "accessible-document.pdf" }}
212
  accessibilityLabel="PDF document viewer"
213
  testID="pdf-viewer"
214
  importantForAccessibility="yes"
215
  style={{ flex: 1 }}
216
/>
217
```
218

219
### Layout and Styling
220

221
Control PDF layout and visual presentation.
222

223
```typescript { .api }
224
/**
225
 * Layout and styling configuration
226
 * Visual presentation and layout options
227
 */
228
interface LayoutProps {
229
  /** Component style (standard React Native ViewStyle) */
230
  style?: ViewStyle;
231
  /** Enable horizontal layout mode (default: false - vertical) */
232
  horizontal?: boolean;
233
  /** Space between pages in pixels (default: 10) */
234
  spacing?: number;
235
  /** Display single page at a time (default: false) */
236
  singlePage?: boolean;
237
}
238
```
239

240
**Usage Examples:**
241

242
```typescript
243
// Horizontal magazine-style layout
244
<Pdf
245
  source={{ uri: "magazine.pdf" }}
246
  horizontal={true}
247
  spacing={20}
248
  enablePaging={true}
249
  style={{
250
    flex: 1,
251
    backgroundColor: "#f0f0f0"
252
  }}
253
/>
254

255
// Single page presentation mode
256
<Pdf
257
  source={{ uri: "presentation.pdf" }}
258
  singlePage={true}
259
  style={{
260
    flex: 1,
261
    backgroundColor: "black"
262
  }}
263
/>
264

265
// Tight layout with minimal spacing
266
<Pdf
267
  source={{ uri: "document.pdf" }}
268
  spacing={5}
269
  style={{
270
    flex: 1,
271
    borderWidth: 1,
272
    borderColor: "#ccc",
273
    borderRadius: 8
274
  }}
275
/>
276
```
277

278
### Accessibility Configuration
279

280
Standard React Native accessibility props for screen readers and assistive technologies.
281

282
```typescript { .api }
283
/**
284
 * Accessibility configuration
285
 * Standard React Native accessibility support
286
 */
287
interface AccessibilityProps {
288
  /** Accessibility label for screen readers */
289
  accessibilityLabel?: string;
290
  /** Control accessibility focus */
291
  importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants";
292
  /** Test identifier for automated testing */
293
  testID?: string;
294
  /** Accessibility live region for dynamic content */
295
  accessibilityLiveRegion?: "none" | "polite" | "assertive";
296
  /** Accessibility component type (legacy) */
297
  accessibilityComponentType?: string;
298
  /** Android hardware texture rendering (legacy compatibility) */
299
  renderToHardwareTextureAndroid?: string;
300
  /** Layout callback (legacy compatibility) */
301
  onLayout?: boolean;
302
}
303
```
304

305
**Usage Example:**
306

307
```typescript
308
<Pdf
309
  source={{ uri: "accessible-document.pdf" }}
310
  accessibilityLabel="PDF document viewer"
311
  testID="pdf-viewer"
312
  importantForAccessibility="yes"
313
  style={{ flex: 1 }}
314
/>
315
```
316

317
### Platform-Specific Configuration
318

319
Platform-specific rendering and behavior options.
320

321
```typescript { .api }
322
/**
323
 * Platform-specific configuration
324
 * iOS and Android specific rendering options
325
 */
326
interface PlatformProps {
327
  /** Use PDFKit for PDF rendering on iOS (default: true, iOS only) */
328
  usePDFKit?: boolean;
329
}
330
```
331

332
**Usage Example:**
333

334
```typescript
335
// Use legacy PDF rendering on iOS instead of PDFKit
336
<Pdf
337
  source={{ uri: "document.pdf" }}
338
  usePDFKit={false}  // iOS only
339
  style={{ flex: 1 }}
340
/>
341
```
342

343
### Network Security
344

345
Security-related configuration for network requests.
346

347
```typescript { .api }
348
/**
349
 * Network security configuration
350
 * Security settings for HTTPS and network requests
351
 */
352
interface SecurityProps {
353
  /** Trust all SSL certificates, including self-signed (default: true) */
354
  trustAllCerts?: boolean;
355
}
356
```
357

358
**Usage Example:**
359

360
```typescript
361
// Strict SSL certificate validation for production
362
<Pdf
363
  source={{
364
    uri: "https://secure-api.example.com/document.pdf",
365
    headers: { "Authorization": "Bearer " + token }
366
  }}
367
  trustAllCerts={false}
368
  style={{ flex: 1 }}
369
/>
370
```