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.60.0
• iOS >= 11.0
• Android >= API 19

Install

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.

Basic usage

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.

PdfRendererView props

Limitations

Size measuring

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.

Border radius

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>

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.