Skip to content

Commit 784e0ab

Browse files
authored
Update readme for UWP (#113)
#112 As per the request above, there were some mistakes with the step by step guide. This PR addresses these.
1 parent 98d45d4 commit 784e0ab

File tree

2 files changed

+33
-26
lines changed

2 files changed

+33
-26
lines changed

README.md

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ This wrapper requires a valid license of PSPDFKit. Licenses are per platform. Yo
77
* [Announcement blog post](https://pspdfkit.com/blog/2016/react-native-module/)
88
* [React Native UI Component for iOS](https://pspdfkit.com/blog/2018/react-native-ui-component-for-ios/) ([See iOS](https://github.com/PSPDFKit/react-native#ios))
99
* [React Native UI Component for Android](https://pspdfkit.com/blog/2018/react-native-ui-component-for-android/) ([See Android](https://github.com/PSPDFKit/react-native#android))
10-
* [PSPDFKit for Windows UWP with React Native](https://pspdfkit.com/2018/introducing-pspdfkit-windows/#react-native-for-windows-support) ([See Windows UWP](https://github.com/PSPDFKit/react-native#windows-uwp))
10+
* [PSPDFKit for Windows UWP with React
11+
Native](https://pspdfkit.com/blog/2018/introducing-pspdfkit-windows/#react-native-for-windows-support) ([See Windows UWP](https://github.com/PSPDFKit/react-native#windows-uwp))
1112

1213
#### PSPDFKit
1314

@@ -586,33 +587,25 @@ Let's create a simple app that integrates PSPDFKit and uses the react-native-psp
586587
2. Make sure `react-native-cli` is installed: `npm install -g react-native-cli`.
587588
3. Install Windows Tool for React Native: `npm install --global --production windows-build-tools`.
588589
4. Open `x64 Native Tools Command Prompt for VS 2017` program.
589-
5. Create the app with `react-native init YourApp` in a location of your choice.
590+
5. Create the app with `react-native init --version=0.53.0 YourApp` in a location of your choice.
590591
6. Step into your newly created app folder: `cd YourApp`.
591-
7. Edit `package.json` to change the version of `react-native` to `0.53.0`
592-
```diff
593-
"dependencies": {
594-
"react": "16.3.0-alpha.1",
595-
-"react-native": "0.55.4",
596-
+"react-native": "0.53.0",
597-
"react-native-pspdfkit": "github:PSPDFKit/react-native"
598-
},
599-
```
600-
8. Install the Windows helper plugin: `npm install --save-dev rnpm-plugin-windows`.
601-
9. Install `react-native-pspdfkit` from GitHub: `npm add github:PSPDFKit/react-native`.
602-
10. Install all modules: `npm install`.
603-
11. Link module `react-native-pspdfkit`: `react-native link react-native-pspdfkit`.
604-
12. Initialize the windows project: `react-native windows`.
605-
13. Install all modules for Windows: `npm install`.
606-
14. Open the windows solution in `react-native\YourApp\windows`.
607-
15. Accept and install any required extensions when prompted.
608-
16. If the settings window opens, click on `Developer` and select `yes`.
609-
17. Add `react-native-pspdfkit` to your soloution: Right click on the solution -> Add -> Existing Project. Navigate to `node_modules/react-native-pspdfkit/windows/ReactNativePSPDFKit/ReactNativePSPDFKit/` and select the `ReactNativePSPDFKit.csproj`
592+
7. Install the Windows helper plugin: `npm install --save-dev rnpm-plugin-windows`.
593+
8. Install `react-native-pspdfkit` from GitHub: `npm add github:PSPDFKit/react-native`.
594+
9. Link module `react-native-pspdfkit`: `react-native link react-native-pspdfkit`.
595+
10. Initialize the windows project: `react-native windows`.
596+
11. Install all modules for Windows: `npm install`.
597+
12. Open the Visual Studio solution in `react-native\YourApp\windows`.
598+
13. Accept and install any required extensions when prompted.
599+
14. If the settings window opens, click on `Developer` and select `yes`.
600+
15. Add `react-native-pspdfkit` to your soloution: Right click on the solution -> Add -> Existing Project.
601+
Navigate to `node_modules/react-native-pspdfkit/windows/ReactNativePSPDFKit/ReactNativePSPDFKit/` and select the `ReactNativePSPDFKit.csproj`
610602
![Deployment Target](screenshots/windowsAddExistingProject.PNG)
611-
18. Mark `react-native-pspdfkit`, `PSPDFKit SDK` and `Visual C++ Runtime` as dependancies 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.
603+
16. Mark `react-native-pspdfkit`, `PSPDFKit SDK` and `Visual C++ Runtime` as dependancies for `YourApp`:
604+
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.
612605
![Deployment Target](screenshots/windowsAddReferences.PNG)
613606
![Deployment Target](screenshots/windowsSelectRNPSPDFKit.PNG)
614607
![Deployment Target](screenshots/windowsSelectPSPDFKit+UWP.PNG)
615-
19. Add an application resource to your `Appl.xaml` to reference your License key.
608+
17. Add an application resource to your `Appl.xaml` to reference your License key.
616609
```diff
617610
<Application
618611
x:Class="Catalog.App"
@@ -631,7 +624,8 @@ Let's create a simple app that integrates PSPDFKit and uses the react-native-psp
631624
632625
</Application>
633626
```
634-
20. 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)
627+
18. Create a new file resouce called `License.xaml` with your PSPDFKit license key at the top level of the
628+
project. (Replace `ENTER LICENSE KEY HERE` with your key)
635629
```xaml
636630
<ResourceDictionary
637631
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
@@ -641,8 +635,21 @@ Let's create a simple app that integrates PSPDFKit and uses the react-native-psp
641635
642636
</ResourceDictionary>
643637
```
644-
21. Save Changes: File -> Save All
645-
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.
638+
19. Add `react-native-pspdfkit` to `YourApp` package list: open
639+
`MainReactNativeHost.cs` in `YourApp` project and add the following line.
640+
```diff
641+
protected override List<IReactPackage> Packages => new List<IReactPackage>
642+
{
643+
new MainReactPackage(),
644+
+ new ReactNativePSPDFKit.PSPDFKitPackage()
645+
};
646+
```
647+
20. Change the target SDK of YourApp to >= 10.0.16299 : Right Click on YourApp -> Properties. Go to
648+
Application and change Target Version to >= 10.0.16299.
649+
![Development Target](screenshots/changeVersionSDK.png)
650+
21. Save Changes: File -> Save All
651+
22. Add the `PSPDFKitView` and `PSPDFKit` module into your `App.windows.js` file, and add a open button to allow the user
652+
to navigate the file system.
646653
```
647654
import React, { Component } from 'react';
648655
import {

screenshots/changeVersionSDK.png

124 KB
Loading

0 commit comments

Comments
 (0)