Guides

Creating a New Project

Let's create a simple app that integrates ComPDFKit for React Native.

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:
bash
```
cd ~/Documents
```
1
Create the React Native project by running the following command:
bash
```
react-native init compdfkit_rn
```
1
In the terminal app, change the location of the current working directory inside the newly created project:
bash
```
cd compdfkit_rn
```
1
Add the ComPDFKit library and import the presented PDF document.

Android

Open the android/build.gradle file located in the project root directory and add the mavenCentral repository:

diff

repositories {
    google()
+   mavenCentral()
}

Open the app’s Gradle build file, android/app/build.gradle:

bash

open android/app/build.gradle

Modify the minimum SDK version, All this is done inside the android section:

diff

 android {
     defaultConfig {
-        minSdkVersion rootProject.ext.minSdkVersion
+        minSdkVersion 21
         ...
     }
 }

Add ComPDFKit SDK inside the dependencies section:

diff

dependencies {
    ...
+    implementation 'com.compdf:compdfkit:1.13.0'
+    implementation 'com.compdf:compdfkit-ui:1.13.0'
+    implementation 'com.compdf:compdfkit-tools:1.13.0'
}

open android/app/src/main/AndroidManifest.xml , add Internet Permission and Storage Permission：

diff

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.compdfkit.flutter.example">

+    <uses-permission android:name="android.permission.INTERNET"/>
    
    <!-- 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"/>
+    <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />

    <application
+    android:requestLegacyExternalStorage="true"
        ...>
	...
    </application>
</manifest>

Copy the pdf folder code from the sample project Android project to your project

Open the MainApplication file and fill in the following code in the getPackages() method

diff

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
+  packages.add(new PDFReactPackage());
  return packages;
}

Copy the sample pdf file to the assets directory

iOS

Open your project’s Podfile in a text editor:

bash

open ios/Podfile

Update the platform to iOS 11 and add the ComPDFKit Podspec:

diff

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.13.0.podspec'
+  pod 'ComPDFKit', podspec:'https://www.compdf.com/download/ios/cocoapods/xcframeworks/compdfkit/1.13.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

Go to the compdfkit_rn/ios folder and run the pod install command:

bash

pod install

Note: If SSL network requests fail to download the ComPDFKit library when you run pod install, you can see the processing method in Troubleshooting.

Open your project’s Workspace in Xcode:

bash

open ios/PDFView_RN.xcworkspace

Make sure the deployment target is set to 10.0 or higher:

Import resource file，"OpenPDFModule.swift" is the bridging file for connecting React Native to the iOS native module.

1-2

Search for bridging in the Build Settings and locate the Objective-C Bridging Header option. Then, enter the file path of the header file "ComPDFKit_RN-Bridging-Header.h":

1-9

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.

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.

objective-c

<key>NSCameraUsageDescription</key>
<string>Your consent is required before you could access the function.</string>

<key>NSMicrophoneUsageDescription</key>
<string>Your consent is required before you could access the function.</string>

<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your consent is required before you could access the function.</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>Your consent is required before you could access the function.</string>
  
<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
	</dict>

Creating a New Project ​

Android ​

iOS ​

Creating a New Project

Android

iOS