Blog Post

PSPDFKit 馃挅 React Native

Illustration: PSPDFKit 馃挅 React Native

React Native enables you to build native mobile apps using a consistent developer experience based on JavaScript and React. It鈥檚 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.

See also: React Native UI Component for iOS, for Android and Windows UWP.

That鈥檚 why we just open sourced our React Native module on GitHub. Now, it鈥檚 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:

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鈥檚 easy to configure your PDF viewer. Simply pass a configuration dictionary into the PSPDFKit.present method:

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鈥檚 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鈥檚 open source, so you can customize it however you like. We鈥檙e looking forward to pull requests that extend and improve the module.

Share Post

Related Articles

Explore more
TUTORIALS  |  iOS 鈥 Development 鈥 How To 鈥 React Native 鈥 Objective-C

How to Bridge Native iOS Code to React Native

BLOG  |  Development 鈥 Cordova 鈥 Electron 鈥 Flutter 鈥 Ionic 鈥 React Native 鈥 Titanium 鈥 Xamarin

Advances in Hybrid Wrappers

BLOG  |  Windows 鈥 Development 鈥 How To 鈥 React Native

How to Extend React Native APIs for Windows