Open a Document

ComPDFKit for React Native allows you to open documents in two ways: using a native UI component, and using a native module. This is a step-by-step guide to get you started quickly.

Opening a PDF

Here’s how you can open a PDF document using the native module API:

tsx

import { Component } from "react";
import { ComPDFKit } from "@compdfkit_pdf_sdk/react_native";
import { Platform } from "react-native";

const _document: string = Platform.OS == 'android' ? 'file:///android_asset/PDF_Document.pdf' : 'PDF_Document.pdf';

type Props = {};
export default class ExampleApp extends Component<Props> {

  componentDidMount(): void {
    // Before using other ComPDFKit APIs, please initialize the ComPDFKit SDK by calling the init_ or initialize method.
    // ComPDFKit.init_('your compdfkit license')
    // Open an example document
    ComPDFKit.openDocument(_document, '', ComPDFKit.getDefaultConfig({}));
  }

  render() {
    return null;
  }
}
AppRegistry.registerComponent('App', () => ExampleApp);

And here’s how you can open a PDF document using the native component API:

tsx

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

type Props = {};

export default class App extends Component<Props> {

  constructor(props: Props) {
    super(props)
    this.initialize()
  }

  async initialize() {
    // Offline authentication, Fill in your offline license
    var result = await ComPDFKit.init_('your compdfkit license')
    console.log("ComPDFKitRN", "init_:", result)
  }

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

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

Open a Document ​

Open a Document