{"id":15050678,"url":"https://github.com/danfordgidraph/react-native-render-pdf","last_synced_at":"2025-04-10T02:19:55.275Z","repository":{"id":246827244,"uuid":"823739516","full_name":"DanfordGidraph/react-native-render-pdf","owner":"DanfordGidraph","description":"A Native, High-Performance, Feature-Rich and fully cross-platform React Native PDF View component written in Obj-C++ for iOS, Kotlin for Android and C++ for Windows","archived":false,"fork":false,"pushed_at":"2024-07-05T09:44:43.000Z","size":279,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-22T19:51:23.757Z","etag":null,"topics":["android","cpp","ios","kotlin","mobile","mobile-development","mobile-library","objective-c","react","react-native","react-native-library","universal-app","windows"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-render-pdf","language":"Objective-C++","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/DanfordGidraph.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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":"2024-07-03T16:00:35.000Z","updated_at":"2024-09-07T01:14:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"0359bae6-473b-4154-b96a-62b6fb0120d4","html_url":"https://github.com/DanfordGidraph/react-native-render-pdf","commit_stats":null,"previous_names":["danfordgidraph/react-native-render-pdf"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanfordGidraph%2Freact-native-render-pdf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanfordGidraph%2Freact-native-render-pdf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanfordGidraph%2Freact-native-render-pdf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanfordGidraph%2Freact-native-render-pdf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DanfordGidraph","download_url":"https://codeload.github.com/DanfordGidraph/react-native-render-pdf/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248142952,"owners_count":21054678,"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","cpp","ios","kotlin","mobile","mobile-development","mobile-library","objective-c","react","react-native","react-native-library","universal-app","windows"],"created_at":"2024-09-24T21:28:52.500Z","updated_at":"2025-04-10T02:19:55.253Z","avatar_url":"https://github.com/DanfordGidraph.png","language":"Objective-C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-render-pdf\n\n[![npm](https://img.shields.io/npm/v/react-native-render-pdf.svg?style=flat-square)](https://www.npmjs.com/package/react-native-render-pdf)\n\nA high performance \u0026 feature rich React Native PDF View component written in Obj-C++ for iOS, Kotlin for Android and C++ for Windows\n\n### Feature\n\n- read a PDF from url, blob, local file or asset and can cache it.\n- display horizontally or vertically\n- drag and zoom\n- double tap for zoom\n- support password protected pdf\n- jump to a specific page in the pdf\n\n### Supported versions\n\nWe use [`react-native-blob-util`](https://github.com/RonRadtke/react-native-blob-util) to handle file system access in this package,\nSo you should install react-native-render-pdf and react-native-blob-util\n\n\u003e The table below shows the supported versions of React Native and react-native-blob-util for different versions of `react-native-render-pdf`.\n\n| React Native            | 0.57+   |\n| ----------------------- | ------- |\n| react-native-render-pdf | 1.0.0+  |\n| react-native-blob-util  | 0.13.7+ |\n\n\u003e 🚨 Expo: This package is not available in the [Expo Go](https://expo.dev/client) app. Learn how you can use this package in [Custom Dev Clients](https://docs.expo.dev/development/getting-started/) via the out-of-tree [Expo Config Plugin](https://github.com/expo/config-plugins/tree/master/packages/react-native-pdf). Example: [`with-pdf`](https://github.com/expo/examples/tree/master/with-pdf).\n\n### Installation\n\n```bash\n# Using npm\nnpm install react-native-render-pdf react-native-blob-util --save\n\n# or using yarn:\nyarn add react-native-render-pdf react-native-blob-util\n```\n\nThen follow the instructions for your platform to link react-native-render-pdf into your project:\n\n### iOS installation\n\n\u003cdetails\u003e\n  \u003csummary\u003eiOS details\u003c/summary\u003e\n\n**React Native 0.60 and above**\n\nRun `pod install` in the `ios` directory. Linking is not required in React Native 0.60 and above.\n\n**React Native 0.59 and below**\n\n```bash\nreact-native link react-native-blob-util\nreact-native link react-native-render-pdf\n```\n\n\u003c/details\u003e\n\n### Android installation\n\n\u003cdetails\u003e\n  \u003csummary\u003eAndroid details\u003c/summary\u003e\n\n\\*\\*Add following to your android/build.gradle\\*\\*\n\n```diff\next {\n  ...\n+   kotlinVersion = \"1.9.24' // or latest\n  ...\n}\n```\n\n**If you use RN 0.59.0 and above**, please add following to your android/app/build.gradle\\*\\*\n\n```diff\nandroid {\n\n+    packagingOptions {\n+       pickFirst 'lib/x86/libc++_shared.so'\n+       pickFirst 'lib/x86_64/libjsc.so'\n+       pickFirst 'lib/arm64-v8a/libjsc.so'\n+       pickFirst 'lib/arm64-v8a/libc++_shared.so'\n+       pickFirst 'lib/x86_64/libc++_shared.so'\n+       pickFirst 'lib/armeabi-v7a/libc++_shared.so'\n+     }\n\n   }\n```\n\n**React Native 0.59.0 and below**\n\n```bash\nreact-native link react-native-blob-util\nreact-native link react-native-render-pdf\n```\n\n\u003c/details\u003e\n\n### Windows installation\n\n\u003cdetails\u003e\n  \u003csumary\u003eWindows details\u003c/summary\u003e\n\n- Open your solution in Visual Studio 2019 (eg. `windows\\yourapp.sln`)\n- Right-click Solution icon in Solution Explorer \u003e Add \u003e Existing Project...\n- If running RNW 0.62: add `node_modules\\react-native-render-pdf\\windows\\RCTPdf\\RCTPdf.vcxproj`\n- If running RNW 0.62: add `node_modules\\react-native-blob-util\\windows\\ReactNativeBlobUtil\\ReactNativeBlobUtil.vcxproj`\n- Right-click main application project \u003e Add \u003e Reference...\n- Select `progress-view` and in Solution Projects\n  - If running 0.62, also select `RCTPdf` and `ReactNativeBlobUtil`\n- In app `pch.h` add `#include \"winrt/RCTPdf.h\"`\n  - If running 0.62, also select `#include \"winrt/ReactNativeBlobUtil.h\"`\n- In `App.cpp` add `PackageProviders().Append(winrt::progress_view::ReactPackageProvider());` before `InitializeComponent();`\n  - If running RNW 0.62, also add `PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider());` and `PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider());`\n\n#### Bundling PDFs with the app\n\nTo add a `test.pdf` like in the example add:\n\n```\n\u003cNone Include=\"..\\..\\test.pdf\"\u003e\n  \u003cDeploymentContent\u003etrue\u003c/DeploymentContent\u003e\n\u003c/None\u003e\n```\n\nin the app `.vcxproj` file, before `\u003cNone Include=\"packages.config\" /\u003e`.\n\n\u003c/details\u003e\n\n### FAQ\n\n\u003cdetails\u003e\n  \u003csummary\u003eFAQ details\u003c/summary\u003e\n\nQ1. After installation and running, I can not see the pdf file.  \nA1: maybe you forgot to excute `react-native link` or it does not run correctly.\nYou can add it manually. For detail you can see the issue [`#24`](https://github.com/danfordgidraph/react-native-render-pdf/issues/24) and [`#2`](https://github.com/danfordgidraph/react-native-render-pdf/issues/2)\n\nQ2. When running, it shows `'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'`  \nA2. Your react-native version is too old, please upgrade it to 0.47.0+ see also [`#39`](https://github.com/danfordgidraph/react-native-render-pdf/issues/39)\n\nQ3. When I run the example app I get a white/gray screen / the loading bar isn't progressing .  \nA3. Check your uri, if you hit a pdf that is hosted on a `http` you will need to do the following:\n\n**iOS:**\nadd an exception for the server hosting the pdf in the ios `info.plist`. Here is an example :\n\n```\n\u003ckey\u003eNSAppTransportSecurity\u003c/key\u003e\n\u003cdict\u003e\n  \u003ckey\u003eNSExceptionDomains\u003c/key\u003e\n  \u003cdict\u003e\n    \u003ckey\u003eyourserver.com\u003c/key\u003e\n    \u003cdict\u003e\n      \u003c!--Include to allow subdomains--\u003e\n      \u003ckey\u003eNSIncludesSubdomains\u003c/key\u003e\n      \u003ctrue/\u003e\n      \u003c!--Include to allow HTTP requests--\u003e\n      \u003ckey\u003eNSTemporaryExceptionAllowsInsecureHTTPLoads\u003c/key\u003e\n      \u003ctrue/\u003e\n      \u003c!--Include to specify minimum TLS version--\u003e\n      \u003ckey\u003eNSTemporaryExceptionMinimumTLSVersion\u003c/key\u003e\n      \u003cstring\u003eTLSv1.1\u003c/string\u003e\n    \u003c/dict\u003e\n  \u003c/dict\u003e\n\u003c/dict\u003e\n```\n\n**Android:**\n[`see here`](https://stackoverflow.com/questions/54818098/cleartext-http-traffic-not-permitted)\n\nQ4. why doesn't it work with react native expo?.  \nA4. Expo does not support native module. you can read more expo caveats [`here`](https://facebook.github.io/react-native/docs/getting-started.html#caveats)\n\nQ5. Why can't I run the iOS example? `'Failed to build iOS project. We ran \"xcodebuild\" command but it exited with error code 65.'`  \nA5. Run the following commands in the project folder (e.g. `react-native-render-pdf/example`) to ensure that all dependencies are available:\n\n```\nyarn install (or npm install)\ncd ios\npod install\ncd ..\nreact-native run-ios\n```\n\n\u003c/details\u003e\n\n[[more]](https://github.com/danfordgidraph/react-native-render-pdf/releases)\n\n\u003c/details\u003e\n\n### Example\n\n```js\n/**\n * Original Author: Wonday (@wonday.org) Copyright (c) 2017-present\n * Copyright (c) 2024-present, Staxtech (@gidraphdanford.dev)\n * All rights reserved.\n *\n * This source code is licensed under the MIT-style license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport React from \"react\";\nimport { StyleSheet, Dimensions, View } from \"react-native\";\nimport Pdf from \"react-native-render-pdf\";\n\nexport default class PDFExample extends React.Component {\n  render() {\n    const source = {\n      uri: \"http://samples.leanpub.com/thereactnativebook-sample.pdf\",\n      cache: true,\n    };\n    //const source = require('./test.pdf');  // ios only\n    //const source = {uri:'bundle-assets://test.pdf' };\n    //const source = {uri:'file:///sdcard/test.pdf'};\n    //const source = {uri:\"data:application/pdf;base64,JVBERi0xLjcKJc...\"};\n    //const source = {uri:\"content://com.example.blobs/xxxxxxxx-...?offset=0\u0026size=xxx\"};\n    //const source = {uri:\"blob:xxxxxxxx-...?offset=0\u0026size=xxx\"};\n\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cPdf\n          source={source}\n          onLoadComplete={(numberOfPages, filePath) =\u003e {\n            console.log(`Number of pages: ${numberOfPages}`);\n          }}\n          onPageChanged={(page, numberOfPages) =\u003e {\n            console.log(`Current page: ${page}`);\n          }}\n          onError={(error) =\u003e {\n            console.log(error);\n          }}\n          onPressLink={(uri) =\u003e {\n            console.log(`Link pressed: ${uri}`);\n          }}\n          style={styles.pdf}\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    marginTop: 25,\n  },\n  pdf: {\n    flex: 1,\n    width: Dimensions.get(\"window\").width,\n    height: Dimensions.get(\"window\").height,\n  },\n});\n```\n\n### Configuration\n\n| Property                       |                             Type                              |         Default          | Description                                                                                                                                                                           | iOS | Android | Windows                     | FirstRelease |\n| ------------------------------ | :-----------------------------------------------------------: | :----------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ------- | --------------------------- | ------------ |\n| source                         |                            object                             |         not null         | PDF source like {uri:xxx, cache:false}. see the following for detail.                                                                                                                 | ✔   | ✔       | ✔                           | 1.0.0        |\n| page                           |                            number                             |            1             | initial page index                                                                                                                                                                    | ✔   | ✔       | ✔                           | 1.0.0        |\n| scale                          |                            number                             |           1.0            | should minScale\u003c=scale\u003c=maxScale                                                                                                                                                      | ✔   | ✔       | ✔                           | 1.0.0        |\n| minScale                       |                            number                             |           1.0            | min scale                                                                                                                                                                             | ✔   | ✔       | ✔                           | 1.0.0        |\n| maxScale                       |                            number                             |           3.0            | max scale                                                                                                                                                                             | ✔   | ✔       | ✔                           | 1.0.0        |\n| horizontal                     |                             bool                              |          false           | draw page direction, if you want to listen the orientation change, you can use [[react-native-orientation-locker]](https://github.com/danfordgidraph/react-native-orientation-locker) | ✔   | ✔       | ✔                           | 1.0.0        |\n| showsHorizontalScrollIndicator |                             bool                              |           true           | shows or hides the horizontal scroll bar indicator on iOS                                                                                                                             | ✔   |         |                             | 1.0.0        |\n| showsVerticalScrollIndicator   |                             bool                              |           true           | shows or hides the vertical scroll bar indicator on iOS                                                                                                                               | ✔   |         |                             | 1.0.0        |\n| fitPolicy                      |                            number                             |            2             | 0:fit width, 1:fit height, 2:fit both(default)                                                                                                                                        | ✔   | ✔       | ✔                           | 1.0.0        |\n| spacing                        |                            number                             |            10            | the breaker size between pages                                                                                                                                                        | ✔   | ✔       | ✔                           | 1.0.0        |\n| password                       |                            string                             |            \"\"            | pdf password, if password error, will call OnError() with message \"Password required or incorrect password.\"                                                                          | ✔   | ✔       | ✔                           | 1.0.0        |\n| style                          |                            object                             | {backgroundColor:\"#eee\"} | support normal view style, you can use this to set border/spacing color...                                                                                                            | ✔   | ✔       | ✔                           | 1.0.0        |\n| renderActivityIndicator        |                    (progress) =\u003e Component                    |      \u003cProgressBar/\u003e      | when loading show it as an indicator, you can use your component                                                                                                                      | ✔   | ✔       | ✖                           | 1.0.0        |\n| enableAntialiasing             |                             bool                              |           true           | improve rendering a little bit on low-res screens, but maybe course some problem on Android 4.4, so add a switch                                                                      | ✖   | ✔       | ✖                           | 1.0.0        |\n| enablePaging                   |                             bool                              |          false           | only show one page in screen                                                                                                                                                          | ✔   | ✔       | ✔                           | 1.0.0        |\n| enableRTL                      |                             bool                              |          false           | scroll page as \"page3, page2, page1\"                                                                                                                                                  | ✔   | ✖       | ✔                           | 1.0.0        |\n| enableAnnotationRendering      |                             bool                              |           true           | enable rendering annotation, notice:iOS only support initial setting,not support realtime changing                                                                                    | ✔   | ✔       | ✖                           | 1.0.0        |\n| trustAllCerts                  |                             bool                              |           true           | Allow connections to servers with self-signed certification                                                                                                                           | ✔   | ✔       | ✖                           | 1.0.0        |\n| singlePage                     |                             bool                              |          false           | Only show first page, useful for thumbnail views                                                                                                                                      | ✔   | ✔       | ✔                           | 1.0.0        |\n| onLoadProgress                 |                       function(percent)                       |           null           | callback when loading, return loading progress (0-1)                                                                                                                                  | ✔   | ✔       | ✖                           | 1.0.0        |\n| onLoadComplete                 | function(numberOfPages, path, {width, height}, tableContents) |           null           | callback when pdf load completed, return total page count, pdf local/cache path, {width,height} and table of contents                                                                 | ✔   | ✔       | ✔ but without tableContents | 1.0.0        |\n| onPageChanged                  |                 function(page,numberOfPages)                  |           null           | callback when page changed ,return current page and total page count                                                                                                                  | ✔   | ✔       | ✔                           | 1.0.0        |\n| onError                        |                        function(error)                        |           null           | callback when error happened                                                                                                                                                          | ✔   | ✔       | ✔                           | 1.0.0        |\n| onPageSingleTap                |                        function(page)                         |           null           | callback when page was single tapped                                                                                                                                                  | ✔   | ✔       | ✔                           | 1.0.0        |\n| onScaleChanged                 |                        function(scale)                        |           null           | callback when scale page                                                                                                                                                              | ✔   | ✔       | ✔                           | 1.0.0        |\n| onPressLink                    |                         function(uri)                         |           null           | callback when link tapped                                                                                                                                                             | ✔   | ✔       | ✖                           | 1.0.0        |\n\n#### parameters of source\n\n| parameter     | Description                                   | default         | iOS | Android | Windows |\n| ------------- | --------------------------------------------- | --------------- | --- | ------- | ------- |\n| uri           | pdf source, see the forllowing for detail.    | required        | ✔   | ✔       | ✔       |\n| cache         | use cache or not                              | false           | ✔   | ✔       | ✖       |\n| cacheFileName | specific file name for cached pdf file        | MD5(uri) result | ✔   | ✔       | ✖       |\n| expiration    | cache file expired seconds (0 is not expired) | 0               | ✔   | ✔       | ✖       |\n| method        | request method when uri is a url              | \"GET\"           | ✔   | ✔       | ✖       |\n| headers       | request headers when uri is a url             | {}              | ✔   | ✔       | ✖       |\n\n#### types of source.uri\n\n| Usage                                                                | Description                                                                               | iOS | Android | Windows |\n| -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | --- | ------- | ------- |\n| `{uri:\"http://xxx/xxx.pdf\"}`                                         | load pdf from a url                                                                       | ✔   | ✔       | ✔       |\n| `{require(\"./test.pdf\")}`                                            | load pdf relate to js file (do not need add by xcode)                                     | ✔   | ✖       | ✖       |\n| `{uri:\"bundle-assets://path/to/xxx.pdf\"}`                            | load pdf from assets, the file should be at android/app/src/main/assets/path/to/xxx.pdf   | ✖   | ✔       | ✖       |\n| `{uri:\"bundle-assets://xxx.pdf\"}`                                    | load pdf from assets, you must add pdf to project by xcode. this does not support folder. | ✔   | ✖       | ✖       |\n| `{uri:\"data:application/pdf;base64,JVBERi0xLjcKJc...\"}`              | load pdf from base64 string                                                               | ✔   | ✔       | ✔       |\n| `{uri:\"file:///absolute/path/to/xxx.pdf\"}`                           | load pdf from local file system                                                           | ✔   | ✔       | ✔       |\n| `{uri:\"ms-appx:///xxx.pdf\"}}`                                        | load pdf bundled with UWP app                                                             | ✖   | ✖       | ✔       |\n| `{uri:\"content://com.example.blobs/xxxxxxxx-...?offset=0\u0026size=xxx\"}` | load pdf from content URI                                                                 | ✔\\* | ✖       | ✖       |\n| `{uri:\"blob:xxxxxxxx-...?offset=0\u0026size=xxx\"}`                        | load pdf from blob URL                                                                    | ✖   | ✔       | ✖       |\n\n\\*) requires building React Native from source with [this patch](https://github.com/facebook/react-native/pull/31789)\n\n### Methods\n\n- [setPage](#setPage)\n\nMethods operate on a ref to the PDF element. You can get a ref with the following code:\n\n```\nreturn (\n  \u003cPdf\n    ref={(pdf) =\u003e { this.pdf = pdf; }}\n    source={source}\n    ...\n  /\u003e\n);\n```\n\n#### setPage()\n\n`setPage(pageNumber)`\n\nSet the current page of the PDF component. pageNumber is a positive integer. If pageNumber \u003e numberOfPages, current page is not changed.\n\nExample:\n\n```\nthis.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything\n```\n\n### Derived Works and Contributions Acknowledgement\n\n- Based on the original work by [Wonday](https://github.com/wonday/) [react-native-pdf](https://github.com/wonday/react-native-pdf)\n- Implements the [react-native-blob-util](https://github.com/RonRadtke/react-native-blob-util) library for file system access\n- Implements the [android-pdfview Fork](https://github.com/Infomaniak/android-pdfview) library for Android by Infomaniak\n- Implements the [PDFiumAndroid Fork](https://github.com/Infomaniak/PdfiumAndroid) by Infomaniak\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanfordgidraph%2Freact-native-render-pdf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanfordgidraph%2Freact-native-render-pdf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanfordgidraph%2Freact-native-render-pdf/lists"}