React Native Integration Guide

This guide covers the shortest supported path from installation to a working PDF reader. Use the generated API reference for complete signatures and the available options for each method.

The examples focus on the public React Native integration surface.

1. Install

npm install @compdfkit_pdf_sdk/react_native
Copy

For Expo, add the SDK config plugin and create a development build. For React Native CLI, install the native dependencies and run the normal iOS and Android native setup steps.

The SDK requires Android minSdkVersion 21+ and iOS 12+.

2. Add the License and Sample PDF

• Android: place the license XML and sample PDF in android/app/src/main/assets/.
• iOS: add the license XML and sample PDF to the application target.

Use the platform-specific license path format documented on ComPDFKit.initWithPath.

3. Initialize and Render

Initialize the SDK before rendering CPDFReaderView:

import React, { useEffect } from "react";
import { Platform, SafeAreaView } from "react-native";
import {
  ComPDFKit,
  CPDFReaderView,
} from "@compdfkit_pdf_sdk/react_native";

export default function PdfScreen() {
  useEffect(() => {
    void ComPDFKit.initWithPath(
      Platform.OS === "android"
        ? "assets://license_key_rn.xml"
        : "license_key_rn.xml",
    );
  }, []);

  const document = Platform.OS === "android"
    ? "file:///android_asset/PDF_Document.pdf"
    : "PDF_Document.pdf";

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

4. Configure the Reader

Pass overrides to ComPDFKit.getDefaultConfig instead of rebuilding the full configuration object. This keeps platform defaults and limits the amount of configuration that must be maintained by the application.

const configuration = ComPDFKit.getDefaultConfig({
  modeConfig: {
    initialViewMode: "viewer",
    availableViewModes: ["viewer", "annotations"],
  },
  toolbarConfig: {
    annotationToolbarVisible: true,
    contentEditorToolbarVisible: false,
  },
});
Copy

5. Choose the Right API Surface

• Use CPDFReaderView for rendering, reader state, events, and view settings.
• Use CPDFDocument for document-wide operations and saving.
• Use CPDFPage for page text, annotations, and form widgets.
• Use annotation classes for annotation data and annotation-specific behavior.
• Use widget classes for interactive form fields.
• Use edit managers and edit areas for content-editor operations and history.

6. Platform Notes

Some reader operations are platform-specific. Check the method's Remarks and Throws sections before using view settings or file operations in shared code. When a method is Android-only or iOS-only, guard it with Platform.OS and provide a fallback for the other platform.

7. Release Checklist

• Initialize the SDK before the first reader view is mounted.
• Use the correct Android asset or iOS bundle path for the license and PDF.
• Keep the reader configuration serialized with getDefaultConfig.
• Handle rejected promises from native operations.
• Test license initialization, opening, editing, and saving on both platforms.
• Review deprecated API notices before upgrading the SDK.