Skip to content

Commit 3dbf30b

Browse files
author
Rad Azzouz
committed
Added the integration instructions in cocoapods.md
1 parent 8a4cde7 commit 3dbf30b

File tree

3 files changed

+121
-0
lines changed

3 files changed

+121
-0
lines changed

ios/cocoapods.md

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
Integrate PSPDFKit for React Native on iOS using CocoaPods
2+
3+
4+
1. Create the app with react-native init YourApp.
5+
2. Step into your newly created app folder: cd YourApp
6+
3. Install react-native-pspdfkit from GitHub: yarn add github:PSPDFKit/react-native#rad/podspec (#rad/podspec is temporary, as the change is only on that branch)
7+
4. IMPORTANT: Do not link module react-native-pspdfkit: Do not use react-native link react-native-pspdfkit
8+
5. Create the folder PSPDFKit and copy PSPDFKit.framework into it.
9+
6. Open ios/YourApp.xcodeproj in Xcode: open ios/YourApp.xcodeproj
10+
7. Make sure the deployment target is set to 9.0 or higher:
11+
deployment-target.png
12+
13+
1. Change "View controller-based status bar appearance" to YES in Info.plist:
14+
deployment-target.png
15+
16+
1. Change your bundle ID to match the one for which you have a PSPDFKit license
17+
2. Close the Xcode project
18+
3. Run react-native run-ios to make sure your app runs before adding PSPDFKit
19+
4. Go back to the terminal and run pod init
20+
5. Replace the content of your newly created Podfile with this:
21+
22+
23+
target 'YourApp' do
24+
# Native Navigation uses Swift, so this line is required!
25+
use_frameworks!
26+
27+
28+
pod 'react-native-pspdfkit', :path => '../node_modules/react-native-pspdfkit'
29+
30+
31+
# To use CocoaPods with React Native, you need to add this specific Yoga spec as well
32+
pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga/Yoga.podspec'
33+
34+
35+
# You don't necessarily need all of these subspecs, but this would be a typical setup.
36+
pod 'React', :path => '../node_modules/react-native', :subspecs => [
37+
'Core',
38+
'RCTText',
39+
'RCTNetwork',
40+
'RCTWebSocket', # needed for debugging
41+
'RCTAnimation',
42+
'RCTImage',
43+
'RCTNetwork',
44+
'BatchedBridge', # https://github.com/facebook/react-native/issues/14749
45+
# Add any other subspecs you want to use in your project
46+
]
47+
48+
49+
# Add any other dependencies here, including any 3rd party native libraries that you depend on for
50+
# React Native.
51+
end
52+
53+
54+
1. Run pod install
55+
2. Open the newly created workspace: YourApp.workspace
56+
3. Copy PSPDFKit into the Pods folder: YourApp/ios/Pods[a]
57+
4. Drag and drop if from the Finder into the RCTPSPDFKit group:
58+
drag-and-drop.png
59+
60+
1. Add it to the react-native-pspdfkit framework:
61+
add-to-react-native-pspdfkit.png
62+
63+
1. Embed YourApp/ios/PSPDFKit/PSPDFKit.framework (not the copy from YourApp/ios/Pods/PSPDFKit.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 Frameworks and Libraries" section:
64+
embedding-pspdfkit.png
65+
66+
1. 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:
67+
adding-pdf.png
68+
69+
1. Replace the default component from index.ios.js with a simple touch area to present the bundled PDF:
70+
71+
72+
import React, { Component } from 'react';
73+
import {
74+
AppRegistry,
75+
StyleSheet,
76+
NativeModules,
77+
Text,
78+
TouchableHighlight,
79+
View
80+
} from 'react-native';
81+
82+
var PSPDFKit = NativeModules.PSPDFKit;
83+
84+
PSPDFKit.setLicenseKey('INSERT_YOUR_LICENSE_KEY_HERE');
85+
86+
// Change 'YourApp' to your app's name.
87+
class YourApp extends Component {
88+
_onPressButton() {
89+
PSPDFKit.present('document.pdf', {})
90+
}
91+
92+
render() {
93+
return (
94+
<View style={styles.container}>
95+
<TouchableHighlight onPress={this._onPressButton}>
96+
<Text style={styles.text}>Tap to Open Document</Text>
97+
</TouchableHighlight>
98+
</View>
99+
);
100+
}
101+
}
102+
103+
const styles = StyleSheet.create({
104+
container: {
105+
flex: 1,
106+
justifyContent: 'center',
107+
alignItems: 'center',
108+
backgroundColor: '#F5FCFF',
109+
},
110+
text: {
111+
fontSize: 20,
112+
textAlign: 'center',
113+
margin: 10,
114+
}
115+
});
116+
117+
// Change both 'YourApp's to your app's name.
118+
AppRegistry.registerComponent('YourApp', () => YourApp);
119+
120+
121+
[a]Symlink does not work. We have to have two instances of PSPDFKit.framework on disk. We need to do better here.
83.4 KB
Loading
99.4 KB
Loading

0 commit comments

Comments
 (0)