PDF

The PDF module provides a comprehensive solution for displaying PDF documents within React Native applications. Built on top of react-native-pdf with enhanced loading states, theme integration, and automatic error handling for seamless document viewing experiences.

Overview

The PDF module offers a streamlined approach to PDF document rendering with built-in loading animations, consistent theming, and robust error handling. It supports both local and remote PDF files with smooth transitions and user-friendly loading states.

Key Features

• Seamless PDF Rendering: Built on react-native-pdf for reliable cross-platform document display
• Enhanced Loading States: Animated loading indicators with fade in/out transitions using react-native-reanimated
• Theme Integration: Automatic theme-aware styling with backdrop colors and consistent design
• Error Handling: Built-in error management for network failures and invalid documents
• Flexible Styling: Customizable container and PDF styles for various layout requirements
• Test Coverage: Comprehensive unit tests for reliable component behavior

Architecture

The PDF module follows the SDK's architectural principles:

• Single Component: Focused PDFViewer component for all PDF viewing needs
• Props-based Customization: Style, behavior, and content customization through props
• Theme Integration: Automatic integration with the app's theme system
• Performance Optimized: Efficient rendering with conditional loading states

Basic Example

import { PDFViewer } from "@ovok/native";
import * as React from "react";

const TermsScreen = () => {
  const handleLoadComplete = (pages: number) => {
    console.log(`Terms document has ${pages} pages`);
  };

  return (
    <PDFViewer
      sourceURI="https://s2.q4cdn.com/175719177/files/doc_presentations/Placeholder-PDF.pdf"
      onLoadComplete={handleLoadComplete}
      containerStyle={{ margin: 16 }}
    />
  );
};

export default TermsScreen;

Props

Name	Type	Required	Default	Description
sourceURI	string	✓	-	URI of the PDF document to display
containerStyle	StyleProp<ViewStyle>	-	-	Custom styles for the container view
style	StyleProp<ViewStyle>	-	-	Custom styles for the PDF component
testID	string	-	"pdf-viewer"	Test identifier for the component
onLoadComplete	(numberOfPages: number, path: string, size: {width: number, height: number}, tableContents?: TableContent[]) => void	-	-	Callback when PDF loading completes

Inherits all props from PdfProps except source

Additional Inherited Props

• onError - Error handling callback
• onPageChanged - Page change callback
• onProgress - Loading progress callback
• enablePaging - Enable page-based scrolling
• horizontal - Horizontal scrolling mode
• fitPolicy - PDF fit policy (default: 0)
• spacing - Page spacing
• password - PDF password if required

Component Behavior

Loading States

1. Initial Loading: Shows animated loading indicator with theme-aware backdrop
2. Document Ready: Displays PDF content with fade-in animation
3. Error State: Handles loading failures through error callbacks

Animation System

• Uses react-native-reanimated for smooth fade in/out transitions
• Loading indicator appears immediately when sourceURI is provided
• Content fades in seamlessly when document is ready

Theme Integration

• Automatically applies theme colors for loading backdrop
• Respects app theme for consistent visual experience
• Uses useAppTheme hook for dynamic theming