Skip to content

Commit 2905ccd

Browse files
simoarpejuliangrosshauser
simoarpe
authored and
juliangrosshauser
committed
Update README.md
* Improve indentation for index.android.js example file. * Link react-native-pspdfkit module. * Installations steps for Android streamlined using automatic linking.
1 parent 610092d commit 2905ccd

File tree

1 file changed

+92
-125
lines changed

1 file changed

+92
-125
lines changed

‎README.md‎

Lines changed: 92 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,23 @@ Lets create a simple app that integrates `PSPDFKit.framework` and uses the `reac
1414
1. Make sure `react-native-cli` is installed: `yarn global add react-native-cli`
1515
2. Create the app with `react-native init YourApp`.
1616
3. Step into your newly created app folder: `cd YourApp`
17-
4. Install `react-native-pspdfkit` from GitHub: `react-native install github:PSPDFKit/react-native`
18-
5. Create the folder `ios/PSPDFKit` and copy `PSPDFKit.framework` into it.
19-
6. Open `ios/YourApp.xcodeproj` in Xcode: `open ios/YourApp.xcodeproj`
20-
7. Make sure the deployment target is set to 9.0 or higher:
17+
4. Install `react-native-pspdfkit` from GitHub: `yarn add github:PSPDFKit/react-native`
18+
5. Link module `react-native-pspdfkit`: `react-native link react-native-pspdfkit`
19+
6. Create the folder `ios/PSPDFKit` and copy `PSPDFKit.framework` into it.
20+
7. Open `ios/YourApp.xcodeproj` in Xcode: `open ios/YourApp.xcodeproj`
21+
8. Make sure the deployment target is set to 9.0 or higher:
2122
![Deployment Target](screenshots/deployment-target.png)
22-
8. Change "View controller-based status bar appearance" to `YES` in `Info.plist`:
23+
9. Change "View controller-based status bar appearance" to `YES` in `Info.plist`:
2324
![View Controller-Based Status Bar Appearance](screenshots/view-controller-based-status-bar-appearance.png)
24-
9. Open `node_modules/react-native-pspdfkit/ios` and drag and drop `RCTPSPDFKit.xcodproj` into the YourApp Xcode project:
25+
10. Open `node_modules/react-native-pspdfkit/ios` and drag and drop `RCTPSPDFKit.xcodproj` into the YourApp Xcode project:
2526
![Project Dependency](screenshots/project-dependency.png)
26-
10. Link with the `libRCTPSPDFKit.a` static library:
27+
11. Link with the `libRCTPSPDFKit.a` static library:
2728
![Linking Static Library](screenshots/linking-static-library.png)
28-
11. Embed `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 Framworks and Libraries" section:
29+
12. Embed `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 Framworks and Libraries" section:
2930
![Embedding PSPDFKit](screenshots/embedding-pspdfkit.png)
30-
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:
31+
13. 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:
3132
![Adding PDF](screenshots/adding-pdf.png)
32-
13. Replace the default component from `index.ios.js` with a simple touch area to present the bundled PDF:
33+
14. Replace the default component from `index.ios.js` with a simple touch area to present the bundled PDF:
3334

3435
```javascript
3536
import React, { Component } from 'react';
@@ -120,8 +121,9 @@ Let's create a simple app that integrates `pspdfkit-*.aar` and uses the react-na
120121
1. Make sure `react-native-cli` is installed: `yarn global add react-native-cli`
121122
2. Create the app with `react-native init YourApp`.
122123
3. Step into your newly created app folder: `cd YourApp`.
123-
4. Install `react-native-pspdfkit` from GitHub: `react-native install github:PSPDFKit/react-native`.
124-
5. Add dependencies to `YourApp/node_modules/react-native-pspdfkit/android/build.gradle`.
124+
4. Install `react-native-pspdfkit` from GitHub: `yarn add github:PSPDFKit/react-native`.
125+
5. Link module `react-native-pspdfkit`: `react-native link react-native-pspdfkit`.
126+
6. Add dependencies to `YourApp/node_modules/react-native-pspdfkit/android/build.gradle`.
125127

