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:

• Android Studio
• Xcode
• Expo CLI
• EAS CLI

Create an Expo Project

Run the following commands:

npx create-expo-app compdfkit_expo
cd compdfkit_expo

Then install the Expo project dependencies:

npm install
# or
yarn install

Install ComPDFKit

Run:

yarn add @compdfkit_pdf_sdk/react_native

Add the Plugin to Your Expo Config

Update app.json as follows:

{
  "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:

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!:

# @generated begin compdfkit-react-native-ios-pods
pod 'ComPDFKit', :podspec => 'https://file.compdf.com/cocoapods/ios/compdfkit_pdf_sdk/3.0.0/ComPDFKit.podspec'
pod 'ComPDFKit_Tools', :podspec => 'https://file.compdf.com/cocoapods/ios/compdfkit_pdf_sdk/3.0.0/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:

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:

{
  "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:

<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:

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:

npx expo run:android

Or:

npx expo run:ios

Build with EAS

Run:

eas build --platform ios

Or:

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:

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

• Check out the React Native guides
• Stay up to date with the React Native changelog
• Contact technical support if you run into issues
• Contact sales for licensing questions