ComPDF
Contact Sales
Docs OverviewDemoDownloadFAQChangelog

How to Use ComPDFKit PDF SDK for React Native with Expo ​

This guide explains how to integrate @compdfkit_pdf_sdk/react_native into an Expo project.

ComPDFKit depends on native iOS and Android code, so it is not supported in Expo Go. Use a development build, expo run, or EAS Build instead.

The Expo config plugin included in the package updates the iOS Podfile during expo prebuild. Manual changes to ios/Podfile are not required.

Before You Start ​

Ensure that your environment is ready for native Expo builds:

Create an Expo Project ​

Run the following commands:

shell
npx create-expo-app compdfkit_expo
cd compdfkit_expo

Then install the Expo project dependencies:

shell
npm install
# or
yarn install

Install ComPDFKit ​

Run:

shell
yarn add @compdfkit_pdf_sdk/react_native

Add the Plugin to Your Expo Config ​

Update app.json as follows:

json
{
  "expo": {
    "plugins": ["@compdfkit_pdf_sdk/react_native"]
  }
}

Also make sure your project uses the correct iOS bundleIdentifier and Android package values. ComPDFKit licenses are bound to those identifiers.

If your Expo project also needs custom native build settings, such as compileSdkVersion, minSdkVersion, or deploymentTarget, you can additionally install and configure expo-build-properties. It is optional and is not required for the ComPDFKit plugin itself.

Generate the Native Projects ​

Run:

shell
CI=1 npx expo prebuild --clean

This command generates the ios and android folders and applies the ComPDFKit plugin.

Verify That the iOS Plugin Ran ​

After prebuild completes, open ios/Podfile.

You should see a generated block similar to the following under use_expo_modules!:

ruby
# @generated begin compdfkit-react-native-ios-pods
pod 'ComPDFKit', :podspec => 'https://file.compdf.com/cocoapods/ios/compdfkit_pdf_sdk/2.6.6/ComPDFKit.podspec'
pod 'ComPDFKit_Tools', :podspec => 'https://file.compdf.com/cocoapods/ios/compdfkit_pdf_sdk/2.6.6/ComPDFKit_Tools.podspec'
# @generated end compdfkit-react-native-ios-pods

If this block is present, the plugin is working correctly and no manual Podfile changes are required.

Set Up EAS for Cloud Builds ​

Run:

shell
eas build:configure

If Expo prompts you to sign in, complete that step first.

If you choose All, Expo creates an eas.json file similar to the following:

json
{
  "cli": {
    "version": ">= 5.4.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

Add the Android Permissions ​

At this stage, the Expo plugin only handles iOS Podfile integration. Android permissions still need to be added manually after prebuild.

Open android/app/src/main/AndroidManifest.xml and add the following:

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

Add a Sample PDF for Testing ​

For this example, copy a PDF named PDF_Document.pdf into the following locations after prebuild:

  1. android/app/src/main/assets/PDF_Document.pdf
  2. Your iOS app target in Xcode so that the file is bundled with the app

This example uses native bundled file paths. If you run expo prebuild --clean again later, verify whether the sample file needs to be copied again.

Replace Your App Code ​

Replace the contents of index.tsx with the following example:

tsx
import { Platform, SafeAreaView } from 'react-native';
import { Component } from 'react';
import { ComPDFKit, CPDFReaderView } from '@compdfkit_pdf_sdk/react_native';

const androidLicense = 'android license';
const iosLicense = 'ios license';

type Props = {};

export default class HomeScreen extends Component<Props> {
  constructor(props: Props) {
    super(props);
    this.initialize();
  }

  async initialize() {
    const result = await ComPDFKit.init_(
      Platform.OS === 'android' ? androidLicense : iosLicense
    );
    console.log('ComPDFKitRN', 'init_:', result);
  }

  samplePDF =
    Platform.OS === 'android'
      ? 'file:///android_asset/PDF_Document.pdf'
      : 'PDF_Document.pdf';

  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <CPDFReaderView
          document={this.samplePDF}
          configuration={ComPDFKit.getDefaultConfig({})}
          style={{ flex: 1 }}
        />
      </SafeAreaView>
    );
  }
}

Before running the app, replace androidLicense and iosLicense with your actual ComPDFKit license values.

Trial licenses for the ComPDFKit React Native SDK are available in the GitHub example project or by contacting the ComPDFKit sales team.

Run the App ​

Run:

shell
npx expo run:android

Or:

shell
npx expo run:ios

Build with EAS ​

Run:

shell
eas build --platform ios

Or:

shell
eas build --platform android

Use these commands when you want Expo to build the native application in the cloud with the same plugin configuration defined in app.json.

Troubleshoot Common Issues ​

Expo Go Cannot Open the SDK ​

This behavior is expected. ComPDFKit requires native modules, so use a development build, expo run, or EAS Build.

The Generated Podfile Does Not Include ComPDFKit ​

Ensure that @compdfkit_pdf_sdk/react_native is listed in expo.plugins, then run:

shell
CI=1 npx expo prebuild --clean

The Sample PDF Is Missing After Prebuild ​

If you run expo prebuild --clean, Expo regenerates the native projects. Copy the sample PDF into the generated native project again.

Support ​