In this article, we delve into the process of creating a PDF viewer within React Native utilizing two PDF libraries: the open-source library React Native PDF, and the commercial SDK ComPDFKit for React Native.
What Is React Native & React Native PDF
React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to build cross-platform mobile applications using JavaScript. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. React Native makes it easy to simultaneously develop for both Android and iOS.
React Native PDF is a mature component for react native to view PDFs, and has been downloaded more than 104K times weekly. It provides the following features. If you need a simple library for viewing PDFs.
- Read a PDF from a URL, blob, local file, or asset and can cache it.
- Display horizontally or vertically.
- Drag and zoom.
- Double tap for zoom.
- Support password-protected PDF.
- Jump to a specific page in the PDF.
React Native PDF Tutorial: Create a PDF Viewer with React Native PDF
Create a 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.
2. Create the React Native project by running the following command:
react-native init compdfkit_rn
3. In the terminal app, change the location of the current working directory inside the newly created project:
cd compdfkit_rn
Add react-pdf
1. To make React Native PDF work you also need another library react native blob util. Install both libraries using the command given below.
npm install react-native-pdf react-native-blob-util --save
2. Also, don’t forget to run the pod install command inside the iOS folder. On Android, open android/app/build.gradle and add the following inside the android {} tag.
packagingOptions {
pickFirst 'lib/x86/libc++_shared.so'
pickFirst 'lib/x86_64/libjsc.so'
pickFirst 'lib/arm64-v8a/libjsc.so'
pickFirst 'lib/arm64-v8a/libc++_shared.so'
pickFirst 'lib/x86_64/libc++_shared.so'
pickFirst 'lib/armeabi-v7a/libc++_shared.so'
}
Display a PDF
Now, you can create a simple pdf viewer in react native as given below.
import React from 'react';
import {StyleSheet, Dimensions, View, Platform} from 'react-native';
import Pdf from 'react-native-pdf';
const source = {
uri: 'https://www.africau.edu/images/default/sample.pdf',
cache: true,
};
const App = () => {
return (
{
console.log(`number of pages: ${numberOfPages}`);
}}
onPageChanged={(page, numberOfPages) => {
console.log(`current page: ${page}`);
}}
onError={error => {
console.log(error);
}}
onPressLink={uri => {
console.log(`Link presse: ${uri}`);
}}
style={styles.pdf}
/>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
marginTop: 25,
},
pdf: {
flex: 1,
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
})
This Pdf component displays the PDF file and provides callbacks for various events, such as when the PDF file is completely loaded, when a page is changed, when an error occurs, and when a link is pressed.
Create a React Native PDF Viewer with ComPDFKit
You can follow the steps to integrate ComPDFKit for React Native.
Create a 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.
2. Create the React Native project by running the following command:
react-native init compdfkit_rn
3. In the terminal app, change the location of the current working directory inside the newly created project:
cd compdfkit_rn
Add ComPDFKit to Your Project
For iOS:
1. Open your project’s Podfile in a text editor:
open ios/Podfile
2. Update the platform to iOS 11 and add the ComPDFKit Podspec:
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, '11.0'
install! 'cocoapods', :deterministic_uuids => false
target 'PDFView_RN' do
config = use_native_modules!
# Flags change depending on the env values.
flags = get_default_flags()
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => flags[:hermes_enabled],
:fabric_enabled => flags[:fabric_enabled],
# An absolute path to your application root.
:app_path => "#{Pod::Config.instance.installation_root}/.."
)
target 'PDFView_RNTests' do
inherit! :complete
# Pods for testing
end
+ pod 'ComPDFKit_Tools', podspec:'https://www.compdf.com/download/ios/cocoapods/xcframeworks/compdfkit_tools/1.11.0.podspec'
+ pod 'ComPDFKit', podspec:'https://www.compdf.com/download/ios/cocoapods/xcframeworks/compdfkit/1.11.0.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)
__apply_Xcode_12_5_M1_post_install_workaround(installer)
end
end
3. Go to the compdfkit_rn/ios folder and run the pod install command:
pod install
4. Open your project’s Workspace in Xcode:
open ios/PDFView_RN.xcworkspace
5. Import resource file, CPDFViewController view controller that contains ready-to-use UI module implementations：
6. In the Build Settings search for "bridging" locate the Objective-C Bridging Header, and enter the file path for that header：
7. 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 “developer_guide_ios.pdf” as an example.
8. To protect user privacy, before accessing the sensitive privacy data, you need to find the Info configuration in your iOS 10.0 or higher iOS project and configure the relevant privacy terms as shown in the following picture.
NSCameraUsageDescription
Your consent is required before you could access the function.
NSMicrophoneUsageDescription
Your consent is required before you could access the function.
NSPhotoLibraryAddUsageDescription
Your consent is required before you could access the function.
NSPhotoLibraryUsageDescription
Your consent is required before you could access the function.
For Android:
1. Open the “android/build.gradle” file located in the project root directory and add the mavenCentral repository:
repositories {
google()
+ mavenCentral()
}
2. Open the app’s Gradle build file “android/app/build.gradle”:
open android/app/build.gradle
3. Modify the minimum SDK version, all this is done inside the android section:
android {
defaultConfig {
- minSdkVersion rootProject.ext.minSdkVersion
+ minSdkVersion 21
...
}
}
4. Add ComPDFKit SDK inside the dependencies section:
dependencies {
...
+ implementation 'com.compdf:compdfkit:1.11.0'
+ implementation 'com.compdf:compdfkit-ui:1.11.0'
+ implementation 'com.compdf:compdfkit-tools:1.11.0'
}
5. open “android/app/src/main/AndroidManifest.xml”, add ComPDFKit License and Storage Permission.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.compdfkit.flutter.example">
<!-- Required to read and write documents from device storage -->
+ <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+ <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<application
...>
...
<!-- Please replace it with your ComPDFKit license -->
+ <meta-data
+ android:name="compdfkit_key"
+ android:value="{your license key}" />
...
</application>
</manifest>
6. Enable viewBinding in the Android node setting of app/build.gradle.
android {
...
buildFeatures {
viewBinding = true
}
}
7. Copy the pdf folder and res/layout code from the sample project — Android project, to your project.
8. Open the MainApplication file and fill in the following code in the openDocumentgetPackages() method：
@Override
protected List getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List packages = new PackageList(this).getPackages();
+ packages.add(new PDFReactPackage());
return packages;
}
9. Add PDFActivity in “AndroidManifest.xml” file：
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.projectname">
<application
...>
...
+ <activity
+ android:name=".pdf.PDFActivity"
+ android:configChanges="keyboardHidden|orientation|screenSize"
+ android:windowSoftInputMode="adjustPan"
+ android:exported="true"/>
</activity>
</application>
10. Copy the sample pdf file to the assets directory:
11. Open your “App.tsx” file.
open App.tsx
12. Replace the entire contents of “App.tsx” with the following code.
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Button,
NativeModules
} from 'react-native';
var nativeModule = NativeModules.OpenNativeModule;
// var analyticsModule = NativeModules.UMAnalyticsModule;
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
// set disable functionality:
const configuration = {
"modeConfig": {
// setting the default display mode when opening
// viewer、annotations、contentEditor、forms、digitalSignatures
"initialViewMode": "viewer"
},
// top toolbar configuration:
"toolbarConfig": {
"androidAvailableActions": [
"thumbnail",
"search",
"bota",
"menu"
],
// ios top toolbar left buttons
"iosLeftBarAvailableActions":[
"back",
"thumbnail"
],
// ios top toolbar right buttons
"iosRightBarAvailableActions":[
"search",
"bota",
"menu"
],
"availableMenus": [
"viewSettings",
"documentEditor",
"security",
"watermark",
"documentInfo",
"save",
"share",
"openDocument"
]
},
// readerView configuration
"readerViewConfig": {
"linkHighlight": true,
"formFieldHighlight": true
}
};
type Props = {};
export default class App extends Component {
render() {
return (
Welcome to React Native!
To get started, edit App.js
{instructions}
{
this.jumpToNativeView();
}}
/>
);
}
jumpToNativeView() {
NativeModules.OpenPDFModule.openPDF(JSON.stringify(configuration))
// NativeModules.OpenPDFModule.openPDFByConfiguration(filePath, password, JSON.stringify(configuration))
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
Display a PDF
1. We have provided two quick ways to open PDFs:
- Open the default document directly.
NativeModules.OpenPDFModule.openPDF(JSON.stringify(configuration))
- Open the document in the specified path.
NativeModules.OpenPDFModule.openPDFByConfiguration(String filePath, String password, String configuration)
2. The app is now ready to launch! Go back to the terminal.
//Run on Android devices
npx react-native run-android
//Run on iOS devices
npx react-native run-ios
The output of this react native pdf viewer examples on Android and iOS are given below：
Android
iOS
Conclusion
As you have seen, adding PDF reading functionality to your app with the react-native-pdf package is a breeze. However, if your React Native project requires more advanced PDF features currently or in the future, such as PDF annotations, page editing, content editing, form filling, redaction, etc., then you should definitely consider using a commercial library.
ComPDFKit for React Native is a commercial PDF SDK that is built for your cross-platform mobile projects. If you need to add more features to your React Native Viewer with ComPDFKit. Follow the steps above, you can also get a React Native PDF Editor including the following features.
The features ComPDFKit could provide include the following:
- PDF Viewer: searching, zooming, scrolling, single-page or double-page displaying.
- Navigation with thumbnails, outlines, bookmarks, etc.
- All kinds of annotation creating and editing.
- Night and custom reading themes.
- Forms filling and signing with electronic and digital signatures
- Pages manipulation like adding, deleting, rearranging, splitting, merging, replacing, etc.
- …
ComPDFKit for React Native offers a comprehensive set of out-of-the-box features and a user-friendly default UI. Try our PDF library with our free trial and check out our demos to see what capabilities are available.
