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

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

|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.| |style|StyleProp<ViewStyle>||Styles to be applied to the View |

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.