react-native-pdf-jsi 1.0.3 → 2.0.0

package/src/examples/PDFJSIExample.js

@@ -1,21 +1,118 @@
 /**
- * Copyright (c) 2025-present, Punith M (punithm300@gmail.com)
- * Enhanced PDF JSI Example Usage
+ * Copyright (c) 2025-present, Enhanced PDF JSI Example
  * All rights reserved.
  * 
- * Example demonstrating how to use the enhanced PDF JSI components
+ * Comprehensive example showing how to use the Enhanced PDF JSI functionality
+ * Demonstrates both basic usage and advanced performance features
  */
 
-import React, { useState, useRef } from 'react';
-import { View, Text, Button, StyleSheet, Alert, ScrollView } from 'react-native';
-import { usePDFJSI, EnhancedPdfView, EnhancedPdfUtils } from '../index';
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    StyleSheet,
+    Alert,
+    ScrollView,
+    TextInput,
+    Platform
+} from 'react-native';
 
-const PDFJSIExample = () => {
-    const pdfRef = useRef(null);
-    const [jsiStats, setJsiStats] = useState(null);
-    const [performanceHistory, setPerformanceHistory] = useState([]);
+// Import JSI functionality
+import {
+    PDFJSI,
+    EnhancedPdfView,
+    usePDFJSI,
+    EnhancedPdfUtils
+} from '../index';
+
+/**
+ * Basic JSI Usage Example
+ */
+export const BasicJSIExample = () => {
+    const [isJSIAvailable, setIsJSIAvailable] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [result, setResult] = useState(null);
+    
+    useEffect(() => {
+        checkJSIAvailability();
+    }, []);
+    
+    const checkJSIAvailability = async () => {
+        try {
+            const available = await PDFJSI.checkJSIAvailability();
+            setIsJSIAvailable(available);
+        } catch (error) {
+            console.error('Error checking JSI availability:', error);
+        }
+    };
+    
+    const testJSI = async () => {
+        setLoading(true);
+        try {
+            const pdfId = 'test_pdf_123';
+            const pageNumber = 1;
+            const scale = 2.0;
+            const base64Data = 'dGVzdF9wZGY='; // Mock base64 data
+            
+            const renderResult = await PDFJSI.renderPageDirect(pdfId, pageNumber, scale, base64Data);
+            setResult(renderResult);
+            
+            Alert.alert('JSI Test', `Render result: ${renderResult.success ? 'Success' : 'Failed'}`);
+        } catch (error) {
+            Alert.alert('JSI Test Error', error.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+    
+    const getStats = async () => {
+        try {
+            const stats = await PDFJSI.getJSIStats();
+            Alert.alert('JSI Stats', JSON.stringify(stats, null, 2));
+        } catch (error) {
+            Alert.alert('Error', error.message);
+        }
+    };
     
-    // Initialize JSI hook
+    return (
+        <View style={styles.container}>
+            <Text style={styles.title}>Basic JSI Example</Text>
+            
+            <View style={styles.statusContainer}>
+                <Text style={styles.statusText}>
+                    JSI Status: {isJSIAvailable ? '✅ Available' : '❌ Not Available'}
+                </Text>
+                <Text style={styles.statusText}>
+                    Platform: {Platform.OS}
+                </Text>
+            </View>
+            
+            <TouchableOpacity style={styles.button} onPress={testJSI} disabled={loading}>
+                <Text style={styles.buttonText}>
+                    {loading ? 'Testing...' : 'Test JSI Render'}
+                </Text>
+            </TouchableOpacity>
+            
+            <TouchableOpacity style={styles.button} onPress={getStats}>
+                <Text style={styles.buttonText}>Get JSI Stats</Text>
+            </TouchableOpacity>
+            
+            {result && (
+                <View style={styles.resultContainer}>
+                    <Text style={styles.resultText}>
+                        Result: {JSON.stringify(result, null, 2)}
+                    </Text>
+                </View>
+            )}
+        </View>
+    );
+};
+
+/**
+ * Hook-based JSI Usage Example
+ */
+export const HookJSIExample = () => {
     const {
         isJSIAvailable,
         isInitialized,
@@ -23,274 +120,445 @@ const PDFJSIExample = () => {
         getPageMetrics,
         preloadPages,
         searchText,
-        getCacheMetrics,
-        clearCache,
-        optimizeMemory,
-        setRenderQuality,
-        updatePerformanceMetrics,
         getPerformanceHistory,
-        createPDFInstance
+        clearPerformanceHistory,
+        createPDFInstance,
+        getPDFInstances,
+        lazyLoadPages,
+        progressiveLoadPages,
+        smartCacheFrequentPages
     } = usePDFJSI({
         autoInitialize: true,
-        enablePerformanceTracking: true,
-        enableCaching: true
+        enablePerformanceTracking: true
     });
-
-    const handleCheckJSI = async () => {
-        try {
-            const stats = await EnhancedPdfUtils.getPerformanceBenchmark();
-            setJsiStats(stats);
-            Alert.alert('JSI Status', `Available: ${stats.jsiAvailable}\nLevel: ${stats.performanceLevel}`);
-        } catch (error) {
-            Alert.alert('Error', 'Failed to get JSI stats');
+    
+    const [pdfId, setPdfId] = useState('hook_test_pdf');
+    const [pageNumber, setPageNumber] = useState(1);
+    const [scale, setScale] = useState(2.0);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [performanceData, setPerformanceData] = useState([]);
+    
+    useEffect(() => {
+        if (isInitialized && isJSIAvailable) {
+            createPDFInstance(pdfId);
         }
-    };
-
-    const handleRenderPage = async () => {
+    }, [isInitialized, isJSIAvailable, pdfId, createPDFInstance]);
+    
+    const handleRenderPage = useCallback(async () => {
         try {
-            const pdfId = 'example_pdf';
-            const result = await renderPage(pdfId, 1, 1.5, 'base64data');
-            Alert.alert('Success', `Page rendered: ${JSON.stringify(result)}`);
+            const base64Data = 'dGVzdF9wZGY='; // Mock data
+            const result = await renderPage(pdfId, pageNumber, scale, base64Data);
+            
+            Alert.alert('Hook JSI', `Page rendered: ${result.success ? 'Success' : 'Failed'}`);
         } catch (error) {
-            Alert.alert('Error', `Render failed: ${error.message}`);
+            Alert.alert('Error', error.message);
         }
-    };
-
-    const handleGetMetrics = async () => {
+    }, [pdfId, pageNumber, scale, renderPage]);
+    
+    const handleGetMetrics = useCallback(async () => {
         try {
-            const pdfId = 'example_pdf';
-            const metrics = await getPageMetrics(pdfId, 1);
+            const metrics = await getPageMetrics(pdfId, pageNumber);
             Alert.alert('Page Metrics', JSON.stringify(metrics, null, 2));
         } catch (error) {
-            Alert.alert('Error', `Failed to get metrics: ${error.message}`);
+            Alert.alert('Error', error.message);
         }
-    };
-
-    const handlePreloadPages = async () => {
+    }, [pdfId, pageNumber, getPageMetrics]);
+    
+    const handlePreloadPages = useCallback(async () => {
         try {
-            const pdfId = 'example_pdf';
             const success = await preloadPages(pdfId, 1, 5);
-            Alert.alert('Preload', `Success: ${success}`);
+            Alert.alert('Preload', `Preloaded pages: ${success ? 'Success' : 'Failed'}`);
         } catch (error) {
-            Alert.alert('Error', `Preload failed: ${error.message}`);
+            Alert.alert('Error', error.message);
         }
-    };
-
-    const handleSearchText = async () => {
+    }, [pdfId, preloadPages]);
+    
+    const handleLazyLoad = useCallback(async () => {
         try {
-            const pdfId = 'example_pdf';
-            const results = await searchText(pdfId, 'example', 1, 10);
-            Alert.alert('Search Results', `Found ${results.length} matches`);
+            const result = await lazyLoadPages(pdfId, pageNumber, 3, 100);
+            Alert.alert('Lazy Load', `Lazy loaded pages: ${result.success ? 'Success' : 'Failed'}`);
         } catch (error) {
-            Alert.alert('Error', `Search failed: ${error.message}`);
+            Alert.alert('Error', error.message);
         }
-    };
-
-    const handleClearCache = async () => {
+    }, [pdfId, pageNumber, lazyLoadPages]);
+    
+    const handleProgressiveLoad = useCallback(async () => {
         try {
-            const pdfId = 'example_pdf';
-            const success = await clearCache(pdfId, 'all');
-            Alert.alert('Cache', `Cleared: ${success}`);
+            const result = await progressiveLoadPages(pdfId, 1, 5, (progress) => {
+                console.log(`Loading batch ${progress.batchStartPage}-${progress.batchEndPage}`);
+            });
+            Alert.alert('Progressive Load', `Loaded ${result.totalLoaded} pages`);
         } catch (error) {
-            Alert.alert('Error', `Clear cache failed: ${error.message}`);
+            Alert.alert('Error', error.message);
         }
-    };
-
-    const handleOptimizeMemory = async () => {
+    }, [pdfId, progressiveLoadPages]);
+    
+    const handleSmartCache = useCallback(async () => {
         try {
-            const pdfId = 'example_pdf';
-            const success = await optimizeMemory(pdfId);
-            Alert.alert('Memory', `Optimized: ${success}`);
+            const result = await smartCacheFrequentPages(pdfId, [1, 2, 10, 50]);
+            Alert.alert('Smart Cache', `Cached ${result.successfulCaches} pages`);
         } catch (error) {
-            Alert.alert('Error', `Memory optimization failed: ${error.message}`);
+            Alert.alert('Error', error.message);
         }
-    };
-
-    const handleSetQuality = async () => {
+    }, [pdfId, smartCacheFrequentPages]);
+    
+    const handleSearch = useCallback(async () => {
+        if (!searchTerm.trim()) {
+            Alert.alert('Error', 'Please enter a search term');
+            return;
+        }
+        
         try {
-            const pdfId = 'example_pdf';
-            const success = await setRenderQuality(pdfId, 3);
-            Alert.alert('Quality', `Set to high: ${success}`);
+            const results = await searchText(pdfId, searchTerm, 1, 10);
+            Alert.alert('Search Results', `Found ${results.length} matches`);
         } catch (error) {
-            Alert.alert('Error', `Set quality failed: ${error.message}`);
+            Alert.alert('Error', error.message);
         }
-    };
-
-    const handleGetPerformanceHistory = () => {
+    }, [pdfId, searchTerm, searchText]);
+    
+    const updatePerformanceData = useCallback(() => {
         const history = getPerformanceHistory();
-        setPerformanceHistory(history);
-        Alert.alert('Performance History', `${history.length} operations recorded`);
-    };
-
-    const handleCreateInstance = () => {
-        const instance = createPDFInstance('example_pdf', { quality: 2 });
-        Alert.alert('Instance Created', `ID: ${instance.id}`);
-    };
-
+        setPerformanceData(history);
+    }, [getPerformanceHistory]);
+    
+    const clearPerformance = useCallback(() => {
+        clearPerformanceHistory();
+        setPerformanceData([]);
+        Alert.alert('Performance', 'Performance history cleared');
+    }, [clearPerformanceHistory]);
+    
     return (
         <ScrollView style={styles.container}>
-            <Text style={styles.title}>Enhanced PDF JSI Example</Text>
+            <Text style={styles.title}>Hook-based JSI Example</Text>
             
             <View style={styles.statusContainer}>
                 <Text style={styles.statusText}>
-                    JSI Available: {isJSIAvailable ? '✅ Yes' : '❌ No'}
+                    JSI Status: {isJSIAvailable ? '✅ Available' : '❌ Not Available'}
                 </Text>
                 <Text style={styles.statusText}>
                     Initialized: {isInitialized ? '✅ Yes' : '⏳ No'}
                 </Text>
             </View>
-
-            <View style={styles.buttonContainer}>
-                <Button title="Check JSI Status" onPress={handleCheckJSI} />
-                <Button title="Render Page" onPress={handleRenderPage} />
-                <Button title="Get Page Metrics" onPress={handleGetMetrics} />
-                <Button title="Preload Pages" onPress={handlePreloadPages} />
-                <Button title="Search Text" onPress={handleSearchText} />
-                <Button title="Clear Cache" onPress={handleClearCache} />
-                <Button title="Optimize Memory" onPress={handleOptimizeMemory} />
-                <Button title="Set High Quality" onPress={handleSetQuality} />
-                <Button title="Get Performance History" onPress={handleGetPerformanceHistory} />
-                <Button title="Create PDF Instance" onPress={handleCreateInstance} />
+            
+            <View style={styles.inputContainer}>
+                <TextInput
+                    style={styles.input}
+                    placeholder="PDF ID"
+                    value={pdfId}
+                    onChangeText={setPdfId}
+                />
+                <TextInput
+                    style={styles.input}
+                    placeholder="Page Number"
+                    value={pageNumber.toString()}
+                    onChangeText={(text) => setPageNumber(parseInt(text) || 1)}
+                    keyboardType="numeric"
+                />
+                <TextInput
+                    style={styles.input}
+                    placeholder="Scale"
+                    value={scale.toString()}
+                    onChangeText={(text) => setScale(parseFloat(text) || 1.0)}
+                    keyboardType="numeric"
+                />
             </View>
-
-            {jsiStats && (
-                <View style={styles.statsContainer}>
-                    <Text style={styles.statsTitle}>JSI Statistics:</Text>
-                    <Text>Available: {jsiStats.jsiAvailable ? 'Yes' : 'No'}</Text>
-                    <Text>Performance Level: {jsiStats.performanceLevel}</Text>
-                    <Text>Direct Memory Access: {jsiStats.directMemoryAccess ? 'Yes' : 'No'}</Text>
-                    <Text>Bridge Optimized: {jsiStats.bridgeOptimized ? 'Yes' : 'No'}</Text>
-                    <Text>Operations: {jsiStats.operationHistory.length}</Text>
-                </View>
-            )}
-
-            {performanceHistory.length > 0 && (
-                <View style={styles.historyContainer}>
-                    <Text style={styles.historyTitle}>Performance History:</Text>
-                    {performanceHistory.slice(-5).map((entry, index) => (
-                        <Text key={index} style={styles.historyEntry}>
-                            {entry.operation}: {entry.duration.toFixed(2)}ms ({entry.mode})
+            
+            <TouchableOpacity style={styles.button} onPress={handleRenderPage}>
+                <Text style={styles.buttonText}>Render Page</Text>
+            </TouchableOpacity>
+            
+            <TouchableOpacity style={styles.button} onPress={handleGetMetrics}>
+                <Text style={styles.buttonText}>Get Page Metrics</Text>
+            </TouchableOpacity>
+            
+            <TouchableOpacity style={styles.button} onPress={handlePreloadPages}>
+                <Text style={styles.buttonText}>Preload Pages 1-5</Text>
+            </TouchableOpacity>
+            
+            <TouchableOpacity style={styles.button} onPress={handleLazyLoad}>
+                <Text style={styles.buttonText}>Lazy Load Pages</Text>
+            </TouchableOpacity>
+            
+            <TouchableOpacity style={styles.button} onPress={handleProgressiveLoad}>
+                <Text style={styles.buttonText}>Progressive Load</Text>
+            </TouchableOpacity>
+            
+            <TouchableOpacity style={styles.button} onPress={handleSmartCache}>
+                <Text style={styles.buttonText}>Smart Cache Pages</Text>
+            </TouchableOpacity>
+            
+            <View style={styles.searchContainer}>
+                <TextInput
+                    style={styles.input}
+                    placeholder="Search term"
+                    value={searchTerm}
+                    onChangeText={setSearchTerm}
+                />
+                <TouchableOpacity style={styles.button} onPress={handleSearch}>
+                    <Text style={styles.buttonText}>Search</Text>
+                </TouchableOpacity>
+            </View>
+            
+            <TouchableOpacity style={styles.button} onPress={updatePerformanceData}>
+                <Text style={styles.buttonText}>Update Performance Data</Text>
+            </TouchableOpacity>
+            
+            <TouchableOpacity style={styles.button} onPress={clearPerformance}>
+                <Text style={styles.buttonText}>Clear Performance History</Text>
+            </TouchableOpacity>
+            
+            {performanceData.length > 0 && (
+                <View style={styles.performanceContainer}>
+                    <Text style={styles.performanceTitle}>Performance History:</Text>
+                    {performanceData.slice(-5).map((item, index) => (
+                        <Text key={index} style={styles.performanceText}>
+                            {item.operation}: {item.duration.toFixed(2)}ms ({item.mode})
                         </Text>
                     ))}
                 </View>
             )}
+        </ScrollView>
+    );
+};
 
-            <View style={styles.enhancedViewContainer}>
-                <Text style={styles.enhancedTitle}>Enhanced PDF View:</Text>
-                <EnhancedPdfView
-                    ref={pdfRef}
-                    source={{ uri: 'https://example.com/sample.pdf' }}
-                    style={styles.pdfView}
-                    onLoadComplete={(numberOfPages) => {
-                        console.log(`PDF loaded with ${numberOfPages} pages`);
-                    }}
-                    onPageChanged={(page, numberOfPages) => {
-                        console.log(`Page changed to ${page} of ${numberOfPages}`);
-                    }}
-                    onError={(error) => {
-                        console.error('PDF error:', error);
-                    }}
-                />
+/**
+ * Enhanced PDF View Example
+ */
+export const EnhancedPdfViewExample = () => {
+    const [showPerformance, setShowPerformance] = useState(false);
+    
+    const handleShowPerformance = async () => {
+        try {
+            const benchmark = await EnhancedPdfUtils.getPerformanceBenchmark();
+            Alert.alert(
+                'Performance Benchmark',
+                `JSI Available: ${benchmark.jsiAvailable}\n` +
+                `Performance Level: ${benchmark.performanceLevel}\n` +
+                `Direct Memory Access: ${benchmark.directMemoryAccess}\n` +
+                `Operations: ${benchmark.operationHistory.length}`
+            );
+        } catch (error) {
+            Alert.alert('Error', error.message);
+        }
+    };
+    
+    const handleClearCaches = async () => {
+        try {
+            const success = await EnhancedPdfUtils.clearAllCaches();
+            Alert.alert('Cache', `Caches cleared: ${success ? 'Success' : 'Failed'}`);
+        } catch (error) {
+            Alert.alert('Error', error.message);
+        }
+    };
+    
+    const handleOptimizeMemory = async () => {
+        try {
+            const success = await EnhancedPdfUtils.optimizeAllMemory();
+            Alert.alert('Memory', `Memory optimized: ${success ? 'Success' : 'Failed'}`);
+        } catch (error) {
+            Alert.alert('Error', error.message);
+        }
+    };
+    
+    return (
+        <View style={styles.container}>
+            <Text style={styles.title}>Enhanced PDF View Example</Text>
+            
+            <EnhancedPdfView
+                source={{ uri: 'https://example.com/sample.pdf' }}
+                style={styles.pdfView}
+                onLoadComplete={(numberOfPages) => {
+                    console.log(`PDF loaded with ${numberOfPages} pages`);
+                }}
+                onPageChanged={(page) => {
+                    console.log(`Current page: ${page}`);
+                }}
+                onError={(error) => {
+                    console.error('PDF error:', error);
+                }}
+                // JSI-specific props
+                jsiEnabled={true}
+                enablePerformanceTracking={true}
+                enableSmartCaching={true}
+            />
+            
+            <View style={styles.buttonContainer}>
+                <TouchableOpacity style={styles.button} onPress={handleShowPerformance}>
+                    <Text style={styles.buttonText}>Show Performance</Text>
+                </TouchableOpacity>
+                
+                <TouchableOpacity style={styles.button} onPress={handleClearCaches}>
+                    <Text style={styles.buttonText}>Clear Caches</Text>
+                </TouchableOpacity>
+                
+                <TouchableOpacity style={styles.button} onPress={handleOptimizeMemory}>
+                    <Text style={styles.buttonText}>Optimize Memory</Text>
+                </TouchableOpacity>
             </View>
-        </ScrollView>
+        </View>
+    );
+};
+
+/**
+ * Main Example App
+ */
+export const PDFJSIExampleApp = () => {
+    const [currentExample, setCurrentExample] = useState('basic');
+    
+    const renderExample = () => {
+        switch (currentExample) {
+            case 'basic':
+                return <BasicJSIExample />;
+            case 'hook':
+                return <HookJSIExample />;
+            case 'enhanced':
+                return <EnhancedPdfViewExample />;
+            default:
+                return <BasicJSIExample />;
+        }
+    };
+    
+    return (
+        <View style={styles.appContainer}>
+            <View style={styles.tabContainer}>
+                <TouchableOpacity
+                    style={[styles.tab, currentExample === 'basic' && styles.activeTab]}
+                    onPress={() => setCurrentExample('basic')}
+                >
+                    <Text style={styles.tabText}>Basic</Text>
+                </TouchableOpacity>
+                
+                <TouchableOpacity
+                    style={[styles.tab, currentExample === 'hook' && styles.activeTab]}
+                    onPress={() => setCurrentExample('hook')}
+                >
+                    <Text style={styles.tabText}>Hook</Text>
+                </TouchableOpacity>
+                
+                <TouchableOpacity
+                    style={[styles.tab, currentExample === 'enhanced' && styles.activeTab]}
+                    onPress={() => setCurrentExample('enhanced')}
+                >
+                    <Text style={styles.tabText}>Enhanced</Text>
+                </TouchableOpacity>
+            </View>
+            
+            {renderExample()}
+        </View>
     );
 };
 
 const styles = StyleSheet.create({
+    appContainer: {
+        flex: 1,
+        backgroundColor: '#f5f5f5'
+    },
+    tabContainer: {
+        flexDirection: 'row',
+        backgroundColor: '#fff',
+        borderBottomWidth: 1,
+        borderBottomColor: '#ddd'
+    },
+    tab: {
+        flex: 1,
+        padding: 15,
+        alignItems: 'center',
+        borderBottomWidth: 2,
+        borderBottomColor: 'transparent'
+    },
+    activeTab: {
+        borderBottomColor: '#007AFF'
+    },
+    tabText: {
+        fontSize: 16,
+        fontWeight: '500',
+        color: '#333'
+    },
     container: {
         flex: 1,
         padding: 20,
-        backgroundColor: '#f5f5f5',
+        backgroundColor: '#fff'
     },
     title: {
         fontSize: 24,
         fontWeight: 'bold',
-        textAlign: 'center',
         marginBottom: 20,
-        color: '#333',
+        textAlign: 'center',
+        color: '#333'
     },
     statusContainer: {
-        backgroundColor: '#fff',
+        backgroundColor: '#f8f8f8',
         padding: 15,
         borderRadius: 8,
-        marginBottom: 20,
-        elevation: 2,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
+        marginBottom: 20
     },
     statusText: {
         fontSize: 16,
         marginBottom: 5,
-        color: '#666',
+        color: '#333'
     },
-    buttonContainer: {
-        gap: 10,
-        marginBottom: 20,
+    inputContainer: {
+        marginBottom: 20
     },
-    statsContainer: {
-        backgroundColor: '#fff',
-        padding: 15,
+    input: {
+        borderWidth: 1,
+        borderColor: '#ddd',
         borderRadius: 8,
-        marginBottom: 20,
-        elevation: 2,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
-    },
-    statsTitle: {
-        fontSize: 18,
-        fontWeight: 'bold',
+        padding: 12,
         marginBottom: 10,
-        color: '#333',
+        fontSize: 16
     },
-    historyContainer: {
-        backgroundColor: '#fff',
+    searchContainer: {
+        marginBottom: 20
+    },
+    button: {
+        backgroundColor: '#007AFF',
         padding: 15,
         borderRadius: 8,
-        marginBottom: 20,
-        elevation: 2,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
-    },
-    historyTitle: {
-        fontSize: 18,
-        fontWeight: 'bold',
         marginBottom: 10,
-        color: '#333',
+        alignItems: 'center'
     },
-    historyEntry: {
+    buttonContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        marginTop: 20
+    },
+    buttonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600'
+    },
+    resultContainer: {
+        backgroundColor: '#f0f0f0',
+        padding: 15,
+        borderRadius: 8,
+        marginTop: 20
+    },
+    resultText: {
         fontSize: 14,
-        marginBottom: 5,
-        color: '#666',
-        fontFamily: 'monospace',
+        color: '#333'
     },
-    enhancedViewContainer: {
-        backgroundColor: '#fff',
+    performanceContainer: {
+        backgroundColor: '#f8f8f8',
         padding: 15,
         borderRadius: 8,
-        marginBottom: 20,
-        elevation: 2,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
+        marginTop: 20
     },
-    enhancedTitle: {
+    performanceTitle: {
         fontSize: 18,
         fontWeight: 'bold',
         marginBottom: 10,
-        color: '#333',
+        color: '#333'
     },
-    pdfView: {
-        height: 400,
-        backgroundColor: '#f0f0f0',
-        borderRadius: 4,
+    performanceText: {
+        fontSize: 14,
+        marginBottom: 5,
+        color: '#666'
     },
+    pdfView: {
+        flex: 1,
+        backgroundColor: '#f0f0f0'
+    }
 });
 
-export default PDFJSIExample;
+export default PDFJSIExampleApp;