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

1yarn add react-native-pdf-renderer

Or

1npm i -S react-native-pdf-renderer

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

Android specific (optional)

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

Example:

1buildscript {
2  ext {
3    recyclerviewVersion = "1.2.1"
4  }
5  ...
6}

Basic usage

There is only one component that you need to use to render the PDF file.

1import PdfRendererView from 'react-native-pdf-renderer';
2
3const App = () => {
4  return (
5    <SafeAreaView style={{flex: 1}}>
6      <PdfRendererView
7        style={{backgroundColor: 'red'}}
8        source="file:///path/to/local/file.pdf"
9        distanceBetweenPages={16}
10        maxZoom={5}
11        onPageChange={(current, total) => {
12          console.log(current, total);
13        }}
14      />
15    </SafeAreaView>
16  );
17}
18
19export 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<ViewStyle>		Styles to be applied to the native view.

Limitations

Page interactions

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.

Size measuring

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.

Border radius

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.

1<View style={{ flex: 1, borderRadius: 24, overflow: 'hidden' }}>
2  <PdfRendererView
3    // ...
4  />
5</View>

Android crash when zooming too much

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

1jest.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.

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

License

The MIT License (MIT)

Copyright (c) 2023 Douglas Nassif Roma Junior

See the full license file.