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 | ✖ | ✔ | ✖ |