⚛ A zoomable, blazing fast, zero dependencies, pure native, typed PDF Renderer for Android and iOS.
npm install 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.
|Android|iOS|
|-|-|
|
|
The main reason why I create this library is to avoid using third-party native dependencies, like com.github.TalbotGooday:AndroidPdfViewer, com.github.mhiew:android-pdf-viewer, react-native-blob-util or even react-native-webview.
But why?
Every React Native developer knows (or will discover soon) the pain of updating the React Native ecosystem when a new version of Android or iOS comes out, so here we want to avoid this pain as much as possible.
- React Native >= 0.71.0
- iOS >= 12.0
- Android >= API 21
Install dependency package
``bash`
yarn add react-native-pdf-renderer`
Orbash`
npm i -S react-native-pdf-renderer
Go to the folder your-project/ios and run pod install, and you're done.
Customize the androidx.recyclerview:recyclerview version by setting ext in your android/build.gradle file.
Example:
`gradle`
buildscript {
ext {
recyclerviewVersion = "1.2.1"
}
...
}
There is only one component that you need to use to render the PDF file.
`jsx
import PdfRendererView from 'react-native-pdf-renderer';
const App = () => {
return (
source="file:///path/to/local/file.pdf"
distanceBetweenPages={16}
maxZoom={5}
onPageChange={(current, total) => {
console.log(current, total);
}}
/>
);
}
export default App;
`
The source prop must point to a file stored inside the device memory.
If the file is online, you can use some third-party library like expo-file-system, rn-fetch-blob, or react-native-blob-util to download and save it locally.
For more details, see the Sample Project.
|Name|Type|Default|Description|
|-|-|-|-|
|source|string||Path to a file stored on the device.|number
|distanceBetweenPages||16|Distance in DPI between pages.|number
|maxZoom||5|Max zoom scale.|number
|maxPageResolution||2048|(Android only) Max page resolution (width/height) in pixels when zooming. Defined to prevent Android crash when zooming too much: https://github.com/douglasjunior/react-native-pdf-renderer/issues/26 . |boolean
|singlePage||false|Renders only the first page without scroll. (useful for display thumbnail)|(current: number, total: number) => void
|onPageChange|||Invoked on pages scroll.|() => void
|onError|||Invoked when an error occurs.|StyleProp
|style|||Styles to be applied to the native view.|
Because Android renders the PDF page as a full image, it does not support text selection, accessibility, or handling links.
If any of these features are important for your product, we recommend adding a button to open the PDF in an external PDF viewer.
The PdfRendererView is flex: 1 by default, so you need to make sure that your parents Views are flex: 1 or have a fixed width/height.
The borderRadius style is ignored by React Native custom view in Android and crashes on iOS. (read more #1)
If you need borderRadius, the best option is to wrap the PdfRendererView in another View.
`jsx`
/>
To prevent Android from crashing when zooming too much, we have a maxPageResolution prop that limits the page resolution when zooming. (read more #26)
If you are receiving the error java.lang.RuntimeException: Canvas: trying to draw too large(134806560bytes) bitmap, try to reduce the maxPageResolution prop.
`js`
jest.mock('react-native-pdf-renderer', () => require('react-native-pdf-renderer/dist/mock'));
New features, bug fixes, and improvements are welcome! For questions and suggestions use the issues.


This lib is only possible thanks to the community help:
- RecyclerView notifyDataSetChanged() not working on React Native: https://stackoverflow.com/a/49381907/2826279Matrix
- Add pinch to zoom on RecyclerView: https://stackoverflow.com/a/37895783/2826279
- Using to handle zoom in a View: https://stackoverflow.com/a/55299327/2826279
- Daniel Felipe Sartório for the help with Android native code

`
The MIT License (MIT)
Copyright (c) 2023 Douglas Nassif Roma Junior
``
See the full license file.