cool-pdf
PDF View Component for Expo. Intended as a drop-in replacement for react-native-pdf. Check compatibility table for current progress. Contributions welcome.
Roadmap
See this GitHub issue explaining the motivation and intentions for the project
Installation
Add the package to your dependencies
npm install @coolsoftwaretyler/cool-pdf
Run a fresh prebuild
npx expo prebuild --clean
Run your app
Start up Android or iOS
Usage
import { CoolPdfView } from "@coolsoftwaretyler/cool-pdf";
<CoolPdfView source={{ uri: url }} />;
Compatibility with react-native-pdf
Overall compatibility: 89%
- 27/29 props
- 6/6 source parameters
- 6/9 types of source uri
- 39/44 total props supported
Props
| Property | Type | Default | Description | iOS | Android | Supported |
|---|---|---|---|---|---|---|
| source | object | not null | PDF source like {uri:xxx, cache:false}. see the following for detail. | ✔ | ✔ | ✔ |
| page | number | 1 | initial page index | ✔ | ✔ | ✔ |
| scale | number | 1.0 | should minScale<=scale<=maxScale | ✔ | ✔ | ✔ |
| minScale | number | 1.0 | min scale | ✔ | ✔ | ✔ |
| maxScale | number | 3.0 | max scale | ✔ | ✔ | ✔ |
| horizontal | bool | false | draw page direction, if you want to listen the orientation change, you can use react-native-orientation-locker | ✔ | ✔ | ✔ |
| showsHorizontalScrollIndicator | bool | true | shows or hides the horizontal scroll bar indicator on iOS | ✔ | ✔ | |
| showsVerticalScrollIndicator | bool | true | shows or hides the vertical scroll bar indicator on iOS | ✔ | ✔ | |
| scrollEnabled | bool | true | enable or disable scroll | ✔ | ✔ | |
| fitPolicy | number | 2 | 0:fit width, 1:fit height, 2:fit both(default) | ✔ | ✔ | ✔ |
| spacing | number | 10 | the breaker size between pages | ✔ | ✔ | ✔ |
| password | string | "" | pdf password, if password error, will call OnError() with message "Password required or incorrect password." | ✔ | ✔ | ✔ |
| style | object | {backgroundColor:"#eee"} | support normal view style, you can use this to set border/spacing color... | ✔ | ✔ | ✔ |
| progressContainerStyle | object | {backgroundColor:"#eee"} | support normal view style, you can use this to set border/spacing color... | ✔ | ✔ | ✔ |
| renderActivityIndicator | (progress) => Component | when loading show it as an indicator, you can use your component | ✔ | ✔ | ✔ | |
| 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 | ✖ | ✔ | ✖ |
| enablePaging | bool | false | only show one page in screen | ✔ | ✔ | ✔ |
| enableRTL | bool | false | scroll page as "page3, page2, page1" | ✔ | ✖ | ✔ |
| enableAnnotationRendering | bool | true | enable rendering annotation, notice:iOS only support initial setting,not support realtime changing | ✔ | ✔ | ✔ |
| enableDoubleTapZoom | bool | true | Enable double tap to zoom gesture | ✔ | ✔ | ✔ |
| trustAllCerts | bool | true | Allow connections to servers with self-signed certification | ✔ | ✔ | ✖ |
| singlePage | bool | false | Only show first page, useful for thumbnail views | ✔ | ✔ | ✔ |
| onLoadProgress | function(percent) | null | callback when loading, return loading progress (0-1) | ✔ | ✔ | ✔ |
| 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 | ✔ | ✔ | ✔ |
| onPageChanged | function(page,numberOfPages) | null | callback when page changed ,return current page and total page count | ✔ | ✔ | ✔ |
| onError | function(error) | null | callback when error happened | ✔ | ✔ | ✔ |
| onPageSingleTap | function(page) | null | callback when page was single tapped | ✔ | ✔ | ✔ |
| onScaleChanged | function(scale) | null | callback when scale page | ✔ | ✔ | ✔ |
| onPressLink | function(uri) | null | callback when link tapped | ✔ | ✔ | ✔ |
parameters of source
| parameter | Description | default | iOS | Android | Supported |
|---|---|---|---|---|---|
| uri | pdf source, see the following for detail. | required | ✔ | ✔ | ✔ |
| cache | use cache or not | false | ✔ | ✔ | ✔ |
| cacheFileName | specific file name for cached pdf file | SHA1(uri) result | ✔ | ✔ | ✔ |
| expiration | cache file expired seconds (0 is not expired) | 0 | ✔ | ✔ | ✔ |
| method | request method when uri is a url | "GET" | ✔ | ✔ | ✔ |
| headers | request headers when uri is a url | {} | ✔ | ✔ | ✔ |
types of source.uri
| Usage | Description | iOS | Android | Supported |
|---|---|---|---|---|
{uri:"http://xxx/xxx.pdf"} | load pdf from a url | ✔ | ✔ | ✔ |
{require("./test.pdf")} | load pdf relate to js file (do not need add by xcode) | ✔ | ✔ | ✔ |
{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 | ✖ | ✔ | ✔ |
{uri:"bundle-assets://xxx.pdf"} | load pdf from assets, you must add pdf to project by xcode. this does not support folder. | ✔ | ✖ | ✔ |
{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."} | load pdf from base64 string | ✔ | ✔ | ✔ |
{uri:"file:///absolute/path/to/xxx.pdf"} | load pdf from local file system | ✔ | ✔ | ✔ |
{uri:"ms-appx:///xxx.pdf"}} | load pdf bundled with UWP app | ✖ | ✖ | ✖ |
{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"} | load pdf from content URI | ✔* | ✖ | ✖ |
{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"} | load pdf from blob URL | ✖ | ✔ | ✖ |