react-native-pdf-renderer v1.2.0
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.