React-Native Pdf Renderer
ā A zoomable, blazing fast, zero dependencies, pure native, typed PDF Renderer for Android and iOS.
It uses PdfRenderer for Android and PdfKit for iOS.
Install dependency package
yarn add react-native-pdf-renderer
Or
npm i -S react-native-pdf-renderer
Go to the folder your-project/ios and run pod install
, and you're done.
There is only one component that you need to use to render the PDF file.
import PdfRendererView from 'react-native-pdf-renderer';
const App = () => {
return (
<SafeAreaView style={{flex: 1}}>
<PdfRendererView
style={{backgroundColor: 'red'}}
source="file:///path/to/local/file.pdf"
distanceBetweenPages={16}
maxZoom={5}
onPageChange={(current, total) => {
console.log(current, total);
}}
/>
</SafeAreaView>
);
}
export default App;
The source
prop must point to a file stored inside device memory.
If the file is online, you can use some third part library like expo-file-system
, rn-fetch-blob
or react-native-blob-util
to download and save locally.
For more details, see the Sample Project.
Inherits View Props.
Name | Value | Default | Description |
---|---|---|---|
source | string | Path to a file stored on device. | |
distanceBetweenPages | number | 16 | Distance in DPI between pages. |
maxZoom | number | 5 | Max zoom scale. |
singlePage | boolean | false | (Experimental) Renders only the first page without scroll. (useful for display thumbnail) |
onPageChange | (current: number, total: number) => void | Invoked on pages scroll. |
The PdfRendererView
is flex: 1
by default, so you need to make sure that your parents View
are flex: 1
or have a fixed width/height
.
The borderRadius
style is ignored by React Native custom view in Android and crash on iOS. (read more #1)
If you need borderRadius
, the best option is to wrap the PdfRendererView
in another View
.
<View style={{ flex: 1, borderRadius: 24, overflow: 'hidden' }}>
<PdfRendererView
// ...
/>
</View>
New features, bug fixes and improvements are welcome! For questions and suggestions use the issues.
Author: douglasjunior
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/douglasjunior/react-native-pdf-renderer
License: MIT