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|
|-|-|
||

Why another PDF renderer?

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.

Requirements

- React Native >= 0.71.0
- iOS >= 12.0
- Android >= API 21

Install

Install dependency package
``bash
yarn add react-native-pdf-renderer
`
Or
`bash
npm i -S react-native-pdf-renderer
`

Go to the folder your-project/ios and run pod install, and you're done.

$3

Customize the androidx.recyclerview:recyclerview version by setting ext in your android/build.gradle file.

Example:

`gradle
buildscript {
ext {
recyclerviewVersion = "1.2.1"
}
...
}
`

Basic usage

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 (

style={{backgroundColor: 'red'}}
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.

PdfRendererView props

|Name|Type|Default|Description|
|-|-|-|-|
|source|string||Path to a file stored on the device.|
|distanceBetweenPages|number|16|Distance in DPI between pages.|
|maxZoom|number|5|Max zoom scale.|
|maxPageResolution|number|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 . |
|singlePage|boolean|false|Renders only the first page without scroll. (useful for display thumbnail)|
|onPageChange|(current: number, total: number) => void||Invoked on pages scroll.|
|onError|() => void||Invoked when an error occurs.|
|style|StyleProp||Styles to be applied to the native view.|

Limitations

$3

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.

$3

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.

$3

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

// ...
/>

`

$3

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.

Mock with jest

`js
jest.mock('react-native-pdf-renderer', () => require('react-native-pdf-renderer/dist/mock'));
`

Contribute

New features, bug fixes, and improvements are welcome! For questions and suggestions use the issues.


![Donate](https://paypal.me/douglasnassif)

Thanks to

This lib is only possible thanks to the community help:

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

Star History

![Star History Chart](https://star-history.com/#douglasjunior/react-native-pdf-renderer)

License

`
The MIT License (MIT)

Copyright (c) 2023 Douglas Nassif Roma Junior
``

See the full license file.