{"id":4182,"url":"https://github.com/rumax/react-native-PDFView","last_synced_at":"2025-08-04T00:32:47.861Z","repository":{"id":37548439,"uuid":"124298062","full_name":"rumax/react-native-PDFView","owner":"rumax","description":"📚 PDF viewer for React Native","archived":false,"fork":false,"pushed_at":"2024-05-28T21:12:16.000Z","size":21812,"stargazers_count":296,"open_issues_count":16,"forks_count":88,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-05-29T12:11:12.066Z","etag":null,"topics":["android","hacktoberfest","hacktoberfest2020","ios","javascript","pdf","pdf-viewer","react-component","react-native"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rumax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-07T21:42:22.000Z","updated_at":"2024-06-18T03:17:57.156Z","dependencies_parsed_at":"2022-07-14T10:31:16.842Z","dependency_job_id":"9fc03ec9-ceb0-442c-9c69-8e30ebead441","html_url":"https://github.com/rumax/react-native-PDFView","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rumax%2Freact-native-PDFView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rumax%2Freact-native-PDFView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rumax%2Freact-native-PDFView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rumax%2Freact-native-PDFView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rumax","download_url":"https://codeload.github.com/rumax/react-native-PDFView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576898,"owners_count":17939645,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","hacktoberfest","hacktoberfest2020","ios","javascript","pdf","pdf-viewer","react-component","react-native"],"created_at":"2024-01-05T20:17:03.704Z","updated_at":"2024-12-07T07:31:33.925Z","avatar_url":"https://github.com/rumax.png","language":"Java","readme":"# react-native-view-pdf\n\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/c1c746575c124138936e9418865136ab)](https://app.codacy.com/app/rumax/react-native-PDFView?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=rumax/react-native-PDFView\u0026utm_campaign=Badge_Grade_Dashboard)\n[![npm](https://img.shields.io/npm/l/express.svg)](https://github.com/rumax/react-native-PDFView)\n[![npm version](https://badge.fury.io/js/react-native-view-pdf.svg)](https://badge.fury.io/js/react-native-view-pdf)\n[![CircleCI](https://circleci.com/gh/rumax/react-native-PDFView.svg?style=shield)](https://circleci.com/gh/rumax/react-native-PDFView)\n[![codecov](https://codecov.io/gh/rumax/react-native-PDFView/branch/master/graph/badge.svg)](https://codecov.io/gh/rumax/react-native-PDFView)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\nLibrary for displaying [PDF documents](https://acrobat.adobe.com/us/en/acrobat/about-adobe-pdf.html) in [react-native](http://facebook.github.io/react-native/)\n\n- android - uses [Android PdfViewer](https://github.com/barteksc/AndroidPdfViewer). Targets minSdkVersion 21 (required by [setClipToOutline](https://developer.android.com/reference/android/view/View.html#setClipToOutline%28boolean%29)) and above. By default stable version `2.8.2` is used. It's also possible to override it and use `3.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:\n\n```\nbuildscript {\n  ext {\n    ...\n    pdfViewerVersion = \"3.1.0-beta.1\"\n  }\n  ...\n}\n```\n\nBarteksc PdfViewer uses JCenter, which should be [read-only indefinitely](https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/), but in case the host project does not use it, there is a possibility to use [mhiew/AndroidPdfViewer](https://github.com/mhiew/AndroidPdfViewer)\n which is a fork published on mavenCentral. To use it, define the following configuration in your gradle script:\n\n ```\nbuildscript {\n  ext {\n    ...\n    pdfViewerVersion = \"3.2.0-beta.1\"\n    pdfViewerRepo = \"com.github.mhiew\"\n  }\n  ...\n}\n```\n\n- ios - uses [WKWebView](https://developer.apple.com/documentation/webkit/wkwebview).\nTargets iOS9.0 and above\n\n- zero NPM dependencies\n\n## Getting started\n\n`$ npm install react-native-view-pdf --save`\n\n## Linking\n\nFrom [RN 0.60](https://github.com/facebook/react-native/releases/tag/v0.60.0) there is no need to link - [Native Modules are now Autolinked](https://facebook.github.io/react-native/blog/2019/07/03/version-60)\n\n### Mostly automatic installation\n\n`$ react-native link`\n\nIf it doesn't work follow the [official react native documentation](https://facebook.github.io/react-native/docs/linking-libraries-ios)\n\n##### Using CocoaPods\n\nIn your Xcode project directory open Podfile and add the following line:\n\n```\npod 'RNPDF', :path =\u003e '../node_modules/react-native-view-pdf'\n```\n\nAnd install:\n\n```\npod install\n```\n\n#### Android\n\n1. Open up `android/app/src/main/java/[...]/MainApplication.java`\n  - Add `import com.rumax.reactnative.pdfviewer.PDFViewPackage;` to the imports at the top of the file\n  - Add `new PDFViewPackage()` to the list returned by the `getPackages()` method\n2. Append the following lines to `android/settings.gradle`:\n    ```\n    include ':react-native-view-pdf'\n    project(':react-native-view-pdf').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-view-pdf/android')\n    ```\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n    ```\n    compile project(':react-native-view-pdf')\n    ```\n\n##### Note for Android\n  The Android project tries to retrieve the following properties:\n   - compileSdkVersion\n   - buildToolsVersion\n   - minSdkVersion\n   - targetSdkVersion\n\n  from the `ext` object if you have one defined in your Android's project root (you can read more about it [here](https://docs.gradle.org/current/userguide/writing_build_scripts.html#example_using_extra_properties)). If not, it falls back to its current versions (check [the gradle file](./android/build.gradle) for additional information).\n\n#### Windows\n[ReactWindows](https://github.com/ReactWindows/react-native)\n\nN/A\n\n## Demo\n\nAndroid | iOS\n------- | ---\n![Android](https://github.com/rumax/react-native-PDFView/raw/master/demo/res/android_pdf.gif) | ![iOS](https://github.com/rumax/react-native-PDFView/raw/master/demo/res/ios_pdf.gif)\n\n\n### Quick Start\n\n```\n// With Flow type annotations (https://flow.org/)\nimport PDFView from 'react-native-view-pdf';\n// Without Flow type annotations\n// import PDFView from 'react-native-view-pdf/lib/index';\n\nconst resources = {\n  file: Platform.OS === 'ios' ? 'downloadedDocument.pdf' : '/sdcard/Download/downloadedDocument.pdf',\n  url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',\n  base64: 'JVBERi0xLjMKJcfs...',\n};\n\nexport default class App extends React.Component {\n  render() {\n    const resourceType = 'url';\n\n    return (\n      \u003cView style={{ flex: 1 }}\u003e\n        {/* Some Controls to change PDF resource */}\n        \u003cPDFView\n          fadeInDuration={250.0}\n          style={{ flex: 1 }}\n          resource={resources[resourceType]}\n          resourceType={resourceType}\n          onLoad={() =\u003e console.log(`PDF rendered from ${resourceType}`)}\n          onError={(error) =\u003e console.log('Cannot render PDF', error)}\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\nUse the [demo](https://github.com/rumax/react-native-PDFView/tree/master/demo) project to:\n\n- Test the component on both android and iOS\n- Render PDF using URL, BASE64 data or local file\n- Handle error state\n\n### Props\n\nName | Android | iOS | Description\n---- | ------- | --- | -----------\nresource | ✓ | ✓ | A resource to render. It's possible to render PDF from `file`, `url` (should be [encoded](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI)) or `base64`\nresourceType | ✓ | ✓ | Should correspond to resource and can be: `file`, `url` or `base64`\nfileFrom | ✗ | ✓ | *iOS ONLY:* In case if `resourceType` is set to `file`, there are different way to search for it on [iOS file system](https://developer.apple.com/library/archive/documentation/FileManagement/Conceptual/FileSystemProgrammingGuide/FileSystemOverview/FileSystemOverview.html). Currently `documentsDirectory`, `libraryDirectory`, `cachesDirectory`, `tempDirectory` and `bundle` are supported.\nonLoad | ✓ | ✓ | Callback that is triggered when loading is completed\nonError | ✓ | ✓ | Callback that is triggered when loading has failed. And error is provided as a function parameter\nstyle | ✓ | ✓ | A [style](https://facebook.github.io/react-native/docs/style)\nfadeInDuration | ✓ | ✓ | Fade in duration (in ms, defaults to 0.0) to smoothly fade the webview into view when pdf loading is completed\nenableAnnotations | ✓ | ✗ | *Android ONLY:* Boolean to enable Android view annotations (default is false).\nurlProps | ✓ | ✓ | Extended properties for `url` type that allows to specify HTTP Method, HTTP headers and HTTP body\nonPageChanged | ✓ | ✗ | Callback that is invoked when page is changed. Provides `active page` and `total pages` information\nonScrolled | ✓ | ✓ | 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*.\n\n### Methods\n\n#### `reload`\n\nAllows 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:\n\n```js\n...\n\nrender() {\n  return (\n    \u003cPDFView\n      ...\n      ref={(ref) =\u003e this._pdfRed = ref} /\u003e\n  );\n}\n```\n\nAnd trigger it by calling `reloadPDF`:\n\n```js\nreloadPDF = async () =\u003e {\n  const pdfRef = this._pdfRef;\n\n  if (!pdfRef) {\n    return;\n  }\n\n  try {\n    await pdfRef.reload();\n  } catch (err) {\n    console.err(err.message);\n  }\n}\n```\n\nOr check the [demo project](https://github.com/rumax/react-native-PDFView/tree/master/demo) which also includes this functionality.\n\n\n### Development tips\n\nOn android for the `file` type it is required to request permissions to\nread/write. You can get more information in [PermissionsAndroid](https://facebook.github.io/react-native/docs/permissionsandroid)\nsection from react native or [Request App Permissions ](https://developer.android.com/training/permissions/requesting) from android\ndocumentation. [Demo](https://github.com/rumax/react-native-PDFView/tree/master/demo)\nproject provides an example how to implement it using Java, check the [MainActivity.java](https://github.com/rumax/react-native-PDFView/blob/b84913df174d3b638d2d820a66ed4e6605d56860/demo/android/app/src/main/java/com/demo/MainActivity.java#L12) and [AndroidManifest.xml](https://github.com/rumax/react-native-PDFView/blob/b84913df174d3b638d2d820a66ed4e6605d56860/demo/android/app/src/main/AndroidManifest.xml#L6) files.\n\nBefore trying `file` type in [demo project](https://github.com/rumax/react-native-PDFView/tree/master/demo), open `sdcard/Download` folder in `Device File Explorer` and store some `downloadedDocument.pdf` document that you want to render.\n\nOn 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](https://developer.apple.com/library/archive/documentation/FileManagement/Conceptual/FileSystemProgrammingGuide/FileSystemOverview/FileSystemOverview.html).\nNote 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://.....`).\n\nYou 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.\n\nIn [demo](https://github.com/rumax/react-native-PDFView/tree/master/demo) project you can also run the simple server to serve PDF file. To do this navigate to `demo/utils/` and start the server\n`node server.js`. (*Do not forget to set proper IP adress of the server\nin `demo/App.js`*)\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n\n## Authors\n- [sanderfrenken](https://github.com/sanderfrenken)\n- [rumax](https://github.com/rumax)\n\n### Other information\n\n- Generated with [react-native-create-library](https://github.com/frostney/react-native-create-library)\n- Zero JavaScript dependency. Which means that you do not bring other dependencies to your project\n- If you think that something is missing or would like to propose new feature, please, discuss it with authors\n- 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 🤩\n- [If you are using ProGuard, add following rule to proguard config file:](https://github.com/barteksc/AndroidPdfViewer#proguard)\n\n```\n    -keep class com.shockwave.**\n```\n","funding_links":[],"categories":["Components","Java"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frumax%2Freact-native-PDFView","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frumax%2Freact-native-PDFView","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frumax%2Freact-native-PDFView/lists"}