Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 9 commits into from
Jul 18, 2019
Merged

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

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e9e3d65
Update Podspec
Jul 16, 2019
60884e4
Update Framework search paths
Jul 16, 2019
6765602
Revert "Update Framework search paths"
Jul 16, 2019
c023294
Update Podspec again
Jul 16, 2019
3c3a9b3
Updare integration steps
Jul 16, 2019
e418119
Fix screenshot links
Jul 16, 2019
ff99a96
Prettify README
Jul 16, 2019
9574e03
💄
Jul 16, 2019
7d12fc4
Bump version to 1.24.7
Jul 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 61 additions & 40 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we don't support 0.59.9 at all anymore? We should rather write down all supported versions and mention these steps are for setting it up with 0.60.3

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the README should have the instructions for the latest version of React Native, as most people, when they try out our wrapper, will create a new app, and they'll be using the latest version of React Native.

If someone needs to use 0.59.9, we could always access the old instructions in the git history.

- 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`
Expand All @@ -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";
Expand All @@ -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() {
Expand All @@ -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

Expand Down
116 changes: 0 additions & 116 deletions ios/cocoapods.md
View file
Open in desktop

This file was deleted.

4 changes: 3 additions & 1 deletion react-native-pspdfkit.podspec
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Binary file removed screenshots/adding-to-react-native-pspdfkit.png
View file
Open in desktop
Binary file not shown.
Binary file removed screenshots/embedding-pspdfkit.png
View file
Open in desktop
Binary file not shown.
Binary file removed screenshots/linking-static-library.png
View file
Open in desktop
Binary file not shown.
Binary file removed screenshots/run-script-phase.png
View file
Open in desktop
Binary file not shown.