Merge pull request #339 from PSPDFKit/rad/native-catalog

Add "Native Catalog" with advanced integration examples on iOS

README.md

@@ -262,6 +262,10 @@ Example - Native UI Component:
 - 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](https://tuntunir.blogspot.com/2018/02/react-native-fatal-error-configh-file.html) for information on how to fix it.
 
+#### Running the Native Catalog
+
+Take a look at the [instructions to get started here](/samples/NativeCatalog/README.md#running-this-sample-on-ios).
+
 #### Running on Mac Catalyst
 
 Using PSPDFKit React Native Wrapper on Mac Catalyst is not fully supported yet. We plan on adding full support for Mac Catalyst as soon as React Native and CocoaPods will full support Mac Catalyst.
@@ -582,7 +586,7 @@ const styles = StyleSheet.create({
 
 #### Running the Native Catalog
 
-Take a look at the [instructions to get started here](https://github.com/PSPDFKit/react-native/tree/master/samples/NativeCatalog/README.md).
+Take a look at the [instructions to get started here](/samples/NativeCatalog/README.md#running-this-sample-on-android).
 
 #### Configuration
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-pspdfkit",
-  "version": "1.28.3",
+  "version": "1.28.4",
   "description": "A React Native module for the PSPDFKit library.",
   "keywords": [
     "react native",

samples/Catalog/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Catalog",
-  "version": "1.28.3",
+  "version": "1.28.4",
   "private": true,
   "scripts": {
     "start": "react-native start",

samples/NativeCatalog/.gitignore

@@ -57,3 +57,4 @@ buck-out/
 
 # CocoaPods
 /ios/Pods/
+/ios/Podfile.lock

samples/NativeCatalog/App.js

@@ -18,43 +18,58 @@ import {
 const CustomPdfView = requireNativeComponent('CustomPdfView');
 const PSPDFKit = NativeModules.PSPDFKit;
 
-const FORM_DOCUMENT = 'file:///sdcard/Form_example.pdf';
+const FORM_DOCUMENT =
+  Platform.OS === 'android'
+    ? 'file:///sdcard/Form_example.pdf'
+    : 'PDFs/Form_example.pdf';
 
 const examples = [
   {
     name: 'Manual Signing',
     description:
       'Shows how to start the signing flow using a react-native button linked to our CustomPdfView.',
     action: component => {
-      requestExternalStoragePermission(function() {
-        extractFromAssetsIfMissing('Form_example.pdf', function() {
-          component.props.navigation.navigate('ManualSigning');
+      if (Platform.OS === 'android') {
+        requestExternalStoragePermission(function() {
+          extractFromAssetsIfMissing('Form_example.pdf', function() {
+            component.props.navigation.navigate('ManualSigning');
+          });
         });
-      });
+      } else {
+        component.props.navigation.navigate('ManualSigning');
+      }
     },
   },
   {
     name: 'Watermark',
     description:
       'Shows how to watermark a PDF that is loaded in our CustomPdfView',
     action: component => {
-      requestExternalStoragePermission(function() {
-        extractFromAssetsIfMissing('Form_example.pdf', function() {
-          component.props.navigation.navigate('Watermark');
+      if (Platform.OS === 'android') {
+        requestExternalStoragePermission(function() {
+          extractFromAssetsIfMissing('Form_example.pdf', function() {
+            component.props.navigation.navigate('Watermark');
+          });
         });
-      });
+      } else {
+        component.props.navigation.navigate('Watermark');
+      }
     },
   },
   {
     name: 'Watermark on Startup',
     description:
       'Shows how to watermark a PDF as soon as it is loaded in our CustomPdfView',
     action: component => {
-      requestExternalStoragePermission(function() {
-        extractFromAssetsIfMissing('Form_example.pdf', function() {
-          component.props.navigation.navigate('WatermarkStartup');
+      if (Platform.OS === 'android') {
+        requestExternalStoragePermission(function() {
+          extractFromAssetsIfMissing('Form_example.pdf', function() {
+            component.props.navigation.navigate('WatermarkStartup');
+          });
         });
-      });
+      } else {
+        component.props.navigation.navigate('WatermarkStartup');
+      }
     },
   },
 ];
@@ -80,27 +95,31 @@ class ManualSigningScreen extends Component<{}> {
             });
           }}
         />
-        <View
+        <SafeAreaView
           style={{
             flexDirection: 'row',
-            height: 40,
             alignItems: 'center',
-            padding: 10,
           }}>
           <View>
             <Button
               onPress={() => {
                 // This will open the native signature dialog.
-                UIManager.dispatchViewManagerCommand(
-                  findNodeHandle(this.refs.pdfView),
-                  'startSigning',
-                  [],
-                );
+                if (Platform.OS === 'android') {
+                  UIManager.dispatchViewManagerCommand(
+                    findNodeHandle(this.refs.pdfView),
+                    'startSigning',
+                    [],
+                  );
+                } else {
+                  NativeModules.CustomPdfViewManager.startSigning(
+                    findNodeHandle(this.refs.pdfView),
+                  );
+                }
               }}
               title="Start Signing"
             />
           </View>
-        </View>
+        </SafeAreaView>
       </View>
     );
   }
@@ -127,27 +146,31 @@ class WatermarkScreen extends Component<{}> {
             });
           }}
         />
-        <View
+        <SafeAreaView
           style={{
             flexDirection: 'row',
-            height: 40,
             alignItems: 'center',
-            padding: 10,
           }}>
           <View>
             <Button
               onPress={() => {
-                // This will open the native signature dialog.
-                UIManager.dispatchViewManagerCommand(
-                  findNodeHandle(this.refs.pdfView),
-                  'createWatermark',
-                  [],
-                );
+                 // This will create a watermark in native code.
+                if (Platform.OS === 'android') {
+                  UIManager.dispatchViewManagerCommand(
+                    findNodeHandle(this.refs.pdfView),
+                    'createWatermark',
+                    [],
+                  );
+                } else {
+                  NativeModules.CustomPdfViewManager.createWatermark(
+                    findNodeHandle(this.refs.pdfView),
+                  );
+                }
               }}
               title="Create Watermark"
             />
           </View>
-        </View>
+        </SafeAreaView>
       </View>
     );
   }
@@ -158,7 +181,7 @@ class WatermarkStartupScreen extends Component<{}> {
     super(props);
     this.state = {
       // This tag tells our CustomPdfView to apply the watermark to the document before loading it.
-      documentPath: FORM_DOCUMENT+"|ADD_WATERMARK",
+      documentPath: FORM_DOCUMENT + '|ADD_WATERMARK',
     };
   }
 

samples/NativeCatalog/README.md

@@ -1,8 +1,8 @@
-## Native Catalog (Android)
+## Native Catalog
 
 This second, Android only, Catalog example serves to show you how you can leverage the `PdfView` in your own view manager to provide more advanced integrations with PSPDFKit while still using react-native where possible.
 
-### Running this Sample
+### Running this Sample on Android
 
 1. Clone the repository. `git clone https://github.com/PSPDFKit/react-native.git`.
 2. Install dependencies: run `yarn install` from `samples/NativeCatalog` directory.
@@ -19,14 +19,66 @@ maven {
 }
 ```
 
-4. Native Catalog app is now ready to launch. From `samples/NativeCatalog` directory run `react-native run-android`.
+4. The Native Catalog app is now ready to launch. From `samples/NativeCatalog` directory run `react-native run-android`.
+
+### Running this Sample on iOS
+
+1. Clone the repository. `git clone https://github.com/PSPDFKit/react-native.git`.
+2. Install dependencies: run `yarn install` from `samples/NativeCatalog` directory.
+3. Open `samples/NativeCatalog/ios/Podile` in a text editor: `open samples/NativeCatalog/ios/Podfile` and add your CocoaPods URL.
+
+```diff
+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'
++ pod 'PSPDFKit', podspec: 'https://customers.pspdfkit.com/cocoapods/USE_YOUR_OWN_COCOAPODS_KEY/pspdfkit/latest.podspec'
+
+  use_native_modules!
+end
+```
+
+4. `cd ios` then run `pod install`.
+5. The Native Catalog app is now ready to launch. From `samples/NativeCatalog` directory run `react-native run-ios`.
 
 ### Examples
 
 #### Manual Signing
 
-This example shows you how to use the `SignaturePickerFragment` and `SignatureSignerDialog` to digitally sign a document after a react button was pressed. The relevant part is the `performInkSigning` method in the `CustomPdfViewManager`.
+This example shows you how to use the `SignaturePickerFragment` and `SignatureSignerDialog` on Android and `PSPDFSignatureViewController` on iOS to digitally sign a document after a react button was pressed. The relevant part is the `performInkSigning` method in the `CustomPdfViewManager` on Android and `-[CustomPDFView startSigning]` on iOS.
 
 #### Watermark
 
-This example shows you how to use the `PdfProcessor` to put a watermark on the currently displayed document, save it to a new path, and display it. The relevant part is the `performWatermarking` method in the `CustomPdfViewManager`.
+This example shows you how to use the `PdfProcessor` on Android and `PSPDFRenderDrawBlock` on iOS to put a watermark on the currently displayed document, save it to a new path, and display it. The relevant part is the `performWatermarking` method in the `CustomPdfViewManager` and `-[CustomPDFViewcreateWatermarkAndReloadData:]` on iOS.
+
+#### Watermark on Startup
+
+This example shows you how to use the `PdfProcessor` on Android and `PSPDFRenderDrawBlock` on iOS to put a watermark on the currently displayed document on startup, save it to a new path, and display it. The relevant part is the `performWatermarking` method in the `CustomPdfViewManager` and `-[CustomPDFViewcreateWatermarkAndReloadData:]` on iOS.

samples/NativeCatalog/android/app/src/main/java/com/pspdfkit/nativecatalog/CustomPdfViewManager.java

@@ -185,7 +185,7 @@ public void receiveCommand(@NonNull PdfView root, String commandId, @Nullable Re
     }
 
     private void performInkSigning(@NonNull PdfView pdfView) {
-        pdfView.getFragment()
+        pdfView.getActivePdfFragment()
             .observeOn(AndroidSchedulers.mainThread())
             .subscribe(pdfFragment -> {
                 // We got our fragment.
@@ -269,7 +269,7 @@ public void onSigningCancelled() {
     }
 
     private void performWatermarking(@NonNull PdfView pdfView) {
-        pdfView.getFragment()
+        pdfView.getActivePdfFragment()
             .observeOn(AndroidSchedulers.mainThread())
             .subscribe(pdfFragment -> {
                 PdfDocument document = pdfFragment.getDocument();

samples/NativeCatalog/app.json

@@ -1,4 +1,4 @@
 {
   "name": "NativeCatalog",
   "displayName": "NativeCatalog"
-}
+}