Gathering detailed insights and metrics for @react-native-oh-tpl/react-native-view-pdf
Gathering detailed insights and metrics for @react-native-oh-tpl/react-native-view-pdf
📚 PDF viewer for React Native
0.14.0-0.0.2
MIT
TypeScript
60.18 kB
Installations
npm install @react-native-oh-tpl/react-native-view-pdfDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.11.0
NPM Version
10.2.4
Releases
2
Languages
2
TypeScript
JavaScript
TypeScript (98.51%)
JavaScript (1.49%)
Developer
react-native-oh-library
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
339 Commits
1 Forks
2 Branches
Updated on Dec 18, 2024
Maintainers
23
Package Meta Information
Latest Version
0.14.0-0.0.2
Package Id
@react-native-oh-tpl/react-native-view-pdf@0.14.0-0.0.2
Unpacked Size
60.18 kB
Size
24.77 kB
File Count
26
NPM Version
10.2.4
Node Version
20.11.0
Published on
Oct 30, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
3
Dev Dependencies
22
@types/formidable@types/jest@types/pixelmatch@types/pngjs@types/react-native@typescript-eslint/eslint-plugin@typescript-eslint/parsercodecoveslinteslint-config-airbnbeslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-reacteslint-plugin-react-hooksjestreactreact-nativereact-test-rendererts-jesttypescriptwebpackwebpack-cli
react-native-view-pdf
Library for displaying PDF documents in react-native
- android - uses Android PdfViewer. Targets minSdkVersion 21 (required by setClipToOutline) and above. By default stable version
2.8.2is used. It's also possible to override it and use3.1.0-beta.1(this version allows to handle links, etc. and will be used when Android PdfViewer stable version is released). To change the version, define it in your build file:
buildscript {
ext {
...
pdfViewerVersion = "3.1.0-beta.1"
}
...
}
Barteksc PdfViewer uses JCenter, which should be read-only indefinitely, but in case the host project does not use it, there is a possibility to use mhiew/AndroidPdfViewer which is a fork published on mavenCentral. To use it, define the following configuration in your gradle script:
buildscript {
ext {
...
pdfViewerVersion = "3.2.0-beta.1"
pdfViewerRepo = "com.github.mhiew"
}
...
}
-
ios - uses WKWebView. Targets iOS9.0 and above
-
zero NPM dependencies
Getting started
$ npm install react-native-view-pdf --save
Linking
From RN 0.60 there is no need to link - Native Modules are now Autolinked
Mostly automatic installation
$ react-native link
If it doesn't work follow the official react native documentation
Using CocoaPods
In your Xcode project directory open Podfile and add the following line:
pod 'RNPDF', :path => '../node_modules/react-native-view-pdf'
And install:
pod install
Android
- Open up
android/app/src/main/java/[...]/MainApplication.java
- Add
import com.rumax.reactnative.pdfviewer.PDFViewPackage;to the imports at the top of the file - Add
new PDFViewPackage()to the list returned by thegetPackages()method
- Append the following lines to
android/settings.gradle:include ':react-native-view-pdf' project(':react-native-view-pdf').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-view-pdf/android') - Insert the following lines inside the dependencies block in
android/app/build.gradle:compile project(':react-native-view-pdf')
Note for Android
The Android project tries to retrieve the following properties:
- compileSdkVersion
- buildToolsVersion
- minSdkVersion
- targetSdkVersion
from the ext object if you have one defined in your Android's project root (you can read more about it here). If not, it falls back to its current versions (check the gradle file for additional information).
Windows
N/A
Demo
| Android | iOS |
|---|---|
 |  |
