Skip to content

Run Project

After installing from NPM or GitHub, replace App.tsx with the following code.

Make sure to follow the above steps to copy the sample document into your Android or iOS project.

The example includes a usage demonstration of selecting a PDF document from local file storage, which requires the use of the react-native-document-picker package. You can add this package as follows or remove the pickPDFFile function code from the example:

shell
npm i react-native-document-picker

Here is the sample code for App.tsx:

tsx
/**
 * Copyright © 2014-2024 PDF Technologies, Inc. All Rights Reserved.
 *
 * THIS SOURCE CODE AND ANY ACCOMPANYING DOCUMENTATION ARE PROTECTED BY INTERNATIONAL COPYRIGHT LAW
 * AND MAY NOT BE RESOLD OR REDISTRIBUTED. USAGE IS BOUND TO THE ComPDFKit LICENSE AGREEMENT.
 * UNAUTHORIZED REPRODUCTION OR DISTRIBUTION IS SUBJECT TO CIVIL AND CRIMINAL PENALTIES.
 * This notice may not be removed from this file.
 */

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() {
    // Online certification, Fill in your online license
    // Returns true if initialization is successful, otherwise returns false.
    // var result = await ComPDFKit.initialize('compdfkit android license', 'compdfkit ios license')
    // console.log("ComPDFKitRN", "initialize:", result)

    // 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 }}
        />
    );
  }
}
  • (Android) For local storage file path:
tsx
document = '/storage/emulated/0/Download/PDF_document.pdf'
  • (Android) For content Uri:
tsx
document = 'content://...'
  • (Android) For assets path:
tsx
document = "file:///android_asset/..."
  • (iOS) For app bundle file path:
tsx
document = "document.pdf"
  • (iOS) for URL path:
tsx
document = "file://xxxx/document.pdf"

The app is now ready to launch! Go back to the terminal app and run:

shell
npx react-native run-android
npx react-native run-ios