Getting Started on React Native

Requirements

Creating a New React Native Project

  1. In the terminal app, change the current working directory to the location you wish to save your project. In this example, we’ll use the ~/Documents/ directory:

cd ~/Documents
  1. Create the React Native project by running the following command:

react-native init PSPDFKitDemo

Installing the PSPDFKit React Native Dependency

  1. In the terminal app, change the location of the current working directory inside the newly created project:

cd PSPDFKitDemo
  1. Add the PSPDFKit plugin:

yarn add github:PSPDFKit/react-native
  1. Install all the dependencies for the project:

yarn install
  1. Open your project’s build.gradle file:

open android/build.gradle
  1. Add the PSPDFKit repository to download the PSPDFKit library:

...
 allprojects {
     repositories {
         mavenLocal()
+        maven {
+            url 'https://customers.pspdfkit.com/maven/'
+        }
...
  1. Open the app’s build.gradle file:

open android/app/build.gradle
  1. Enable multidex support:

...
  defaultConfig {
      applicationId "com.pspdfkitdemo"
      minSdkVersion rootProject.ext.minSdkVersion
      targetSdkVersion rootProject.ext.targetSdkVersion
      versionCode 1
      versionName "1.0"
+     multiDexEnabled true
  }
...

Displaying a PDF

  1. Add the PDF document you want to display to your application. You can download this QuickStart Guide PDF as an example.

  2. Create the assets directory:

mkdir android/app/src/main/assets
  1. Copy a PDF document into your assets directory:

cp ~/Downloads/Document.pdf android/app/src/main/assets/Document.pdf
  1. Open your App.js file:

open App.js
  1. Replace the entire contents of App.js with the following code snippet:

import React, {Component} from 'react';
import {Platform} from 'react-native';
import PSPDFKitView from 'react-native-pspdfkit';

const DOCUMENT =
  Platform.OS === 'ios' ? 'Document.pdf' : 'file:///android_asset/Document.pdf';
export default class PSPDFKitDemo extends Component<{}> {
  render() {
    return (
      <PSPDFKitView
        document={DOCUMENT}
        configuration={{
          thumbnailBarMode: 'scrollable',
          pageTransition: 'scrollContinuous',
          scrollDirection: 'vertical',
        }}
        ref="pdfView"
        fragmentTag="PDF1"
        style={{flex: 1}}
      />
    );
  }
}
  1. The app is now ready to launch! Go back to the terminal app and run:

react-native run-android

Next Steps

To learn more about React Native, make sure to check out the following blog posts:

Requirements

Installing the PSPDFKit React Native Dependency

  1. Open the terminal app and change the location of the current working directory inside your project:

cd path/to/YourProject
  1. Add the PSPDFKit plugin:

yarn add github:PSPDFKit/react-native
  1. Install all the dependencies for the project:

yarn install
  1. Open your project’s build.gradle file:

open android/build.gradle
  1. Add the PSPDFKit repository to download the PSPDFKit library:

...
 allprojects {
     repositories {
         mavenLocal()
+        maven {
+            url 'https://customers.pspdfkit.com/maven/'
+        }
...
  1. Open the app’s build.gradle file:

open android/app/build.gradle
  1. Enable multidex support:

...
  defaultConfig {
      applicationId "com.pspdfkitdemo"
      minSdkVersion rootProject.ext.minSdkVersion
      targetSdkVersion rootProject.ext.targetSdkVersion
      versionCode 1
      versionName "1.0"
+     multiDexEnabled true
  }
...

Displaying a PDF

  1. Add the PDF document you want to display to your application. You can download this QuickStart Guide PDF as an example.

  2. Create the assets directory if you don’t have one already:

mkdir android/app/src/main/assets
  1. Copy a PDF document into your assets directory:

cp ~/Downloads/Document.pdf android/app/src/main/assets/Document.pdf
  1. Use the PSPDFKitView React component in your project:

const DOCUMENT =
  Platform.OS === 'ios' ? 'Document.pdf' : 'file:///android_asset/Document.pdf';

...

<PSPDFKitView
  document={DOCUMENT}
  configuration={{
    thumbnailBarMode: 'scrollable',
    pageTransition: 'scrollContinuous',
    scrollDirection: 'vertical',
  }}
  ref="pdfView"
  fragmentTag="PDF1"
  style={{flex: 1}}
/>
  1. The app is now ready to launch! Go back to the terminal app and run:

react-native run-android

Next Steps

To learn more about React Native, make sure to check out the following blog posts:

Requirements

Cloning the Catalog Sample Project

  1. Open the terminal app and clone the GitHub repository:

git clone https://github.com/PSPDFKit/react-native.git
cd react-native/samples/Catalog
  1. Install the dependencies:

yarn install
  1. Start your emulator.

  2. Start the Metro bundler by running react-native start within your project folder:

react-native start
  1. The Catalog app is now ready to launch:

react-native run-android

Next Steps

To learn more about React Native, make sure to check out the following blog posts:

Requirements

Creating a New React Native Project

  1. In the terminal app, change the current working directory to the location you wish to save your project. In this example, we’ll use the ~/Documents/ directory:

cd ~/Documents
  1. Create the React Native project by running the following command:

react-native init PSPDFKitDemo

Installing the PSPDFKit React Native Dependency

  1. In the terminal app, change the location of the current working directory inside the newly created project:

cd PSPDFKitDemo
  1. Add the PSPDFKit plugin:

yarn add github:PSPDFKit/react-native
  1. Install all the dependencies for the project:

yarn install
  1. Open your project’s Podfile in a text editor to update the platform to iOS 13, and add the PSPDFKit Podspec:

open ios/Podfile

Your Podfile should look like this:

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
- platform :ios, '10.0'
+ platform :ios, '13.0'

target 'PSPDFKitDemo' do
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => false
  )

  target 'PSPDFKitDemoTests' do
    inherit! :complete
    # Pods for testing
  end
+ pod 'react-native-pspdfkit', :path => '../node_modules/react-native-pspdfkit'
+ pod 'PSPDFKit', podspec: 'https://customers.pspdfkit.com/pspdfkit-ios/latest.podspec'
  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
  end
end
  1. Change the location of the current working directory to the ios folder:

cd ios
  1. Install the CocoaPods dependencies:

pod install
  1. Open your project’s Workspace in Xcode:

open PSPDFKitDemo.xcworkspace
  1. Make sure the deployment target is set to 13.0 or higher:

deployment-target

  1. Change View controller-based status bar appearance to YES in your project’s Info.plist:

view-controller-based-status-bar-appearance

Displaying a PDF

  1. Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.

drag-and-drop-document

  1. Change the location of the current working directory back to the root project folder:

cd ..
  1. Open your App.js file:

open App.js
  1. Replace the entire contents of App.js with the following code snippet:

import React, {Component} from 'react';
import {Platform} from 'react-native';
import PSPDFKitView from 'react-native-pspdfkit';

const DOCUMENT =
  Platform.OS === 'ios' ? 'Document.pdf' : 'file:///android_asset/Document.pdf';
export default class PSPDFKitDemo extends Component<{}> {
  render() {
    return (
      <PSPDFKitView
        document={DOCUMENT}
        configuration={{
          thumbnailBarMode: 'scrollable',
          pageTransition: 'scrollContinuous',
          scrollDirection: 'vertical',
        }}
        ref="pdfView"
        fragmentTag="PDF1"
        style={{flex: 1}}
      />
    );
  }
}
  1. The app is now ready to launch! Go back to the terminal app and run:

react-native run-ios

Next Steps

To learn more about React Native, make sure to check out the following blog posts:

Requirements

Installing the PSPDFKit React Native Dependency

  1. Open the terminal app and change the location of the current working directory inside your project:

cd path/to/YourProject
  1. Add the PSPDFKit plugin:

yarn add github:PSPDFKit/react-native
  1. Install all the dependencies for the project:

yarn install
  1. Open your project’s Podfile in a text editor to update the platform to iOS 13, and add the PSPDFKit Podspec:

open ios/Podfile

Your Podfile should look like this:

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
- platform :ios, '10.0'
+ platform :ios, '13.0'

target 'PSPDFKitDemo' do
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => false
  )

  target 'PSPDFKitDemoTests' do
    inherit! :complete
    # Pods for testing
  end
+ pod 'react-native-pspdfkit', :path => '../node_modules/react-native-pspdfkit'
+ pod 'PSPDFKit', podspec: 'https://customers.pspdfkit.com/pspdfkit-ios/latest.podspec'
  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
  end
end
  1. Change the location of the current working directory to the ios folder:

cd ios
  1. Install the CocoaPods dependencies:

pod install
  1. Open your project’s Workspace in Xcode:

open YourProject.xcworkspace
  1. Make sure the deployment target is set to 13.0 or higher:

deployment-target

  1. Change View controller-based status bar appearance to YES in your project’s Info.plist:

view-controller-based-status-bar-appearance

Displaying a PDF

  1. Add the PDF document you want to display to your application by dragging it into your project. On the dialog that’s displayed, select Finish to accept the default integration options. You can use this QuickStart Guide PDF as an example.

drag-and-drop-document

  1. Change the location of the current working directory back to the root project folder:

cd ..
  1. Use the PSPDFKitView React component in your project:

const DOCUMENT =
  Platform.OS === 'ios' ? 'Document.pdf' : 'file:///android_asset/Document.pdf';

...

<PSPDFKitView
  document={DOCUMENT}
  configuration={{
    thumbnailBarMode: 'scrollable',
    pageTransition: 'scrollContinuous',
    scrollDirection: 'vertical',
  }}
  ref="pdfView"
  fragmentTag="PDF1"
  style={{flex: 1}}
/>
  1. The app is now ready to launch! Go back to the terminal app and run:

react-native run-ios

Next Steps

To learn more about React Native, make sure to check out the following blog posts:

Requirements

Cloning the Catalog Sample Project

  1. Open the terminal app and clone the GitHub repository:

git clone https://github.com/PSPDFKit/react-native.git
  1. Change the current working directory to the newly cloned folder:

cd react-native
  1. Create a new PSPDFKit directory:

mkdir PSPDFKit
  1. Download the latest version of PSPDFKit for iOS and mount the DMG file.

  2. Copy PSPDFKit.xcframework and PSPDFKitUI.xcframework into the newly created PSPDFKit directory:

cp -r /Volumes/PSPDFKit/*/PSPDFKit.xcframework/ PSPDFKit/PSPDFKit.xcframework
cp -r /Volumes/PSPDFKit/*/PSPDFKitUI.xcframework/ PSPDFKit/PSPDFKitUI.xcframework
  1. Change the current working directory to the Catalog directory:

cd samples/Catalog
  1. Install the dependencies:

yarn install
  1. Start the Metro bundler by running react-native start within your project folder:

react-native start
  1. The Catalog app is now ready to launch:

react-native run-ios --simulator="iPad Pro (12.9-inch) (5th generation)"

Next Steps

To learn more about React Native, make sure to check out the following blog posts: