react-native-view-pdf

And install:

#### Android

1. 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 the `getPackages()` method
2. 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')
    ```
3. 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](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).

#### Windows
[ReactWindows](https://github.com/ReactWindows/react-native)

N/A

## Demo

Android | iOS
------- | ---
![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)


### Quick Start

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](https://github.com/rumax/react-native-PDFView/tree/master/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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI)) 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](https://developer.apple.com/library/archive/documentation/FileManagement/Conceptual/FileSystemProgrammingGuide/FileSystemOverview/FileSystemOverview.html). 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](https://facebook.github.io/react-native/docs/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:

```js
...

render() {
  return (
    <PDFView
      ...
      ref={(ref) => this._pdfRed = ref} />
  );
}

reloadPDF = async () => {
  const pdfRef = this._pdfRef;

  if (!pdfRef) {
    return;
  }

  try {
    await pdfRef.reload();
  } catch (err) {
    console.err(err.message);
  }
}