126128
A complete list of the dependencies needed can be found in the [documentation](https://pspdfkit.com/guides/android/current/getting-started/integrating-pspdfkit/#toc_manual-library-file-integration) step 6, under `Manual library file integration`.
127129
For PSPDFKit 2.9.3 :
@@ -141,30 +143,27 @@ dependencies {
141143
}
142144
```
143145

144-
6. Add the following lines to `YourApp/android/settings.gradle` file:
146+
7. Add the following lines to `YourApp/android/settings.gradle` file:
145147

146148
```
147149
include ':pspdfkit-lib'
148-
include ':react-native-pspdfkit'
149-
project(':react-native-pspdfkit').projectDir = new File(settingsDir, '../node_modules/react-native-pspdfkit/android')
150150
```
151151
152-
7. Create new `pspdfkit-lib` folder in `YourApp/android`.
153-
8. Create new `build.gradle` file in `YourApp/android/pspdfkit-lib` and add the following lines:
152+
8. Create new `pspdfkit-lib` folder in `YourApp/android`.
153+
9. Create new `build.gradle` file in `YourApp/android/pspdfkit-lib` and add the following lines:
154154

155155
```
156156
configurations.maybeCreate("default")
157-
def library = fileTree(".").filter { it.isFile()}.filter {it.name.endsWith('.aar')}.files.name.first()
157+
def library = fileTree(".").filter { it.isFile() }.filter { it.name.endsWith('.aar') }.files.name.first()
158158
artifacts.add("default", file(library))
159159
```
160160
161-
9. Copy `pspdfkit-*.aar` library in `YourApp/android/pspdfkit-lib`.
162-
10. Add the following dependencies to `YourApp/android/app/build.gradle` file:
161+
10. Copy `pspdfkit-*.aar` library in `YourApp/android/pspdfkit-lib`.
162+
11. Add the following dependencies to `YourApp/android/app/build.gradle` file:
163163

164164
```
165165
dependencies {
166166
...
167-
compile project(':react-native-pspdfkit')
168167
compile project(':pspdfkit-lib')
169168
}
170169
```
@@ -192,38 +191,6 @@ artifacts.add("default", file(library))
192191
}
193192
...
194193
```
195-
196-
11. Add `PSPDFKitPackage` to `MainApplication.java` in `YourApp/android/app/src/main/java/com/yourapp` (note **two** places to edit):
197-
198-
```diff
199-
package com.yourapp;
200-
201-
import android.app.Application;
202-
203-
import com.facebook.react.ReactApplication;
204-
import com.facebook.react.ReactNativeHost;
205-
import com.facebook.react.ReactPackage;
206-
import com.facebook.react.shell.MainReactPackage;
207-
import com.facebook.soloader.SoLoader;
208-
+ import com.pspdfkit.react.PSPDFKitPackage;
209-
.....
210-
public class MainApplication extends Application implements ReactApplication {
211-
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
212-
@Override
213-
public boolean getUseDeveloperSupport() {
214-
return BuildConfig.DEBUG;
215-
}
216-
@Override
217-
protected List<ReactPackage> getPackages() {
218-
return Arrays.<ReactPackage>asList(
219-
+ new PSPDFKitPackage(),
220-
new MainReactPackage()
221-
);
222-
}
223-
};
224-
.....
225-
}
226-
```
227194
228195
12. Set primary color. In `YourApp/android/app/src/main/res/values/styles.xml` replace
229196
```xml
@@ -234,81 +201,81 @@ with
234201
<item name="colorPrimary">#3C97C9</item>
235202
```
236203
13. Replace the default component from `YourApp/index.android.js` with a simple touch area to present a PDF document from the local device filesystem:
237-
238-
```javascript
239-
import React, { Component } from 'react';
240-
import {
241-
AppRegistry,
242-
StyleSheet,
243-
NativeModules,
244-
Text,
245-
TouchableHighlight,
246-
View,
247-
PermissionsAndroid
248-
} from 'react-native';
249-
250-
var PSPDFKit = NativeModules.PSPDFKit;
251-
252-
const DOCUMENT = "file:///sdcard/document.pdf";
253-
const LICENSE = "LICENSE_KEY_GOES_HERE";
254-
const CONFIGURATION = {
255-
scrollContinuously : false,
256-
showPageNumberOverlay : true,
257-
pageScrollDirection : "vertical"
258-
};
259-
260-
PSPDFKit.setLicenseKey(LICENSE);
261-
// Change 'YourApp' to your app's name.
262-
class YourApp extends Component {
263-
_onPressButton() {
264-
requestExternalStoragePermission();
265-
}
266-
267-
render() {
268-
return (
269-
<View style={styles.container}>
270-
<Text>{PSPDFKit.versionString}</Text>
271-
<TouchableHighlight onPress={this._onPressButton}>
272-
<Text style={styles.text}>Tap to Open Document</Text>
273-
</TouchableHighlight>
274-
</View>
275-
);
276-
}
277-
}
204+
205+
```javascript
206+
import React, { Component } from 'react';
207+
import {
208+
AppRegistry,
209+
StyleSheet,
210+
NativeModules,
211+
Text,
212+
TouchableHighlight,
213+
View,
214+
PermissionsAndroid
215+
} from 'react-native';
278216

279-
async function requestExternalStoragePermission() {
280-
try {
281-
const granted = await PermissionsAndroid.request(
282-
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
283-
)
284-
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
285-
console.log("Write external storage permission granted")
286-
PSPDFKit.present(DOCUMENT, CONFIGURATION);
287-
} else {
288-
console.log("Write external storage permission denied")
289-
}
290-
} catch (err) {
291-
console.warn(err)
292-
}
293-
}
217+
var PSPDFKit = NativeModules.PSPDFKit;
294218

