Merge pull request #257 from PSPDFKit/rad/cocoapods-integration

Update Integration Steps to use CocoaPods by default starting with React Native 0.60.x

Author: radazzouz

README.md

@@ -28,13 +28,12 @@ The [PSPDFKit SDK](https://pspdfkit.com/) is a framework that allows you to view
 #### Requirements
 
 - Xcode 10.2.1
-- PSPDFKit 8.4.0 for iOS or later
-- react-native >= 0.59.9
+- PSPDFKit 8.4.2 for iOS or later
+- react-native >= 0.60.3
+- CocoaPods >= 1.7.4
 
 #### Getting Started
 
-**Note:** If you want to integrate PSPDFKit using CocoaPods, use [these instructions](ios/cocoapods.md) instead.
-
 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`
@@ -43,30 +42,56 @@ Let's create a simple app that integrates PSPDFKit and uses the `react-native-ps
 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](https://github.com/yarnpkg/yarn/issues/2165) you may need to clean `yarn`'s cache with `yarn cache clean` before.)
 6. Link module `react-native-pspdfkit`: `react-native link react-native-pspdfkit`.
-7. Create the folder `ios/PSPDFKit` and copy `PSPDFKit.framework` and `PSPDFKitUI.framework` into it.
-8. Open `ios/YourApp.xcodeproj` in Xcode: `open ios/YourApp.xcodeproj`
-9. Make sure the deployment target is set to 11.0 or higher:
-   ![Deployment Target](screenshots/deployment-target.png)
-10. Change "View controller-based status bar appearance" to `YES` in `Info.plist`:
-    ![View Controller-Based Status Bar Appearance](screenshots/view-controller-based-status-bar-appearance.png)
-11. Link with the `libRCTPSPDFKit.a` static library (if `libRCTPSPDFKit.a` is already there but greyed out, delete it and link it again):
-    ![Linking Static Library](screenshots/linking-static-library.png)
-12. Embed `PSPDFKit.framework` and `PSPDFKitUI.framework` by drag and dropping it into the "Embedded Binaries" section of the "YourApp" target (Select "Create groups"). This will also add it to the "Linked Framworks and Libraries" section:
-    ![Embedding PSPDFKit](screenshots/embedding-pspdfkit.png)
-13. Add a new `Run Script Phase` in your target’s `Build Phases`.
-    **IMPORTANT:** Make sure this `Run Script Phase` is below the `Embed Frameworks` build phase.  
-    You can drag and drop build phases to rearrange them.  
-    Paste the following line in the script text field of `Run Script Phase`:
-
-```sh
-bash "$BUILT_PRODUCTS_DIR/$FRAMEWORKS_FOLDER_PATH/PSPDFKit.framework/strip-framework.sh"
-```
-
-![Run Script Phase](screenshots/run-script-phase.png)
+7. Open `ios/Podile` in a text editor: `open ios/Podfile`, update the platform to iOS 11, and add your CocoaPods URL.
 
-14. 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:
+```diff
+- 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
+```
+
+8. `cd ios` then run `pod install`.
+9. Open `YourApp.xcworkspace` in Xcode: `open YourApp.xcworkspace`.
+10. Make sure the deployment target is set to 11.0 or higher:
+    ![Deployment Target](screenshots/deployment-target.png)
+11. Change "View controller-based status bar appearance" to `YES` in `Info.plist`:
+    ![View Controller-Based Status Bar Appearance](screenshots/view-controller-based-status-bar-appearance.png)
+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:
     ![Adding PDF](screenshots/adding-pdf.png)
-15. 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](#native-ui-component) to show a PDF.)
+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](#native-ui-component) to show a PDF.)
 
 ```javascript
 import React, { Component } from "react";
@@ -80,15 +105,13 @@ import {
 } from "react-native";
 
 const PSPDFKit = NativeModules.PSPDFKit;
-PSPDFKit.setLicenseKey("YOUR_LICENSE_KEY_GOES_HERE");
 
-export default class App extends Component<Props> {
+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", {
-      pageTransition: "scrollContinuous",
-      scrollDirection: "vertical",
-      documentLabelEnabled: true
-    });
+    PSPDFKit.present("document.pdf", {});
   }
 
   render() {
@@ -109,20 +132,18 @@ const styles = StyleSheet.create({
     alignItems: "center",
     backgroundColor: "#F5FCFF"
   },
-  welcome: {
+  text: {
     fontSize: 20,
     textAlign: "center",
     margin: 10
-  },
-  instructions: {
-    textAlign: "center",
-    color: "#333333",
-    marginBottom: 5
   }
 });
+
+// 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 type `react-native run-ios` in the terminal.
+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
 

ios/cocoapods.md

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

package-lock.json

@@ -9,10 +9,12 @@ Pod::Spec.new do |s|
   s.authors		 = ["PSPDFKit"]
   s.homepage     = "https://github.com/PSPDFKit/react-native#readme"
   s.license      = package['license']
-  s.platform     = :ios, "10.0"
+  s.platform     = :ios, "11.0"
   s.module_name  = 'PSPDFKitReactNativeiOS'
   s.source       = { :git => "https://github.com/PSPDFKit/react-native" }
   s.source_files = "ios/*.{xcodeproj}", "ios/RCTPSPDFKit/*.{h,m,swift}", "ios/RCTPSPDFKit/Converters/*.{h,m,swift}"
   s.dependency 'React'
+  s.dependency 'PSPDFKit'
   s.frameworks = 'UIKit'
+  s.xcconfig = { 'FRAMEWORK_SEARCH_PATHS' => '/PSPDFKit/' }
 end

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Catalog",
-  "version": "1.24.6",
+  "version": "1.24.7",
   "private": true,
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start"