⚛ 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.60.0
- iOS >= 11.0
- Android >= API 19
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.
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.
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 |
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
.
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>
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/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
The MIT License (MIT)
Copyright (c) 2023 Douglas Nassif Roma Junior
See the full license file.