react-native-optimized-pdf 1.0.0

package/src/components/PdfNavigationControls.tsx

@@ -0,0 +1,123 @@
+import React, { useState, useEffect } from 'react';
+const { View, Text, TouchableOpacity, TextInput, StyleSheet } = require('react-native');
+import type { PdfNavigationControlsProps } from '../types';
+
+/**
+ * Navigation controls for PDF pages
+ * Provides previous/next buttons and page number input
+ */
+export const PdfNavigationControls: React.FC<PdfNavigationControlsProps> = ({
+  currentPage,
+  totalPages,
+  onNextPage,
+  onPrevPage,
+  onPageChange,
+  style,
+}) => {
+  const [inputPage, setInputPage] = useState((currentPage + 1).toString());
+
+  useEffect(() => {
+    setInputPage((currentPage + 1).toString());
+  }, [currentPage]);
+
+  const handleChangePageInput = (text: string) => {
+    setInputPage(text);
+  };
+
+  const handleEndEditingPageInput = () => {
+    const pageNumber = parseInt(inputPage, 10);
+    if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= totalPages) {
+      onPageChange(pageNumber - 1);
+    } else {
+      // Reset to current page if invalid
+      setInputPage((currentPage + 1).toString());
+    }
+  };
+
+  const isFirstPage = currentPage === 0;
+  const isLastPage = currentPage === totalPages - 1;
+
+  return (
+    <View style={[styles.container, style]}>
+      <TouchableOpacity
+        onPress={onPrevPage}
+        disabled={isFirstPage}
+        style={[styles.navButton, isFirstPage && styles.disabledButton]}
+        accessibilityLabel="Previous page"
+        accessibilityRole="button"
+      >
+        <Text style={styles.navButtonText}>{'<'}</Text>
+      </TouchableOpacity>
+
+      <TextInput
+        style={styles.pageInput}
+        value={inputPage}
+        keyboardType="number-pad"
+        returnKeyType="done"
+        onChangeText={handleChangePageInput}
+        onEndEditing={handleEndEditingPageInput}
+        accessibilityLabel={`Current page: ${currentPage + 1} of ${totalPages}`}
+      />
+
+      <Text style={styles.pageInfo}>/ {totalPages}</Text>
+
+      <TouchableOpacity
+        onPress={onNextPage}
+        disabled={isLastPage}
+        style={[styles.navButton, isLastPage && styles.disabledButton]}
+        accessibilityLabel="Next page"
+        accessibilityRole="button"
+      >
+        <Text style={styles.navButtonText}>{'>'}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 20,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  navButton: {
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    padding: 10,
+    marginHorizontal: 20,
+    borderRadius: 8,
+    minWidth: 44,
+    minHeight: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  navButtonText: {
+    color: '#fff',
+    fontSize: 20,
+    fontWeight: '600',
+  },
+  disabledButton: {
+    opacity: 0.4,
+  },
+  pageInfo: {
+    color: '#000',
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  pageInput: {
+    width: 50,
+    height: 40,
+    borderWidth: 1,
+    borderColor: '#000',
+    borderRadius: 5,
+    textAlign: 'center',
+    color: '#000',
+    marginHorizontal: 10,
+    backgroundColor: '#fff',
+    fontWeight: 'bold',
+    fontSize: 16,
+  },
+});

package/src/components/PdfOverlays.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+const { View, Text, ActivityIndicator, StyleSheet } = require('react-native');
+import type { PdfLoadingOverlayProps, PdfErrorOverlayProps } from '../types';
+
+/**
+ * Loading overlay with progress indicator
+ */
+export const PdfLoadingOverlay: React.FC<PdfLoadingOverlayProps> = ({ progress, style }) => {
+  return (
+    <View style={[styles.container, style]}>
+      <ActivityIndicator size="large" color="#fff" />
+      <Text style={styles.progressText}>{progress}%</Text>
+    </View>
+  );
+};
+
+/**
+ * Error overlay for displaying error messages
+ */
+export const PdfErrorOverlay: React.FC<PdfErrorOverlayProps> = ({ error, style }) => {
+  return (
+    <View style={[styles.container, style]}>
+      <Text style={styles.errorText}>{error}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  progressText: {
+    color: '#fff',
+    marginTop: 10,
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  errorText: {
+    color: '#d32f2f',
+    fontSize: 16,
+    textAlign: 'center',
+  },
+});

package/src/constants.ts

@@ -0,0 +1,13 @@
+/**
+ * Default values and constants for the PDF viewer
+ */
+
+export const DEFAULT_MAXIMUM_ZOOM = 3;
+export const DEFAULT_ENABLE_ANTIALIASING = true;
+export const DEFAULT_SHOW_NAVIGATION_CONTROLS = true;
+
+export const ERROR_MESSAGES = {
+  DOWNLOAD_FAILED: 'Failed to download PDF',
+  LOAD_FAILED: 'Failed to load PDF',
+  INVALID_SOURCE: 'Invalid PDF source',
+} as const;

package/src/index.ts

@@ -0,0 +1,5 @@
+export { default } from './OptimizedPdfView';
+export { PdfCacheService } from './services/pdfCache';
+export { PdfNavigationControls } from './components/PdfNavigationControls';
+export { PdfLoadingOverlay, PdfErrorOverlay } from './components/PdfOverlays';
+export * from './types';

package/src/services/pdfCache.ts

@@ -0,0 +1,113 @@
+import RNFS from 'react-native-fs';
+import md5 from 'crypto-js/md5';
+import type { PdfSource } from '../types';
+
+/**
+ * Service for handling PDF caching and downloads
+ */
+export class PdfCacheService {
+  /**
+   * Get the local file path for a cached PDF
+   */
+  static getCacheFilePath(source: PdfSource): string {
+    const fileName = source.cacheFileName || `${md5(source.uri).toString()}.pdf`;
+    return `${RNFS.CachesDirectoryPath}/${fileName}`;
+  }
+
+  /**
+   * Check if a cached PDF exists and is still valid
+   */
+  static async isCacheValid(source: PdfSource): Promise<boolean> {
+    const localPath = this.getCacheFilePath(source);
+    const exists = await RNFS.exists(localPath);
+
+    if (!exists) {
+      return false;
+    }
+
+    // If expiration is not set, cache is always valid
+    if (!source.expiration || source.expiration <= 0) {
+      return true;
+    }
+
+    // Check if cache has expired
+    const stat = await RNFS.stat(localPath);
+    const now = Date.now() / 1000;
+    return now - stat.mtime < source.expiration;
+  }
+
+  /**
+   * Download a PDF file and cache it locally
+   * @param source PDF source configuration
+   * @param onProgress Optional callback for download progress
+   * @returns Local file path
+   */
+  static async downloadPdf(
+    source: PdfSource,
+    onProgress?: (percent: number) => void,
+  ): Promise<string> {
+    const localPath = this.getCacheFilePath(source);
+
+    // Check if we can use cached version
+    if (source.cache !== false && (await this.isCacheValid(source))) {
+      return localPath;
+    }
+
+    // Download the file
+    const { promise } = RNFS.downloadFile({
+      fromUrl: source.uri,
+      toFile: localPath,
+      background: false,
+      headers: source.headers,
+      progressDivider: 1,
+      progress: (res) => {
+        if (res.contentLength > 0 && onProgress) {
+          const percent = Math.floor((res.bytesWritten / res.contentLength) * 100);
+          onProgress(percent);
+        }
+      },
+      begin: () => {
+        // This callback is required for progress to update properly
+      },
+    });
+
+    await promise;
+    return localPath;
+  }
+
+  /**
+   * Clear a specific cached PDF
+   */
+  static async clearCache(source: PdfSource): Promise<void> {
+    const localPath = this.getCacheFilePath(source);
+    const exists = await RNFS.exists(localPath);
+    if (exists) {
+      await RNFS.unlink(localPath);
+    }
+  }
+
+  /**
+   * Clear all cached PDFs
+   */
+  static async clearAllCache(): Promise<void> {
+    const files = await RNFS.readDir(RNFS.CachesDirectoryPath);
+    const pdfFiles = files.filter((file) => file.name.endsWith('.pdf'));
+    await Promise.all(pdfFiles.map((file) => RNFS.unlink(file.path)));
+  }
+
+  /**
+   * Get total size of cached PDFs in bytes
+   */
+  static async getCacheSize(): Promise<number> {
+    const files = await RNFS.readDir(RNFS.CachesDirectoryPath);
+    const pdfFiles = files.filter((file) => file.name.endsWith('.pdf'));
+    return pdfFiles.reduce((total, file) => total + file.size, 0);
+  }
+
+  /**
+   * Ensure the file path has the file:// protocol
+   */
+  static normalizeFilePath(path: string): string {
+    return path.startsWith('file://') ? path : `file://${path}`;
+  }
+}

package/src/types/index.ts

@@ -0,0 +1,112 @@
+import { ViewStyle } from 'react-native';
+
+/**
+ * Configuration for PDF source
+ */
+export interface PdfSource {
+  /** URI of the PDF file (remote URL or local file path) */
+  uri: string;
+  /** Whether to cache the PDF file locally. Default: true */
+  cache?: boolean;
+  /** Custom filename for the cached file. If not provided, uses MD5 hash of URI */
+  cacheFileName?: string;
+  /** Cache expiration time in seconds. If not set, cache never expires */
+  expiration?: number;
+  /** HTTP method for download. Default: 'GET' */
+  method?: string;
+  /** HTTP headers for download request */
+  headers?: Record<string, string>;
+}
+
+/**
+ * Page dimensions returned by onLoadComplete event
+ */
+export interface PdfPageDimensions {
+  width: number;
+  height: number;
+}
+
+/**
+ * Error event from native module
+ */
+export interface PdfErrorEvent {
+  nativeEvent: {
+    message: string;
+  };
+}
+
+/**
+ * Props for OptimizedPdfView component
+ */
+export interface OptimizedPdfViewProps {
+  /** PDF source configuration */
+  source: PdfSource;
+  /** Password for encrypted PDF files */
+  password?: string;
+  /** Maximum zoom level. Default: 3 */
+  maximumZoom?: number;
+  /** Enable antialiasing for better rendering quality. Default: true */
+  enableAntialiasing?: boolean;
+  /** Show built-in navigation controls. Default: true */
+  showNavigationControls?: boolean;
+  /** Custom style for the container */
+  style?: ViewStyle;
+  /** Callback when PDF is loaded successfully */
+  onLoadComplete?: (currentPage: number, dimensions: PdfPageDimensions) => void;
+  /** Callback when an error occurs */
+  onError?: (error: PdfErrorEvent) => void;
+  /** Callback when page count is available */
+  onPageCount?: (numberOfPages: number) => void;
+  /** Callback when page changes */
+  onPageChange?: (currentPage: number) => void;
+  /** Callback when PDF requires a password */
+  onPasswordRequired?: () => void;
+}
+
+/**
+ * Native event for load complete
+ */
+export interface NativeLoadCompleteEvent {
+  nativeEvent: {
+    currentPage: number;
+    width: number;
+    height: number;
+  };
+}
+
+/**
+ * Native event for page count
+ */
+export interface NativePageCountEvent {
+  nativeEvent: {
+    numberOfPages: number;
+  };
+}
+
+/**
+ * Props for navigation controls component
+ */
+export interface PdfNavigationControlsProps {
+  currentPage: number;
+  totalPages: number;
+  onNextPage: () => void;
+  onPrevPage: () => void;
+  onPageChange: (page: number) => void;
+  style?: ViewStyle;
+}
+
+/**
+ * Props for loading overlay component
+ */
+export interface PdfLoadingOverlayProps {
+  progress: number;
+  style?: ViewStyle;
+}
+
+/**
+ * Props for error overlay component
+ */
+export interface PdfErrorOverlayProps {
+  error: string;
+  style?: ViewStyle;
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "commonjs",
+    "lib": ["es6"],
+    "allowJs": true,
+    "jsx": "react-native",
+    "noEmit": true,
+    "isolatedModules": true,
+    "strict": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "exclude": ["node_modules", "**/__tests__/**"]
+}