React Native wrapper for PSPDFKit for iOS, Android & Windows UWP. (PDF SDK for React Native)

This wrapper requires a valid license of PSPDFKit. Licenses are per platform. You can request a trial license here.

This wrapper exposes the most often used APIs from PSPDFKit. Many of our partners end up forking this wrapper and adding some custom code to achieve even greater integration with their products, using native code.

Windows is not currently supported, please use the previous version 1.24.9 instead.

Announcements

• Announcement blog post
• React Native UI Component for iOS (See iOS)
• React Native UI Component for Android (See Android)
• PSPDFKit for Windows UWP with React Native (See Windows UWP)
• How to Extend React Native APIs
• Advanced Techniques for React Native UI Components
• How to Extend React Native APIs for Windows

PSPDFKit

The PSPDFKit SDK is a framework that allows you to view, annotate, sign, and fill PDF forms on iOS, Android, Windows, macOS, and Web.

PSPDFKit Instant adds real-time collaboration features to seamlessly share, edit, and annotate PDF documents.

iOS

Requirements

• Xcode 11
• PSPDFKit 9.0.0 for iOS or later
• react-native >= 0.60.5
• CocoaPods >= 1.7.5

Getting Started

Let's create a simple app that integrates PSPDFKit and uses the react-native-pspdfkit module.

1. Make sure react-native-cli is installed: yarn global add react-native-cli
2. Create the app with react-native init YourApp.
3. Step into your newly created app folder: cd YourApp
4. Install react-native-pspdfkit from GitHub: yarn add github:PSPDFKit/react-native
5. Install all the dependencies for the project: yarn install. (Because of a bug you may need to clean yarn's cache with yarn cache clean before.)
6. Open ios/Podile in a text editor: open ios/Podfile, update the platform to iOS 11, and add your CocoaPods URL.

- platform :ios, '9.0'
+ platform :ios, '11.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'YourApp' do
  # Pods for YourApp
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/React'
  pod 'React-DevSupport', :path => '../node_modules/react-native/React'
  pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

+ pod 'react-native-pspdfkit', :path => '../node_modules/react-native-pspdfkit'
+ pod 'PSPDFKit', podspec: 'https://customers.pspdfkit.com/cocoapods/YOUR_COCOAPODS_KEY_GOES_HERE/pspdfkit/latest.podspec'

  use_native_modules!
end

7. cd ios then run pod install.
8. Open YourApp.xcworkspace in Xcode: open YourApp.xcworkspace.
9. Make sure the deployment target is set to 11.0 or higher:
10. Change "View controller-based status bar appearance" to YES in Info.plist:
11. If your application is targeting iOS versions prior to iOS 12.2 and your application does not already contain any Swift code, then you need to make sure Xcode bundles Swift standard libraries with your application distribution. To to so, open your target Build Settings and enable Always Embed Swift Standard Libraries:
12. Add a PDF by drag and dropping it into your Xcode project (Select "Create groups" and add to target "YourApp"). This will add the document to the "Copy Bundle Resources" build phase:
13. Replace the default component from App.js with a simple touch area to present the bundled PDF. (Note that you can also use a Native UI Component to show a PDF.)

import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  NativeModules,
  Text,
  TouchableHighlight,
  View
} from "react-native";

const PSPDFKit = NativeModules.PSPDFKit;

PSPDFKit.setLicenseKey("INSERT_YOUR_LICENSE_KEY_HERE");

// Change 'YourApp' to your app's name.
export default class YourApp extends Component<Props> {
  _onPressButton() {
    PSPDFKit.present("document.pdf", {});
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this._onPressButton}>
          <Text style={styles.text}>Tap to Open Document</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  text: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  }
});

// Change both 'YourApp's to your app's name.
AppRegistry.registerComponent("YourApp", () => YourApp);

Your app is now ready to launch. Run the app in Xcode or go back to the Terminal, then run cd .., and react-native run-ios.

Usage

There are 2 different ways on how to use the PSPDFKit React Native wrapper on iOS.

• Present a document via a Native Module modally.
• Show a PSPDFKit view via a Native UI component.