295-
const styles = StyleSheet.create({
296-
container: {
297-
flex: 1,
298-
justifyContent: 'center',
299-
alignItems: 'center',
300-
backgroundColor: '#F5FCFF',
301-
},
302-
text: {
303-
fontSize: 20,
304-
textAlign: 'center',
305-
margin: 10,
306-
}
307-
});
219+
const DOCUMENT = "file:///sdcard/document.pdf";
220+
const LICENSE = "LICENSE_KEY_GOES_HERE";
221+
const CONFIGURATION = {
222+
scrollContinuously : false,
223+
showPageNumberOverlay : true,
224+
pageScrollDirection : "vertical"
225+
};
308226

309-
// Change both 'YourApp's to your app's name.
310-
AppRegistry.registerComponent('YourApp', () => YourApp);
311-
```
227+
PSPDFKit.setLicenseKey(LICENSE);
228+
// Change 'YourApp' to your app's name.
229+
class YourApp extends Component {
230+
_onPressButton() {
231+
requestExternalStoragePermission();
232+
}
233+
234+
render() {
235+
return (
236+
<View style={styles.container}>
237+
<Text>{PSPDFKit.versionString}</Text>
238+
<TouchableHighlight onPress={this._onPressButton}>
239+
<Text style={styles.text}>Tap to Open Document</Text>
240+
</TouchableHighlight>
241+
</View>
242+
);
243+
}
244+
}
245+
246+
async function requestExternalStoragePermission() {
247+
try {
248+
const granted = await PermissionsAndroid.request(
249+
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
250+
)
251+
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
252+
console.log("Write external storage permission granted")
253+
PSPDFKit.present(DOCUMENT, CONFIGURATION);
254+
} else {
255+
console.log("Write external storage permission denied")
256+
}
257+
} catch (err) {
258+
console.warn(err)
259+
}
260+
}
261+
262+
const styles = StyleSheet.create({
263+
container: {
264+
flex: 1,
265+
justifyContent: 'center',
266+
alignItems: 'center',
267+
backgroundColor: '#F5FCFF',
268+
},
269+
text: {
270+
fontSize: 20,
271+
textAlign: 'center',
272+
margin: 10,
273+
}
274+
});
275+
276+
// Change both 'YourApp's to your app's name.
277+
AppRegistry.registerComponent('YourApp', () => YourApp);
278+
```
312279
14. Before launching the app you need to copy a PDF document onto your development device or emulator.
313280

314281
```bash

0 commit comments

Comments
 (0)