You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+36-49
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
##React Native Library for PSPDFKit for iOS, Android & Windows UWP. (PDF SDK for React Native)
1
+
# React Native Library for PSPDFKit for iOS, Android & Windows UWP. (PDF SDK for React Native)
2
2
3
3

4
4
@@ -8,7 +8,7 @@ PSPDFKit for React Native exposes the most often used APIs from PSPDFKit. Many o
8
8
9
9
Windows is not currently supported, please use the previous version [1.24.9](https://github.com/PSPDFKit/react-native/releases/tag/1.24.9) instead.
10
10
11
-
####Announcements
11
+
### Announcements
12
12
13
13
-[Announcement blog post](https://pspdfkit.com/blog/2016/react-native-module/)
14
14
-[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))
@@ -22,13 +22,13 @@ Windows is not currently supported, please use the previous version [1.24.9](htt
22
22
-[How to Bridge Native iOS Code to React Native](https://pspdfkit.com/blog/2020/how-to-bridge-native-ios-code-to-react-native/)
23
23
-[How to Open a PDF in React Native Using the Document Picker](https://pspdfkit.com/blog/2021/how-to-open-a-pdf-in-react-native-using-the-document-browser/)
24
24
25
-
####PSPDFKit
25
+
### PSPDFKit
26
26
27
27
The [PSPDFKit SDK](https://pspdfkit.com/) is a framework that allows you to view, annotate, sign, and fill PDF forms on iOS, Android, Windows, macOS, and Web.
28
28
29
29
[PSPDFKit Instant](https://pspdfkit.com/instant) adds real-time collaboration features to seamlessly share, edit, and annotate PDF documents.
30
30
31
-
##Support, Issues and License Questions
31
+
# Support, Issues and License Questions
32
32
33
33
PSPDFKit offers support for customers with an active SDK license via https://pspdfkit.com/support/request/
34
34
@@ -49,15 +49,15 @@ To set the license key for the currently running platform, use:
- A [development environment](https://reactnative.dev/docs/environment-setup) for running React Native projects using the React Native CLI (not the Expo CLI)
57
57
- The [latest stable version of Xcode](https://apps.apple.com/us/app/xcode/id497799835?mt=12)
58
58
- The [latest stable version of CocoaPods](https://github.com/CocoaPods/CocoaPods/releases). If you don’t already have CocoaPods installed, follow the [CocoaPods installation guide](https://guides.cocoapods.org/using/getting-started.html#installation) to install CocoaPods on your Mac.
59
59
60
-
####Getting Started
60
+
### Getting Started
61
61
62
62
Let's create a simple app that integrates PSPDFKit and uses the `react-native-pspdfkit` module.
63
63
@@ -211,7 +211,7 @@ Let's create a simple app that integrates PSPDFKit and uses the `react-native-ps
211
211
react-native run-ios
212
212
```
213
213
214
-
###Usage
214
+
## Usage
215
215
216
216
There are 2 different ways on how to use PSPDFKit for React Native on iOS.
217
217
@@ -220,7 +220,7 @@ There are 2 different ways on how to use PSPDFKit for React Native on iOS.
220
220
221
221
Depending on your needs you might want to use one or the other.
222
222
223
-
###Native Module
223
+
## Native Module
224
224
225
225
Using the Native Module `PSPDFKit.present()`, you can present a document with PSPDFKit modally in fullscreen.
226
226
You can specify the path to the document you want to present, and [configuration options](#configuration).
You can configure the presentation with a configuration dictionary which is a mirror of the [`PSPDFConfiguration`](https://pspdfkit.com/api/ios/Classes/PSPDFConfiguration.html) class.
289
289
@@ -310,21 +310,21 @@ Example - Native UI Component:
310
310
/>
311
311
```
312
312
313
-
####Running the Catalog Project
313
+
### Running the Catalog Project
314
314
315
315
Take a look at the [instructions to get started here](/samples/Catalog/README.md#running-the-catalog-on-ios).
316
316
317
-
####Running the Native Catalog
317
+
### Running the Native Catalog
318
318
319
319
Take a look at the [instructions to get started here](/samples/NativeCatalog/README.md#running-this-sample-on-ios).
320
320
321
-
####Running on Mac Catalyst
321
+
### Running on Mac Catalyst
322
322
323
323
Using PSPDFKit for React Native on Mac Catalyst does not currently work due to a [Flipper and FlipperKit issue](https://github.com/facebook/react-native/issues/28810).
324
324
325
325
If you wish to run your project on Mac Catalyst, please try the [following workaround which removes everything related to Flipper and FlipperKit](https://github.com/facebook/react-native/issues/28810#issuecomment-623357732).
326
326
327
-
####Configuration Mapping
327
+
### Configuration Mapping
328
328
329
329
On iOS, PSPDFKit for React Native iOS maps most configuration options available in `PSPDFConfiguration` from JSON. Please refer to [`RCTConvert+PSPDFConfiguration.m`](./ios/RCTPSPDFKit/Converters/RCTConvert+PSPDFConfiguration.m#L267) for the complete list and for the exact naming of enum values.
330
330
@@ -334,7 +334,7 @@ Annotations are mapped based on their type name. This is case sensitive. For exa
334
334
editableAnnotationTypes: ["Ink", "Highlight"];
335
335
```
336
336
337
-
####Menu Item Mapping
337
+
### Menu Item Mapping
338
338
339
339
On iOS, PSPDFKit for React Native allows you to specify a custom grouping for the annotation creation toolbar. Please refer to [`RCTConvert+PSPDFAnnotationToolbarConfiguration.m`](./ios/RCTPSPDFKit/Converters/RCTConvert+PSPDFAnnotationToolbarConfiguration.m#L47) for the complete list of menu items. To set them just specify the `menuItemGrouping` prop on the `PSPDFKitView`. The format used is as follows:
340
340
@@ -346,7 +346,7 @@ On iOS, PSPDFKit for React Native allows you to specify a custom grouping for th
346
346
]
347
347
```
348
348
349
-
####Customize the Toolbar Buttons
349
+
### Customize the Toolbar Buttons
350
350
351
351
You can customize the toolbar buttons on the Native UI View component by specifying the toolbar buttons using `setLeftBarButtonItems` and `setRightBarButtonItems`, like so:
352
352
@@ -364,7 +364,7 @@ Also, please take a look at the [ToolbarCustomization example from our Catalog a
364
364
365
365
For a more detailed description of toolbar customizations, refer to our Customizing the Toolbar guide for [iOS](https://pspdfkit.com/guides/ios/current/customizing-the-interface/customizing-the-toolbar/) and [Android](https://pspdfkit.com/guides/android/current/customizing-the-interface/customizing-the-toolbar/).
366
366
367
-
####Process Annotations
367
+
### Process Annotations
368
368
369
369
PSPDFKit for React Native allows you to create a new document with processed (embedded, flattenned, removed, or printed) annotations on Android and iOS using the `PSPDFKit.processAnnotations(annotationChange, annotationType, sourceDocumentPath, processedDocumentPath)` function. In the snippet below, we add a button which flattens all the annotations of the document from the currently displayed `PSPDFKitView` in a newly processed PDF file:
370
370
@@ -416,16 +416,16 @@ PSPDFKit for React Native allows you to create a new document with processed (em
416
416
417
417
For a runnable example, please take a look at the [AnnotationProcessing example from our Catalog app](./samples/Catalog/Catalog.ios.js#L1032).
418
418
419
-
###Android
419
+
## Android
420
420
421
-
####Requirements
421
+
### Requirements
422
422
423
423
- A [development environment](https://reactnative.dev/docs/environment-setup) for running React Native projects using the React Native CLI (not the Expo CLI)
424
424
- The [latest stable version of Android Studio](https://developer.android.com/studio)
425
425
- The [Android NDK](https://developer.android.com/studio/projects/install-ndk)
426
426
- An [Android Virtual Device](https://developer.android.com/studio/run/managing-avds.html) or a hardware device
427
427
428
-
####Getting Started
428
+
### Getting Started
429
429
430
430
Let's create a simple app that integrates PSPDFKit and uses the `react-native-pspdfkit` module.
431
431
@@ -555,29 +555,29 @@ Let's create a simple app that integrates PSPDFKit and uses the `react-native-ps
555
555
react-native run-android
556
556
```
557
557
558
-
####Running the Catalog Project
558
+
### Running the Catalog Project
559
559
560
560
Take a look at the [instructions to get started here](/samples/Catalog/README.md#running-the-catalog-on-android).
561
561
562
-
####Running the Native Catalog
562
+
### Running the Native Catalog
563
563
564
564
Take a look at the [instructions to get started here](/samples/NativeCatalog/README.md#running-this-sample-on-android).
565
565
566
-
####Configuration
566
+
### Configuration
567
567
568
-
#####Upload PDF to device
568
+
#### Upload PDF to device
569
569
570
570
To copy a pdf document to your local device storage:
571
571
572
572
```bash
573
573
adb push "document.pdf""/sdcard/document.pdf"
574
574
```
575
575
576
-
#####Bundle PDF inside the APK's assets
576
+
#### Bundle PDF inside the APK's assets
577
577
578
578
To bundle a pdf document in the Android app, simply copy it the Android `assets` folder, for the Catalog app is `samples/PDFs`.
579
579
580
-
#####Viewer options
580
+
#### Viewer options
581
581
582
582
You can configure the builder with a dictionary representation of the PSPDFConfiguration object. Check [`ConfigurationAdapter.java`](https://github.com/PSPDFKit/react-native/blob/master/android/src/main/java/com/pspdfkit/react/ConfigurationAdapter.java) for all the parameters available.
583
583
@@ -592,15 +592,15 @@ const CONFIGURATION = {
592
592
};
593
593
```
594
594
595
-
####Native UI Component
595
+
### Native UI Component
596
596
597
597
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:
598
598
599
599
- Your activity hosting the react component needs to extend from `ReactFragmentActivity`.
600
600
- Because of [issues](https://github.com/facebook/react-native/issues/17968) 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.
601
601
-`PSPDFKitView` doesn't yet support all the features (outline, bookmarks, thubmnail grid, view settings) using `PSPDFKit.present` provides.
602
602
603
-
#####Menu Item Mapping
603
+
#### Menu Item Mapping
604
604
605
605
On Android, PSPDFKit for React Native allows you to specify a custom grouping for the annotation creation toolbar. Please refer to [`ReactGroupingRule.java`](https://github.com/PSPDFKit/react-native/blob/master/android/src/main/java/com/pspdfkit/react/menu/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:
606
606
@@ -612,12 +612,12 @@ On Android, PSPDFKit for React Native allows you to specify a custom grouping fo
612
612
]
613
613
```
614
614
615
-
####Update
615
+
### Update
616
616
617
617
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](#getting-started-1) section.
618
618
From root project folder (e.g.`YourApp` for upgrading example project) launch `yarn upgrade`.
619
619
620
-
#####Migrate from PSPDFKit version 2.9.x to 3.0.0
620
+
#### Migrate from PSPDFKit version 2.9.x to 3.0.0
621
621
622
622
After launching `yarn upgrade`, apply [step 7](#step-7), [step 10](#step-10) and [step 12](#step-12) from [Getting Started](#getting-started-1) section.
623
623
Enable MultiDex in `YourApp/android/app/build.gradle` (note **one** place to edit):
@@ -651,7 +651,7 @@ In `YourApp/android/settings.gradle` remove the old reference to `pspdfkit-lib`
651
651
-include ':pspdfkit-lib'
652
652
```
653
653
654
-
#####Migrate from PSPDFKit version 3.3.3 to 4.0.x
654
+
#### Migrate from PSPDFKit version 3.3.3 to 4.0.x
655
655
656
656
After launching `yarn upgrade`, apply [step 6](#step-6), [step 8](#step-8) and [step 10](#step-10) from [Getting Started](#getting-started-1) section.
657
657
Enable MultiDex in `YourApp/android/app/build.gradle` (note **four** place to edit):
@@ -680,26 +680,13 @@ defaultConfig {
680
680
...
681
681
```
682
682
683
-
#### API
684
-
685
-
##### Constants
686
-
687
-
The following constants are available on the PSPDFKit export:
683
+
## Windows UWP
688
684
689
-
-`versionString` (`String`) PSPDFKit version number.
Shows the pdf `document` from the local device filesystem, or your app's assets.
694
-
695
-
-`file:///sdcard/document.pdf` will open the document from local device filesystem.
696
-
-`file:///android_asset/document.pdf` will open the document from your app's assets.
697
-
698
-
`configuration` can be empty `{}`.
685
+
Windows UWP is not currently supported on `master`, please follow the integration steps on the [`windows-support`](https://github.com/PSPDFKit/react-native/tree/windows-support#windows-uwp) branch.
699
686
700
-
### Windows UWP
687
+
#Troubleshooting
701
688
702
-
Windows UWP is not currently supported on `master`, please follow the integration steps on the [`windows-support`](https://github.com/PSPDFKit/react-native/tree/windows-support#windows-uwp) branch.
689
+
For Troubleshooting common issues you might encounter when setting up PSPDFKit for React Native, please refer to the [Troubleshooting](https://pspdfkit.com/guides/react-native/troubleshoot/) section.
0 commit comments