Depending on your needs you might want to use one or the other.

Native Module

Using the Native Module (PSPDFKit.present()), you can present a document with PSPDFKit modally in fullscreen. You can specify the path to the document you want to present, and configuration options.

import React, { Component } from "react";
import { NativeModules, Text, TouchableHighlight, View } from "react-native";

var PSPDFKit = NativeModules.PSPDFKit;
PSPDFKit.setLicenseKey("YOUR_LICENSE_KEY_GOES_HERE");

export default class App extends Component<{}> {
  _onPressButton() {
    PSPDFKit.present("document.pdf", {
      pageTransition: "scrollContinuous",
      scrollDirection: "vertical",
      documentLabelEnabled: true
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this._onPressButton}>
          <Text style={styles.text}>Tap to Open Document</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

Native UI Component

With PSPDFKitView you can use PSPDFKit like any other React component in your app. Using this approach, you have more flexibility over how a document is presented and displayed.

The layout is completely flexible, and can be adjust with flexbox. Note that you still need to set your license key with the Native Module.

For all the props that you can pass to PSPDFKitView, have a look at the source documentation.

This is how you would show a PDF as a React component:

import React, { Component } from "react";
import { NativeModules } from "react-native";
import PSPDFKitView from "react-native-pspdfkit";

var PSPDFKit = NativeModules.PSPDFKit;
PSPDFKit.setLicenseKey("YOUR_LICENSE_KEY_GOES_HERE");

export default class App extends Component<{}> {
  render() {
    return (
      <PSPDFKitView
        document={"document.pdf"}
        configuration={{
          pageTransition: "scrollContinuous",
          scrollDirection: "vertical",
          documentLabelEnabled: true
        }}
        style={{ flex: 1, color: "#267AD4" }}
      />
    );
  }
}

Configuration

You can configure the presentation with a configuration dictionary which is a mirror of the PSPDFConfiguration class.

Example - Native Module:

PSPDFKit.present("document.pdf", {
  thumbnailBarMode: "scrollable",
  pageTransition: "scrollContinuous",
  scrollDirection: "vertical"
});

Example - Native UI Component:

<PSPDFKitView
  document={"document.pdf"}
  configuration={{
    thumbnailBarMode: "scrollable",
    pageTransition: "scrollContinuous",
    scrollDirection: "vertical"
  }}
/>

Running Catalog Project

• Copy PSPDFKit.xcframework and PSPDFKitUI.xcframework into the PSPDFKit directory.
• Install dependencies: yarn install in samples/Catalog directory. (Because of a bug you may need to clean yarn's cache with yarn cache clean before.)
• Run the app with react-native-cli: react-native run-ios
• If you get an error about config.h not being found check out this blog post for information on how to fix it.

Configuration Mapping

The PSPDFKit React Native iOS Wrapper maps most configuration options available in PSPDFConfiguration from JSON. Please refer to RCTConvert+PSPDFConfiguration.m for the complete list and for the exact naming of enum values.

Annotations are mapped based on their type name. This is case sensitive. For example, to limit annotation types to ink and highlight, use this:

editableAnnotationTypes: ["Ink", "Highlight"];

Menu Item Mapping

The PSPDFKit React Native iOS Wrapper allows you to specify a custom grouping for the annotation creation toolbar. Please refer to RCTConvert+PSPDFAnnotationToolbarConfiguration.m for the complete list of menu items. To set them just specify the menuItemGrouping prop on the PSPDFKitView. The format used is as follows:

[
  menuItem,
  { key: menuItem, items: [subItem, subItem]},
  ...
]

Customize the Toolbar Buttons

You can customize the toolbar buttons on the Native UI View component by specifying the toolbar buttons using setLeftBarButtonItems and setRightBarButtonItems, like so:

pdfView.setRightBarButtonItems(
  ["thumbnailsButtonItem", "searchButtonItem", "annotationButtonItem"],
  "document",
  false
);

Please refer to RCTConvert+UIBarButtonItem.m for the complete list of bar button items.

Also, please take a look at the ToolbarCustomization example from our Catalog app.

For a more detailed description of toolbar customizations, refer to our Customizing the Toolbar guide for iOS and Android.

Android

Requirements

• Android SDK
• Android Build Tools 23.0.1 (React Native)
• Android Build Tools 28.0.3 (PSPDFKit module)
• Android Gradle plugin >= 3.4.1
• PSPDFKit >= 5.4.2
• react-native >= 0.60.4

Getting Started

Let's create a simple app that integrates PSPDFKit and uses the react-native-pspdfkit module.

1. Make sure react-native-cli is installed: yarn global add react-native-cli
2. Create the app with react-native init YourApp.
3. Step into your newly created app folder: cd YourApp.
4. Add react-native-pspdfkit module from GitHub: yarn add github:PSPDFKit/react-native.
5. Install all the dependencies for the project: yarn install. (Because of a bug you may need to clean yarn's cache with yarn cache clean before.)
6. Add PSPDFKit repository to YourApp/android/build.gradle so PSPDFKit library can be downloaded:

 allprojects {
     repositories {
         mavenLocal()
+        maven {
+            url 'https://customers.pspdfkit.com/maven/'
+            credentials {
+                username 'pspdfkit'
+                password 'YOUR_MAVEN_KEY_GOES_HERE'
+            }
+        }
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
             url "$rootDir/../node_modules/react-native/android"
         }
         maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
         }

         google()
         jcenter()
     }
 }

7. PSPDFKit targets modern platforms, so you'll have to set the minSdkVersion to 19. In YourApp/android/build.gradle:

...
 buildscript {
     ext {
         buildToolsVersion = "28.0.3"
-        minSdkVersion = 16
+        minSdkVersion = 19
         compileSdkVersion = 28
         targetSdkVersion = 28
         supportLibVersion = "28.0.0"
...

8. We will also need to enable MultiDex support. In YourApp/android/app/build.gradle:

...
  defaultConfig {
      applicationId "com.yourapp"
      minSdkVersion rootProject.ext.minSdkVersion
      targetSdkVersion rootProject.ext.targetSdkVersion
      versionCode 1
      versionName "1.0"
+     multiDexEnabled true
  }
...

9. Enter your PSPDFKit license key into YourApp/android/app/src/main/AndroidManifest.xml file:

   <application>
      ...

+      <meta-data
+          android:name="pspdfkit_license_key"
+          android:value="YOUR_LICENSE_KEY_GOES_HERE"/>

   </application>

10. Set primary color. In YourApp/android/app/src/main/res/values/styles.xml replace

<!-- Customize your theme here. -->

with

<item name="colorPrimary">#3C97C9</item>

11. Replace the default component from YourApp/App.js with a simple touch area to present a PDF document from the local device filesystem:

import React, { Component } from "react";
import {
  StyleSheet,
  NativeModules,
  Text,
  TouchableOpacity,
  View,
  PermissionsAndroid
} from "react-native";

var PSPDFKit = NativeModules.PSPDFKit;

const DOCUMENT = "file:///sdcard/document.pdf";
const CONFIGURATION = {
  scrollContinuously: false,
  showPageNumberOverlay: true,
  pageScrollDirection: "vertical"
};

// Change 'YourApp' to your app's name.
export default class YourApp extends Component<{}> {
  _onPressButton() {
    requestExternalStoragePermission();
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>{PSPDFKit.versionString}</Text>
        <TouchableOpacity onPress={this._onPressButton}>
          <Text style={styles.text}>Tap to Open Document</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

async function requestExternalStoragePermission() {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log("Write external storage permission granted");
      PSPDFKit.present(DOCUMENT, CONFIGURATION);
    } else {
      console.log("Write external storage permission denied");
    }
  } catch (err) {
    console.warn(err);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  text: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  }
});

12. Before launching the app you need to copy a PDF document onto your development device or emulator.

    adb push /path/to/your/document.pdf /sdcard/document.pdf

13. Your app is now ready to launch. From YourApp directory run react-native run-android.

    react-native run-android

Running Catalog Project

1. Clone the repository. git clone https://github.com/PSPDFKit/react-native.git.
2. Install dependencies: run yarn install from samples/Catalog directory. (Because of a bug you may need to clean yarn's cache with yarn cache clean before.)
3. Add your customer portal password to samples/Catalog/android/build.gradle:

      maven {
          url 'https://customers.pspdfkit.com/maven/'

          credentials {
              username 'pspdfkit'
              password 'YOUR_MAVEN_PASSWORD_GOES_HERE'
          }
      }

4. Update license key in samples/Catalog/android/app/src/main/AndroidManifest.xml:

   <application>
      ...

      <meta-data
          android:name="pspdfkit_license_key"
          android:value="YOUR_LICENSE_KEY_GOES_HERE"/>

   </application>

5. Catalog app is now ready to launch. From samples/Catalog directory run react-native run-android.

Configuration

Upload PDF to device

To copy a pdf document to your local device storage:

adb push "document.pdf" "/sdcard/document.pdf"

Bundle PDF inside the APK's assets

To bundle a pdf document in the Android app, simply copy it the Android assets folder, for the Catalog app is samples/PDFs.

Viewer options

You can configure the builder with a dictionary representation of the PSPDFConfiguration object. Check ConfigurationAdapter.java for all the parameters available.

const CONFIGURATION = {
  startPage: 3,
  scrollContinuously: false,
  showPageNumberOverlay: true,
  grayScale: true,
  showPageLabels: false,
  pageScrollDirection: "vertical"
};

Native UI Component

Just like on iOS we also support integrating PSPDFKit directly into the react-native view hierarchy. There are a few thing you need to consider when using this approach:

• Your activity hosting the react component needs to extend from ReactFragmentActivity.
• Because of issues in react-native our PdfView needs to call layout and dispatchOnGlobalLayout on every frame, this might negatively affect your apps performance or even cause it to misbehave.
• PSPDFKitView doesn't yet support all the features (outline, bookmarks, thubmnail grid, view settings) using PSPDFKit.present provides.

Menu Item Mapping

The PSPDFKit React Native Android Wrapper allows you to specify a custom grouping for the annotation creation toolbar. Please refer to ReactGroupingRule.java for the complete list of menu items. To set them just specify the menuItemGrouping prop on the PSPDFKitView. The format used is as follows:

[
  menuItem,
  { key: menuItem, items: [subItem, subItem]},
  ...
]

Update

Upgrading yarn's lock file is required in order to update react-native-pspdfkit module in a project that has been already setup following the steps in Getting Started section.
From root project folder (e.g.YourApp for upgrading example project) launch yarn upgrade.

Migrate from PSPDFKit version 2.9.x to 3.0.0

After launching yarn upgrade, apply step 7, step 10 and step 12 from Getting Started section.
Enable MultiDex in YourApp/android/app/build.gradle (note one place to edit):

...
android {
    compileSdkVersion 25
    buildToolsVersion "25.0.2"

defaultConfig {
    applicationId "com.yourapp"
+   multiDexEnabled true
    minSdkVersion 16
    targetSdkVersion 25
    versionCode 1
    versionName "1.0"
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
}
...

Remove pspdfkit-lib folder in YourApp/android/.
In YourApp/android/settings.gradle remove the old reference to pspdfkit-lib (note one place to edit):

 project(':react-native-pspdfkit').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-pspdfkit/android')
 include ':app'
-include ':pspdfkit-lib'

Migrate from PSPDFKit version 3.3.3 to 4.0.x

After launching yarn upgrade, apply step 6, step 8 and step 10 from Getting Started section.
Enable MultiDex in YourApp/android/app/build.gradle (note four place to edit):

...
android {
-   compileSdkVersion 25
+   compileSdkVersion 26
-   buildToolsVersion "25.0.2"
+   buildToolsVersion "26.0.1"

defaultConfig {
    applicationId "com.yourapp"
    multiDexEnabled true
-   minSdkVersion 16
+   minSdkVersion 19
-   targetSdkVersion 25
+   targetSdkVersion 26
    versionCode 1
    versionName "1.0"
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
}
...

API

Constants

The following constants are available on the PSPDFKit export:

• versionString (String) PSPDFKit version number.

present(document : string, configuration : readable map) : void

Shows the pdf document from the local device filesystem, or your app's assets.

• file:///sdcard/document.pdf will open the document from local device filesystem.
• file:///android_asset/document.pdf will open the document from your app's assets.

configuration can be empty {}.

Windows UWP

Windows UWP is not currently supported, the following integration steps are for wrapper version 1.24.9.

Requirements

• Visual Studio Community 2017 or greater
• git
• cmake
• yarn
• PSPDFKit for Windows.vsix (installed)
• PowerShell

IMPORTANT : react-native-pspdfkit for windows does not yet support react-native 0.59.*. Currently [react-native-windows][https://github.com/microsoft/react-native-windows/releases] is not keeping up pace with react-native, where the last official release was 0.54.* and the last RC was 0.57.*. We have tested and require 0.57.0 to keep version aligned as much as possible.

Getting Started

Let's create a simple app that integrates PSPDFKit and uses the react-native-pspdfkit module.

1. Open PowerShell as administrator.
2. Make sure react-native-cli is installed: yarn global add react-native-cli.
3. Install Windows Tool for React Native: yarn add global windows-build-tools.
4. Open x64 Native Tools Command Prompt for VS 2017 program.
5. Create the app with react-native init --version=0.57.8 YourApp in a location of your choice.
6. Step into your newly created app folder: cd YourApp.
7. Install the Windows helper plugin: yarn add --dev rnpm-plugin-windows.
8. Install react-native-pspdfkit from GitHub: yarn add github:PSPDFKit/react-native#windows-1.11.0.
9. Install react-native-fs from GitHub: yarn add react-native-fs.
10. Install all modules for Windows: yarn install. (Because of a bug you may need to clean yarn's cache with yarn cache clean before.)
11. Initialize the windows project: react-native windows.
12. Link module react-native-pspdfkit: react-native link react-native-pspdfkit.
13. Link module react-native-fs: react-native link react-native-fs.
14. Open the Visual Studio solution in react-native\YourApp\windows.
15. Accept and install any required extensions when prompted.
16. If the settings window opens, click on Developer and select yes.
17. Mark PSPDFKit SDK and Visual C++ Runtime as dependencies for YourApp: Right click on YourApp -> Add -> Refererece... Click on Projects and tick ReactNativePSPDFKit. Click on Universal Windows -> Extensions and tick PSPDFKit for UWP and Visual C++ 2015 Runtime for Universal Windows Platform Apps then click ok.
18. Add an application resource to your Appl.xaml to reference your License key.

<rn:ReactApplication
    x:Class="Catalog.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:rn="using:ReactNative"
    RequestedTheme="Light">

+	<Application.Resources>
+		<ResourceDictionary>
+			<ResourceDictionary.MergedDictionaries>
+				<ResourceDictionary Source="License.xaml"/>
+			</ResourceDictionary.MergedDictionaries>
+		</ResourceDictionary>
+	</Application.Resources>

</rn:ReactApplication>

19. Create a new file resource called License.xaml with your PSPDFKit license key at the top level of the project. (Replace ENTER LICENSE KEY HERE with your key)

<ResourceDictionary
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

	<x:String x:Key="PSPDFKitLicense">ENTER LICENSE KEY HERE</x:String>

</ResourceDictionary>

20. Change the target SDK of YourApp to >= 10.0.17134 and Min Version to >= 10.0.15063 : Right Click on YourApp -> Properties. Go to Application and change Target Version to >= 10.0.17134 and change Min Version to >= 10.0.15063.
21. Save Changes: File -> Save All
22. Add the PSPDFKitView and PSPDFKit module into your App.windows.js file, and add a open button to allow the user to navigate the file system.

import React, { Component } from "react";
import {
  AppRegistry,
  StyleSheet,
  View,
  Text,
  NativeModules,
  Button
} from "react-native";

var PSPDFKitView = require("react-native-pspdfkit");
var PSPDFKit = NativeModules.ReactPSPDFKit;

export default class Catalog extends Component<{}> {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={styles.page}>
        <PSPDFKitView ref="pdfView" style={styles.pdfView} />
        <View style={styles.footer}>
          <View style={styles.button}>
            <Button onPress={() => PSPDFKit.OpenFilePicker()} title="Open" />
          </View>
          <Text style={styles.version}>
            SDK Version : {PSPDFKit.versionString}
          </Text>
        </View>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  page: {
    flex: 1,
    alignItems: "stretch",
    backgroundColor: "#eee"
  },
  pdfView: {
    flex: 1
  },
  button: {
    width: 100,
    margin: 20
  },
  footer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  version: {
    color: "#666666",
    margin: 20
  }
});

23. Now run the application on the command line: react-native run-windows.
24. Press Yes when PowerShell wants to run.
25. Type 'y' when asking if you want to install the certificate.

Running Catalog Project

1. Clone the repository. git clone https://github.com/PSPDFKit/react-native.git.
2. From the command promt cd react-native\samples\Catalog.
3. Make sure react-native-cli is installed: yarn global add react-native-cli.
4. Downgrade react-native package to 0.57.8. Edit package.json

  "dependencies": {
    "react-native-pspdfkit": "file:../../",
    "react": "16.8.3",
-   "react-native": "0.59.9",
+   "react-native": "0.57.8",
    "react-native-camera": "2.9.0",
    "react-native-fs": "2.13.3",

5. run yarn install. (Because of a bug you may need to clean yarn's cache with yarn cache clean before.)
6. Open the UWP catalog solution in react-native\samples\Catalog\windows.
7. Accept and install any required extensions when prompted.
8. If the settings windows opens, click on Developer and selected yes.
9. Create a new file resouce called License.xaml with your PSPDFKit license key at the top level of the project. (Replace ENTER LICENSE KEY HERE with your key)

	<ResourceDictionary
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

	  <x:String x:Key="PSPDFKitLicense">ENTER LICENSE KEY HERE</x:String>

	</ResourceDictionary>

9. From the command prompt run react-native run-windows.
10. Enter y to accept the certificate when prompted and allow socket access for reactive when prompted. (Note: On windows yarn does not link correctly, therefore any changes made in the ReactNativePSPDFKit project will have to be manually copied to the windows folder at the base of the repo in order to commit changes.)

API

Constants

The following constants are available on the PSPDFKit export:

• versionString (String) PSPDFKit version number.

OpenFilePicker() : void

Opens a file picker for the user to select a pdf from. When the user selects an item it will be displayed in the <PSPDFKitView>.

Present(document : string) : void

Opens a document in the available <PSPDFKitView>. If the element is not displayed Present will fail. The document has to be accessible by the application, for example needs to be located in the application assets.

PSPDFKit.Present("ms-appx:///Assets/pdf/Business Report.pdf");

Theming support

It is possible to theme/customize the PdfView with the use of a CSS file. To do this simple pass a Uri within the web context to the instantiated PSPDFKitPackage.

To see this in action, make the following changes in samples/Catalog/windows/Catalog/MainReactNativeHost.cs and run the catalog the catalog.

protected override List<IReactPackage> Packages => new List<IReactPackage>
{
    new MainReactPackage(),
-   new ReactNativePSPDFKit.PSPDFKitPackage(),
+   new ReactNativePSPDFKit.PSPDFKitPackage(new Uri("ms-appx-web:///Assets/css/greenTheme.css")),
    new RNFSPackage()
};

The code above will pass an asset held in the Catalog project's Assets/css to the web context of PSPDFKit for Windows. The file can then be used to theme the view.

For more information on CSS Customization in PSPDFKit for Windows please refer to CSS Customization

License

This project can be used for evaluation or if you have a valid PSPDFKit license.
All items and source code Copyright © 2010-2019 PSPDFKit GmbH.

See LICENSE for details.

Contributing

Please ensure you signed our CLA so we can accept your contributions.