User Interface

/**
 * Scroll configuration options
 * Controls scrolling behavior and visual indicators
 */
interface ScrollProps {
  /** Show horizontal scroll indicator (default: true) */
  showsHorizontalScrollIndicator?: boolean;
  /** Show vertical scroll indicator (default: true) */
  showsVerticalScrollIndicator?: boolean;
  /** Enable scrolling (default: true) */
  scrollEnabled?: boolean;
  /** Enable paging mode - snap to page boundaries (default: false) */
  enablePaging?: boolean;
  /** Enable right-to-left layout for RTL languages (default: false) */
  enableRTL?: boolean;
}

// Hide scroll indicators for clean UI
<Pdf
  source={{ uri: "document.pdf" }}
  showsHorizontalScrollIndicator={false}
  showsVerticalScrollIndicator={false}
  style={{ flex: 1 }}
/>

// Enable paging mode for magazine-style navigation
<Pdf
  source={{ uri: "magazine.pdf" }}
  enablePaging={true}
  horizontal={true}
  style={{ flex: 1 }}
/>

// RTL layout for Arabic/Hebrew documents
<Pdf
  source={{ uri: "arabic-document.pdf" }}
  enableRTL={true}
  style={{ flex: 1 }}
/>

/**
 * Loading indicator configuration
 * Custom progress display during PDF loading
 */
interface LoadingProps {
  /** 
   * Custom activity indicator component
   * @param progress - Loading progress from 0 to 1
   * @returns React element to display during loading
   */
  renderActivityIndicator?: (progress: number) => React.ReactElement;
  /** Style for progress container */
  progressContainerStyle?: ViewStyle;
}

import { ActivityIndicator, Text, View } from "react-native";

// Custom loading indicator
<Pdf
  source={{ uri: "large-document.pdf" }}
  renderActivityIndicator={(progress) => (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <ActivityIndicator size="large" color="#0000ff" />
      <Text>{Math.round(progress * 100)}% loaded</Text>
    </View>
  )}
  style={{ flex: 1 }}
/>

// Custom progress container styling
<Pdf
  source={{ uri: "document.pdf" }}
  progressContainerStyle={{
    backgroundColor: "rgba(0,0,0,0.5)",
    borderRadius: 10,
    padding: 20
  }}
  style={{ flex: 1 }}
/>

/**
 * Zoom and gesture configuration
 * Controls user interaction with zoom and touch gestures
 */
interface GestureProps {
  /** Enable double-tap to zoom (default: platform dependent) */
  enableDoubleTapZoom?: boolean;
  /** Initial scale factor (default: 1.0) */
  scale?: number;
  /** Minimum zoom scale (default: 1.0) */
  minScale?: number;
  /** Maximum zoom scale (default: 3.0) */
  maxScale?: number;
}

// Disable double-tap zoom for better custom gesture handling
<Pdf
  source={{ uri: "document.pdf" }}
  enableDoubleTapZoom={false}
  onPageSingleTap={(page, x, y) => {
    console.log(`Tapped page ${page} at (${x}, ${y})`);
  }}
  style={{ flex: 1 }}
/>

// Wide zoom range for detailed documents
<Pdf
  source={{ uri: "technical-drawing.pdf" }}
  minScale={0.5}
  maxScale={10.0}
  style={{ flex: 1 }}
/>

/**
 * Rendering quality configuration
 * Visual enhancement and rendering options
 */
interface QualityProps {
  /** Enable antialiasing for smoother text and graphics (default: true) */
  enableAntialiasing?: boolean;
  /** Enable PDF annotation rendering - forms, highlights, etc. (default: true) */
  enableAnnotationRendering?: boolean;
}

// Disable antialiasing for performance on older devices
<Pdf
  source={{ uri: "large-document.pdf" }}
  enableAntialiasing={false}
  style={{ flex: 1 }}
/>

// Disable annotations for print-focused viewing
<Pdf
  source={{ uri: "form-document.pdf" }}
  enableAnnotationRendering={false}
  style={{ flex: 1 }}
/>

/**
 * Accessibility configuration
 * Standard React Native accessibility support
 */
interface AccessibilityProps {
  /** Accessibility label for screen readers */
  accessibilityLabel?: string;
  /** Control accessibility focus */
  importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants";
  /** Test identifier for automated testing */
  testID?: string;
  /** Accessibility live region for dynamic content */
  accessibilityLiveRegion?: "none" | "polite" | "assertive";
  /** Accessibility component type (legacy) */
  accessibilityComponentType?: string;
}

<Pdf
  source={{ uri: "accessible-document.pdf" }}
  accessibilityLabel="PDF document viewer"
  testID="pdf-viewer"
  importantForAccessibility="yes"
  style={{ flex: 1 }}
/>

/**
 * Layout and styling configuration
 * Visual presentation and layout options
 */
interface LayoutProps {
  /** Component style (standard React Native ViewStyle) */
  style?: ViewStyle;
  /** Enable horizontal layout mode (default: false - vertical) */
  horizontal?: boolean;
  /** Space between pages in pixels (default: 10) */
  spacing?: number;
  /** Display single page at a time (default: false) */
  singlePage?: boolean;
}

// Horizontal magazine-style layout
<Pdf
  source={{ uri: "magazine.pdf" }}
  horizontal={true}
  spacing={20}
  enablePaging={true}
  style={{
    flex: 1,
    backgroundColor: "#f0f0f0"
  }}
/>

// Single page presentation mode
<Pdf
  source={{ uri: "presentation.pdf" }}
  singlePage={true}
  style={{
    flex: 1,
    backgroundColor: "black"
  }}
/>

// Tight layout with minimal spacing
<Pdf
  source={{ uri: "document.pdf" }}
  spacing={5}
  style={{
    flex: 1,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 8
  }}
/>

/**
 * Accessibility configuration
 * Standard React Native accessibility support
 */
interface AccessibilityProps {
  /** Accessibility label for screen readers */
  accessibilityLabel?: string;
  /** Control accessibility focus */
  importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants";
  /** Test identifier for automated testing */
  testID?: string;
  /** Accessibility live region for dynamic content */
  accessibilityLiveRegion?: "none" | "polite" | "assertive";
  /** Accessibility component type (legacy) */
  accessibilityComponentType?: string;
  /** Android hardware texture rendering (legacy compatibility) */
  renderToHardwareTextureAndroid?: string;
  /** Layout callback (legacy compatibility) */
  onLayout?: boolean;
}

<Pdf
  source={{ uri: "accessible-document.pdf" }}
  accessibilityLabel="PDF document viewer"
  testID="pdf-viewer"
  importantForAccessibility="yes"
  style={{ flex: 1 }}
/>

/**
 * Platform-specific configuration
 * iOS and Android specific rendering options
 */
interface PlatformProps {
  /** Use PDFKit for PDF rendering on iOS (default: true, iOS only) */
  usePDFKit?: boolean;
}

// Use legacy PDF rendering on iOS instead of PDFKit
<Pdf
  source={{ uri: "document.pdf" }}
  usePDFKit={false}  // iOS only
  style={{ flex: 1 }}
/>

/**
 * Network security configuration
 * Security settings for HTTPS and network requests
 */
interface SecurityProps {
  /** Trust all SSL certificates, including self-signed (default: true) */
  trustAllCerts?: boolean;
}

// Strict SSL certificate validation for production
<Pdf
  source={{
    uri: "https://secure-api.example.com/document.pdf",
    headers: { "Authorization": "Bearer " + token }
  }}
  trustAllCerts={false}
  style={{ flex: 1 }}
/>