Requirements

The PSPDFKit React Native dependency is installed from the GitHub repository and not the npm registry. To install the PSPDFKit React Native dependency, run yarn add react-native-pspdfkit@github:PSPDFKit/react-native in your project directory or npm install github:PSPDFKit/react-native if you’re using npm.

• A development environment for running React Native projects using the React Native CLI (not the Expo CLI)

• The latest stable version of Android Studio

• The Android NDK

• An Android Virtual Device or a hardware device

• The latest stable version of Xcode

• The latest stable version of CocoaPods. If you don’t already have CocoaPods installed, follow the CocoaPods installation guide to install CocoaPods on your Mac.

Creating a new project

1. In the terminal, change the current working directory to where you’ll save your project. This example uses the pdf folder created in the home directory:

mkdir ~/pdf
cd ~/pdf

cd /d %userprofile%
mkdir pdf
cd pdf

2. Create the React Native project by running the following command:

npx react-native init PSPDFKitDemo

Installing the PSPDFKit dependency

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

cd PSPDFKitDemo

2. Add the PSPDFKit plugin:

yarn add react-native-pspdfkit@github:PSPDFKit/react-native

3. Install all the dependencies for the project:

yarn install

4. Open your project’s build.gradle file:

open android/build.gradle

5. Add the PSPDFKit repository to download the PSPDFKit library:

...
 allprojects {
     repositories {
         mavenLocal()
+        maven {
+            url 'https://my.nutrient.io/maven/'
+        }
...

6. Open the app’s build.gradle file:

open android/app/build.gradle

7. Modify the compile SDK version and the minimum SDK version:

...
android {
-  compileSdkVersion rootProject.ext.compileSdkVersion
+  compileSdkVersion 34
...
  defaultConfig {
      applicationId "com.pspdfkitdemo"
-     minSdkVersion rootProject.ext.minSdkVersion
+     minSdkVersion 21
      targetSdkVersion rootProject.ext.targetSdkVersion
      versionCode 1
      versionName "1.0"
  }
}
...

8. Open your project’s Podfile in a text editor to update the platform to iOS 15, 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, '11.0'
+ platform :ios, '15.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

  # 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

9. Change the location of the current working directory to the ios folder:

cd ios

10. Install the CocoaPods dependencies:

pod install

11. Open your project’s Workspace in Xcode:

open PSPDFKitDemo.xcworkspace

12. Make sure the deployment target is set to 15.0 or higher:

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

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.

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

cd ..

3. Create the assets directory:

mkdir android/app/src/main/assets

4. Copy a PDF document into your assets directory:

cp ~/Downloads/Document.pdf android/app/src/main/assets/Document.pdf

5. Open your App.js file:

open App.js

6. 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';
import { NativeModules } from 'react-native';

const PSPDFKit = NativeModules.PSPDFKit;
PSPDFKit.setLicenseKey(null);

const DOCUMENT =
  Platform.OS === 'ios' ? 'Document.pdf' : 'file:///android_asset/Document.pdf';
export default class PSPDFKitDemo extends Component<{}> {
  render() {
    var pdfRef: React.RefObject<PSPDFKitView> = React.createRef();
    return (
      <PSPDFKitView
        document={DOCUMENT}
        configuration={{
          showThumbnailBar: 'scrollable',
          pageTransition: 'scrollContinuous',
          scrollDirection: 'vertical',
        }}
        ref={pdfRef}
        fragmentTag="PDF1"
        style={{flex: 1}}
      />
    );
  }
}

7. The app is now ready to launch! Go back to the terminal app and run:

npx react-native run-android

npx react-native run-ios

Expo

If you’re using Expo, refer to the blog post that explains how to use PSPDFKit for React Native with Expo.

Next steps

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

• React Native UI Component for Android

• React Native UI Component for iOS

• Advanced Techniques for React Native UI Components

• How to Extend React Native APIs

• How to Bridge Native iOS Code to React Native

• How to Open a PDF in React Native Using the Document Picker

• How to Build a React Native PDF Viewer

Requirements

The PSPDFKit React Native dependency is installed from the GitHub repository and not the npm registry. To install the PSPDFKit React Native dependency, run yarn add react-native-pspdfkit@github:PSPDFKit/react-native in your project directory or npm install github:PSPDFKit/react-native if you’re using npm.

• A development environment for running React Native projects using the React Native CLI (not the Expo CLI)

• The latest stable version of Android Studio

• The Android NDK

• An Android Virtual Device or a hardware device

• The latest stable version of Xcode

• The latest stable version of CocoaPods. You can check your version of CocoaPods with pod --version.

• An existing React Native project that runs on both Android and iOS using the latest version of React Native

Installing the PSPDFKit dependency

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

cd path/to/YourProject

2. Add the PSPDFKit plugin:

yarn add react-native-pspdfkit@github:PSPDFKit/react-native

3. Install all the dependencies for the project:

yarn install

4. Open your project’s build.gradle file:

open android/build.gradle

5. Add the PSPDFKit repository to download the PSPDFKit library:

...
 allprojects {
     repositories {
         mavenLocal()
+        maven {
+            url 'https://my.nutrient.io/maven/'
+        }
...

6. Open the app’s build.gradle file:

open android/app/build.gradle

7. Modify the compile SDK version and the minimum SDK version:

...
android {
-  compileSdkVersion rootProject.ext.compileSdkVersion
+  compileSdkVersion 34
...
  defaultConfig {
      applicationId "com.pspdfkitdemo"
-     minSdkVersion rootProject.ext.minSdkVersion
+     minSdkVersion 21
      targetSdkVersion rootProject.ext.targetSdkVersion
      versionCode 1
      versionName "1.0"
  }
}
...

8. Open your project’s Podfile in a text editor to update the platform to iOS 15, 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, '11.0'
+ platform :ios, '15.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

  # 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

9. Change the location of the current working directory to the ios folder:

cd ios

10. Install the CocoaPods dependencies:

pod install

11. Open your project’s Workspace in Xcode:

open YourProject.xcworkspace

12. Make sure the deployment target is set to 15.0 or higher:

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

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.

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

cd ..

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

mkdir android/app/src/main/assets

4. Copy a PDF document into your assets directory:

cp ~/Downloads/Document.pdf android/app/src/main/assets/Document.pdf

6. Use the PSPDFKitView React component in your project:

import { Platform } from 'react-native';
import PSPDFKitView from 'react-native-pspdfkit';
import { NativeModules } from 'react-native';

...

const PSPDFKit = NativeModules.PSPDFKit;
PSPDFKit.setLicenseKey(null); // Or your valid license keys using `setLicenseKeys`.

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

...
var pdfRef: React.RefObject<PSPDFKitView> = React.createRef();
<PSPDFKitView
  document={DOCUMENT}
  configuration={{
    showThumbnailBar: 'scrollable',
    pageTransition: 'scrollContinuous',
    scrollDirection: 'vertical',
  }}
  ref={pdfRef}
  fragmentTag="PDF1"
  style={{flex: 1}}
/>

7. The app is now ready to launch! Go back to the terminal app and run:

npx react-native run-android

npx react-native run-ios

Expo

If you’re using Expo, refer to the blog post that explains how to use PSPDFKit for React Native with Expo.

Next steps

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

• React Native UI Component for Android

• React Native UI Component for iOS

• Advanced Techniques for React Native UI Components

• How to Extend React Native APIs

• How to Bridge Native iOS Code to React Native

• How to Open a PDF in React Native Using the Document Picker

• How to Build a React Native PDF Viewer

Requirements

The PSPDFKit React Native dependency is installed from the GitHub repository and not the npm registry. To install the PSPDFKit React Native dependency, run yarn add react-native-pspdfkit@github:PSPDFKit/react-native in your project directory or npm install github:PSPDFKit/react-native if you’re using npm.

• A development environment for running React Native projects using the React Native CLI (not the Expo CLI)

• The latest stable version of Android Studio

• The Android NDK

• An Android Virtual Device or a hardware device

• The latest stable version of Xcode

• The latest stable version of CocoaPods. You can check your version of CocoaPods with pod --version.

Cloning the Catalog sample project

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

git clone https://github.com/PSPDFKit/react-native.git

2. Change the current working directory to the Catalog directory:

cd react-native/samples/Catalog

3. Install the dependencies:

yarn install

4. From the iOS folder, run pod install to install all the iOS dependencies. Go back to the root directory once the command finishes successfully.

cd iOS
pod install
cd ..

5. The Catalog app is now ready to launch:

npx react-native run-android

npx react-native run-ios

Expo

If you’re using Expo, refer to the blog post that explains how to use PSPDFKit for React Native with Expo.

Next steps

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

• React Native UI Component for Android

• React Native UI Component for iOS

• Advanced Techniques for React Native UI Components

• How to Extend React Native APIs

• How to Bridge Native iOS Code to React Native

• How to Open a PDF in React Native Using the Document Picker

• How to Build a React Native PDF Viewer

Requirements

The PSPDFKit React Native dependency is installed from the GitHub repository and not the npm registry. To install the PSPDFKit React Native dependency, run yarn add react-native-pspdfkit@github:PSPDFKit/react-native in your project directory or npm install github:PSPDFKit/react-native if you’re using npm.

• A development environment for running React Native projects using the React Native CLI (not the Expo CLI)

• The latest stable version of Android Studio

• The Android NDK

• An Android Virtual Device or a hardware device

Creating a new project

1. In the terminal, change the current working directory to where you’ll save your project. This example uses the pdf folder created in the home directory:

mkdir ~/pdf
cd ~/pdf

cd /d %userprofile%
mkdir pdf
cd pdf

2. Create the React Native project by running the following command:

npx react-native init PSPDFKitDemo

Installing the PSPDFKit dependency

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

cd PSPDFKitDemo

2. Add the PSPDFKit plugin:

yarn add react-native-pspdfkit@github:PSPDFKit/react-native

3. Install all the dependencies for the project:

yarn install

4. Open your project’s build.gradle file:

open android/build.gradle

5. Add the PSPDFKit repository to download the PSPDFKit library:

...
 allprojects {
     repositories {
         mavenLocal()
+        maven {
+            url 'https://my.nutrient.io/maven/'
+        }
...

6. Open the app’s build.gradle file:

open android/app/build.gradle

7. Modify the compile SDK version and the minimum SDK version:

...
android {
-  compileSdkVersion rootProject.ext.compileSdkVersion
+  compileSdkVersion 34
...
  defaultConfig {
      applicationId "com.pspdfkitdemo"
-     minSdkVersion rootProject.ext.minSdkVersion
+     minSdkVersion 21
      targetSdkVersion rootProject.ext.targetSdkVersion
      versionCode 1
      versionName "1.0"
  }
}
...

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

3. Copy a PDF document into your assets directory:

cp ~/Downloads/Document.pdf android/app/src/main/assets/Document.pdf

4. Open your App.js file:

open App.js

5. 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';
import { NativeModules } from 'react-native';

const PSPDFKit = NativeModules.PSPDFKit;
PSPDFKit.setLicenseKey(null);

const DOCUMENT =
  Platform.OS === 'ios' ? 'Document.pdf' : 'file:///android_asset/Document.pdf';
export default class PSPDFKitDemo extends Component<{}> {
  render() {
    var pdfRef: React.RefObject<PSPDFKitView> = React.createRef();
    return (
      <PSPDFKitView
        document={DOCUMENT}
        configuration={{
          showThumbnailBar: 'scrollable',
          pageTransition: 'scrollContinuous',
          scrollDirection: 'vertical',
        }}
        ref={pdfRef}
        fragmentTag="PDF1"
        style={{flex: 1}}
      />
    );
  }
}

6. The app is now ready to launch! Go back to the terminal app and run:

npx react-native run-android

Expo

If you’re using Expo, refer to the blog post that explains how to use PSPDFKit for React Native with Expo.

Next steps

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

• React Native UI Component for Android

• Advanced Techniques for React Native UI Components

• How to Open a PDF in React Native Using the Document Picker

• How to Build a React Native PDF Viewer

Requirements

The PSPDFKit React Native dependency is installed from the GitHub repository and not the npm registry. To install the PSPDFKit React Native dependency, run yarn add react-native-pspdfkit@github:PSPDFKit/react-native in your project directory or npm install github:PSPDFKit/react-native if you’re using npm.

• A development environment for running React Native projects using the React Native CLI (not the Expo CLI)

• The latest stable version of Android Studio

• The Android NDK

• An Android Virtual Device or a hardware device

• An existing React Native project that runs on Android using the latest version of React Native

Installing the PSPDFKit dependency

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

cd path/to/YourProject

2. Add the PSPDFKit plugin:

yarn add react-native-pspdfkit@github:PSPDFKit/react-native

3. Install all the dependencies for the project:

yarn install

4. Open your project’s build.gradle file:

open android/build.gradle

5. Add the PSPDFKit repository to download the PSPDFKit library:

...
 allprojects {
     repositories {
         mavenLocal()
+        maven {
+            url 'https://my.nutrient.io/maven/'
+        }
...

6. Open the app’s build.gradle file:

open android/app/build.gradle

7. Modify the compile SDK version and the minimum SDK version:

...
android {
-  compileSdkVersion rootProject.ext.compileSdkVersion
+  compileSdkVersion 34
...
  defaultConfig {
      applicationId "com.pspdfkitdemo"
-     minSdkVersion rootProject.ext.minSdkVersion
+     minSdkVersion 21
      targetSdkVersion rootProject.ext.targetSdkVersion
      versionCode 1
      versionName "1.0"
  }
}
...

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

3. Copy a PDF document into your assets directory:

cp ~/Downloads/Document.pdf android/app/src/main/assets/Document.pdf

5. Use the PSPDFKitView React component in your project:

import { Platform } from 'react-native';
import PSPDFKitView from 'react-native-pspdfkit';
import { NativeModules } from 'react-native';

...

const PSPDFKit = NativeModules.PSPDFKit;
PSPDFKit.setLicenseKey(null); // Or your valid license keys using `setLicenseKeys`.

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

...
var pdfRef: React.RefObject<PSPDFKitView> = React.createRef();
<PSPDFKitView
  document={DOCUMENT}
  configuration={{
    showThumbnailBar: 'scrollable',
    pageTransition: 'scrollContinuous',
    scrollDirection: 'vertical',
  }}
  ref={pdfRef}
  fragmentTag="PDF1"
  style={{flex: 1}}
/>

6. The app is now ready to launch! Go back to the terminal app and run:

npx react-native run-android

Expo

If you’re using Expo, refer to the blog post that explains how to use PSPDFKit for React Native with Expo.

Next steps

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

• React Native UI Component for Android

• Advanced Techniques for React Native UI Components

• How to Open a PDF in React Native Using the Document Picker

• How to Build a React Native PDF Viewer

Requirements

The PSPDFKit React Native dependency is installed from the GitHub repository and not the npm registry. To install the PSPDFKit React Native dependency, run yarn add react-native-pspdfkit@github:PSPDFKit/react-native in your project directory or npm install github:PSPDFKit/react-native if you’re using npm.

• A development environment for running React Native projects using the React Native CLI (not the Expo CLI)

• The latest stable version of Android Studio

• The Android NDK

• An Android Virtual Device or a hardware device

Cloning the Catalog sample project

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

git clone https://github.com/PSPDFKit/react-native.git

2. Change the current working directory to the Catalog directory:

cd react-native/samples/Catalog

3. Install the dependencies:

yarn install

5. The Catalog app is now ready to launch:

npx react-native run-android

Expo

If you’re using Expo, refer to the blog post that explains how to use PSPDFKit for React Native with Expo.

Next steps

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

• React Native UI Component for Android

• Advanced Techniques for React Native UI Components

• How to Open a PDF in React Native Using the Document Picker

• How to Build a React Native PDF Viewer

Requirements

The PSPDFKit React Native dependency is installed from the GitHub repository and not the npm registry. To install the PSPDFKit React Native dependency, run yarn add react-native-pspdfkit@github:PSPDFKit/react-native in your project directory or npm install github:PSPDFKit/react-native if you’re using npm.

• A development environment for running React Native projects using the React Native CLI (not the Expo CLI)

• The latest stable version of Xcode

• The latest stable version of CocoaPods. If you don’t already have CocoaPods installed, follow the CocoaPods installation guide to install CocoaPods on your Mac.

Creating a new project

1. In the terminal, change the current working directory to where you’ll save your project. This example uses the pdf folder created in the home directory:

mkdir ~/pdf
cd ~/pdf

cd /d %userprofile%
mkdir pdf
cd pdf

2. Create the React Native project by running the following command:

npx react-native init PSPDFKitDemo

Installing the PSPDFKit dependency

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

cd PSPDFKitDemo

2. Add the PSPDFKit plugin:

yarn add react-native-pspdfkit@github:PSPDFKit/react-native

3. Install all the dependencies for the project:

yarn install

4. Open your project’s Podfile in a text editor to update the platform to iOS 15, 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, '11.0'
+ platform :ios, '15.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

  # 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

5. Change the location of the current working directory to the ios folder:

cd ios

6. Install the CocoaPods dependencies:

pod install

7. Open your project’s Workspace in Xcode:

open PSPDFKitDemo.xcworkspace

8. Make sure the deployment target is set to 15.0 or higher:

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

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.

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

cd ..

3. Open your App.js file:

open App.js

4. 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';
import { NativeModules } from 'react-native';

const PSPDFKit = NativeModules.PSPDFKit;
PSPDFKit.setLicenseKey(null);

const DOCUMENT =
  Platform.OS === 'ios' ? 'Document.pdf' : 'file:///android_asset/Document.pdf';
export default class PSPDFKitDemo extends Component<{}> {
  render() {
    var pdfRef: React.RefObject<PSPDFKitView> = React.createRef();
    return (
      <PSPDFKitView
        document={DOCUMENT}
        configuration={{
          showThumbnailBar: 'scrollable',
          pageTransition: 'scrollContinuous',
          scrollDirection: 'vertical',
        }}
        ref={pdfRef}
        fragmentTag="PDF1"
        style={{flex: 1}}
      />
    );
  }
}

5. The app is now ready to launch! Go back to the terminal app and run:

npx react-native run-ios

Expo

If you’re using Expo, refer to the blog post that explains how to use PSPDFKit for React Native with Expo.

Next steps

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

• PSPDFKit 💖 React Native

• React Native UI Component for iOS

• How to Extend React Native APIs

• How to Bridge Native iOS Code to React Native

• How to Open a PDF in React Native Using the Document Picker

• How to Build a React Native PDF Viewer

Requirements

The PSPDFKit React Native dependency is installed from the GitHub repository and not the npm registry. To install the PSPDFKit React Native dependency, run yarn add react-native-pspdfkit@github:PSPDFKit/react-native in your project directory or npm install github:PSPDFKit/react-native if you’re using npm.

• A development environment for running React Native projects using the React Native CLI (not the Expo CLI)

• The latest stable version of Xcode

• The latest stable version of CocoaPods. You can check your version of CocoaPods with pod --version.

• An existing React Native project that runs on iOS using the latest version of React Native

Installing the PSPDFKit dependency

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

cd path/to/YourProject

2. Add the PSPDFKit plugin:

yarn add react-native-pspdfkit@github:PSPDFKit/react-native

3. Install all the dependencies for the project:

yarn install

4. Open your project’s Podfile in a text editor to update the platform to iOS 15, 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, '11.0'
+ platform :ios, '15.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

  # 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

5. Change the location of the current working directory to the ios folder:

cd ios

6. Install the CocoaPods dependencies:

pod install

7. Open your project’s Workspace in Xcode:

open YourProject.xcworkspace

8. Make sure the deployment target is set to 15.0 or higher:

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

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.

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

cd ..

4. Use the PSPDFKitView React component in your project:

import { Platform } from 'react-native';
import PSPDFKitView from 'react-native-pspdfkit';
import { NativeModules } from 'react-native';

...

const PSPDFKit = NativeModules.PSPDFKit;
PSPDFKit.setLicenseKey(null); // Or your valid license keys using `setLicenseKeys`.

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

...
var pdfRef: React.RefObject<PSPDFKitView> = React.createRef();
<PSPDFKitView
  document={DOCUMENT}
  configuration={{
    showThumbnailBar: 'scrollable',
    pageTransition: 'scrollContinuous',
    scrollDirection: 'vertical',
  }}
  ref={pdfRef}
  fragmentTag="PDF1"
  style={{flex: 1}}
/>

5. The app is now ready to launch! Go back to the terminal app and run:

npx react-native run-ios

Expo

If you’re using Expo, refer to the blog post that explains how to use PSPDFKit for React Native with Expo.

Next steps

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

• PSPDFKit 💖 React Native

• React Native UI Component for iOS

• How to Extend React Native APIs

• How to Bridge Native iOS Code to React Native

• How to Open a PDF in React Native Using the Document Picker

• How to Build a React Native PDF Viewer

Requirements

The PSPDFKit React Native dependency is installed from the GitHub repository and not the npm registry. To install the PSPDFKit React Native dependency, run yarn add react-native-pspdfkit@github:PSPDFKit/react-native in your project directory or npm install github:PSPDFKit/react-native if you’re using npm.

• A development environment for running React Native projects using the React Native CLI (not the Expo CLI)

• The latest stable version of Xcode

• The latest stable version of CocoaPods. You can check your version of CocoaPods with pod --version.

Cloning the Catalog sample project

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

git clone https://github.com/PSPDFKit/react-native.git

2. Change the current working directory to the Catalog directory:

cd react-native/samples/Catalog

3. Install the dependencies:

yarn install

4. From the iOS folder, run pod install to install all the iOS dependencies. Go back to the root directory once the command finishes successfully.

cd iOS
pod install
cd ..

5. The Catalog app is now ready to launch:

npx react-native run-ios

Expo

If you’re using Expo, refer to the blog post that explains how to use PSPDFKit for React Native with Expo.

Next steps

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

• PSPDFKit 💖 React Native

• React Native UI Component for iOS

• How to Extend React Native APIs

• How to Bridge Native iOS Code to React Native

• How to Open a PDF in React Native Using the Document Picker

• How to Build a React Native PDF Viewer

Coming soon

Windows UWP is not currently supported. Follow the integration steps on the windows-support branch.