Quick Start
// With Flow type annotations (https://flow.org/)
import PDFView from 'react-native-view-pdf';
// Without Flow type annotations
// import PDFView from 'react-native-view-pdf/lib/index';
const resources = {
file: Platform.OS === 'ios' ? 'downloadedDocument.pdf' : '/sdcard/Download/downloadedDocument.pdf',
url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
base64: 'JVBERi0xLjMKJcfs...',
};
export default class App extends React.Component {
render() {
const resourceType = 'url';
return (
<View style={{ flex: 1 }}>
{/* Some Controls to change PDF resource */}
<PDFView
fadeInDuration={250.0}
style={{ flex: 1 }}
resource={resources[resourceType]}
resourceType={resourceType}
onLoad={() => console.log(`PDF rendered from ${resourceType}`)}
onError={(error) => console.log('Cannot render PDF', error)}
/>
</View>
);
}
}
Use the demo project to:
- Test the component on both android and iOS
- Render PDF using URL, BASE64 data or local file
- Handle error state
Props
| Name | Android | iOS | Description |
|---|---|---|---|
| resource | ✓ | ✓ | A resource to render. It's possible to render PDF from file, url (should be encoded) or base64 |
| resourceType | ✓ | ✓ | Should correspond to resource and can be: file, url or base64 |
| fileFrom | ✗ | ✓ | iOS ONLY: In case if resourceType is set to file, there are different way to search for it on iOS file system. Currently documentsDirectory, libraryDirectory, cachesDirectory, tempDirectory and bundle are supported. |
| onLoad | ✓ | ✓ | Callback that is triggered when loading is completed |
| onError | ✓ | ✓ | Callback that is triggered when loading has failed. And error is provided as a function parameter |
| style | ✓ | ✓ | A style |
| fadeInDuration | ✓ | ✓ | Fade in duration (in ms, defaults to 0.0) to smoothly fade the webview into view when pdf loading is completed |
| enableAnnotations | ✓ | ✗ | Android ONLY: Boolean to enable Android view annotations (default is false). |
| urlProps | ✓ | ✓ | Extended properties for url type that allows to specify HTTP Method, HTTP headers and HTTP body |
| onPageChanged | ✓ | ✗ | Callback that is invoked when page is changed. Provides active page and total pages information |
| onScrolled | ✓ | ✓ | Callback that is invoked when PDF is scrolled. Provides offset value in a range between 0 and 1. Currently only 0 and 1 are supported. |
Methods
reload
Allows to reload the PDF document. This can be useful in such cases as network issues, document is expired, etc. To reload the document you will need a ref to the component:
1... 2 3render() { 4 return ( 5 <PDFView 6 ... 7 ref={(ref) => this._pdfRed = ref} /> 8 ); 9}
And trigger it by calling reloadPDF:
1reloadPDF = async () => { 2 const pdfRef = this._pdfRef; 3 4 if (!pdfRef) { 5 return; 6 } 7 8 try { 9 await pdfRef.reload(); 10 } catch (err) { 11 console.err(err.message); 12 } 13}
Or check the demo project which also includes this functionality.
Development tips
On android for the file type it is required to request permissions to
read/write. You can get more information in PermissionsAndroid
section from react native or Request App Permissions from android
documentation. Demo
project provides an example how to implement it using Java, check the MainActivity.java and AndroidManifest.xml files.
Before trying file type in demo project, open sdcard/Download folder in Device File Explorer and store some downloadedDocument.pdf document that you want to render.
On iOS, when using resource file you can specify where to look for the file with fileFrom. If you do not pass any value, the component will lookup in two places. First, it will attempt to locate the file in the Bundle. If it cannot locate it there, it will search the Documents directory. For more information on the iOS filesystem access at runtime of an application please refer the official documentation.
Note here that the resource will always need to be a relative path from the Documents directory for example and also do NOT put the scheme in the path (so no file://.....).
You can find an example of both usage of the Bundle and Documents directory for rendering a pdf from file on iOS in the demo project.
In demo project you can also run the simple server to serve PDF file. To do this navigate to demo/utils/ and start the server
node server.js. (Do not forget to set proper IP adress of the server
in demo/App.js)
License
Authors
Other information
- Generated with react-native-create-library
- Zero JavaScript dependency. Which means that you do not bring other dependencies to your project
- If you think that something is missing or would like to propose new feature, please, discuss it with authors
- Please, feel free to ⭐️ the project. This gives us a confidence that you like it and we did a great job by publishing and supporting it 🤩
- If you are using ProGuard, add following rule to proguard config file:
-keep class com.shockwave.**
No vulnerabilities found.
No security vulnerabilities found.