react-native | React Native library for PSPDFKit for iOS , Android | iOS library

Let's create a simple app that integrates PSPDFKit and uses the react-native-pspdfkit module.
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
Create the React Native project by running the following command: react-native init PSPDFKitDemo
In the terminal app, change the location of the current working directory inside the newly created project: cd PSPDFKitDemo
Add the PSPDFKit library: yarn add github:PSPDFKit/react-native
Install all the dependencies for the project: yarn install
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
Change the location of the current working directory to the ios folder: cd ios
Install the CocoaPods dependencies: pod install
Open your project’s Workspace in Xcode: open PSPDFKitDemo.xcworkspace
Make sure the deployment target is set to 13.0 or higher:
Change View controller-based status bar appearance to YES in your project’s Info.plist:
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.
Change the location of the current working directory back to the root project folder: cd ..
Open your App.js file: open App.js
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={{ showThumbnailBar: "scrollable", pageTransition: "scrollContinuous", scrollDirection: "vertical", }} ref="pdfView" fragmentTag="PDF1" style={{ flex: 1 }} /> ); } }
The app is now ready to launch! Go back to the terminal app and run: react-native run-ios
Let's create a simple app that integrates PSPDFKit and uses the react-native-pspdfkit module.
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
Create the React Native project by running the following command: react-native init PSPDFKitDemo
In the terminal app, change the location of the current working directory inside the newly created project: cd PSPDFKitDemo
Add the PSPDFKit library: yarn add github:PSPDFKit/react-native
Install all the dependencies for the project: yarn install
Open your project’s build.gradle file: open android/build.gradle
Add the PSPDFKit repository to download the PSPDFKit library: ... allprojects { repositories { mavenLocal() + maven { + url 'https://customers.pspdfkit.com/maven/' + } ...
Open the app’s build.gradle file: open android/app/build.gradle
Enable multidex support: ... defaultConfig { applicationId 'com.pspdfkitdemo' minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName '1.0' + multiDexEnabled true } ...
Add the PDF document you want to display to your application. You can download this QuickStart Guide PDF as an example.
Create the assets directory: mkdir android/app/src/main/assets
Copy a PDF document into your assets directory: cp ~/Downloads/Document.pdf android/app/src/main/assets/Document.pdf
Open your App.js file: open App.js
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={{ showThumbnailBar: "scrollable", pageTransition: "scrollContinuous", scrollDirection: "vertical", }} ref="pdfView" fragmentTag="PDF1" style={{ flex: 1 }} /> ); } }
The app is now ready to launch! Go back to the terminal app and run: react-native run-android