PSPDFKit 💖 React Native

React Native enables you to build native mobile apps using a consistent developer experience based on JavaScript and React. It’s built by Facebook and already used by thousands of apps in production. Motivated by the momentum and popularity of React Native, we had to give its users an easy way to use PSPDFKit in their projects.

That’s why we just open sourced our React Native module on GitHub. Now, it's easy to present a full-featured PDF viewer in your React Native app. After you follow the installation steps from our README, you can present a PDF document like this:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  NativeModules,
  Text,
  TouchableHighlight,
  View
} from 'react-native';

var PSPDFKit = NativeModules.PSPDFKit;

PSPDFKit.setLicenseKey('INSERT_YOUR_LICENSE_KEY_HERE');

class ReactNativeApp extends Component {
  _onPressButton() {
    PSPDFKit.present('document.pdf', {})
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this._onPressButton}>
          <Text style={styles.text}>Tap to Open Document</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

AppRegistry.registerComponent('ReactNativeApp', () => ReactNativeApp);

All the heavy lifting is done by the PSPDFKit.present method.

PDF Presentation

Configuration

It’s easy to configure your PDF viewer. Simply pass a configuration dictionary into the PSPDFKit.present method:

1
2
3
4
5
PSPDFKit.present('document.pdf', {
  thumbnailBarMode: 'scrollable',
  pageTransition: 'scrollContinuous',
  scrollDirection: 'vertical'
})

Now the viewer uses continous vertical scrolling and a scrollable thumbnail bar:

Configuration

The configuration dictionary is a mirror of the PSPDFConfiguration class.

Android

With React Native it’s possible to write an iOS and Android app using the same code. To make this possible our module supports both iOS and Android. Follow our getting started guide for Android to run your app on an Android device.

Summary

You can find the PSPDFKit React Native module on GitHub. It’s open source, so you can customize it however you like. We’re looking forward to pull requests that extend and improve the module.

Related Articles