react-native-pdf

import React from 'react'; import { StyleSheet, View, Text, Dimensions } from 'react-native'; import PDF from 'react-native-pdf'; const MyPdfViewer = () => { // Example source: a public PDF URL const source = { uri: 'https://www.africau.edu/images/default/sample.pdf', cache: true, }; // For a local file, you might use: // const localSource = { uri: 'file:///data/user/0/com.yourpackage/files/my_document.pdf' }; // For an asset: // const assetSource = require('./assets/document.pdf'); return ( <View style={styles.container}> <Text style={styles.title}>Viewing a PDF Document</Text> <PDF source={source} onLoadComplete={(numberOfPages, filePath) => { console.log(`Number of pages: ${numberOfPages}`); }} onPageChanged={(page, numberOfPages) => { console.log(`Current page: ${page} / ${numberOfPages}`); }} onError={(error) => { console.log(error); }} onPressLink={(uri) => { console.log(`Link pressed: ${uri}`); }} style={styles.pdf} enablePaging={true} // Enable horizontal paging for multi-page PDFs page={1} scale={1.0} minScale={0.5} maxScale={3.0} fitPolicy={0} // 0: width, 1: height, 2: both /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center', marginTop: 25, }, title: { fontSize: 20, fontWeight: 'bold', marginBottom: 10, }, pdf: { flex: 1, width: Dimensions.get('window').width, height: Dimensions.get('window').height - 100, // Adjust height to leave space for title }, }); export default MyPdfViewer;