kmpdfkit_demo/example/App.tsx

/**
 * Copyright © 2014-2023 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 configuration from './assets/configuration.json';
import DocumentPicker from 'react-native-document-picker'
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import { ComPDFKit } from 'react-native-compdfkit-pdf';
import { CPDFConfiguration, CPDFModeConfig } from '../src/configuration/CPDFConfiguration';


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

  state = {
    versionCode: ''
  }

  constructor(props: Props) {
    super(props)

    ComPDFKit.initialize('vxwRHJC9RDKK0He2jTpepBkrolOnPQt7bxjfIiqqcJc=', 'vTXxqCm2rutpV67wRy+UnBSJzDBwG0/DLjiLL61zxxc=')

    this.getVersionCode()
  }

  async getVersionCode() {
    var version = await ComPDFKit.getVersionCode()
    console.log(version)
    this.setState({
      versionCode: version
    })
  }


  render() {
    return (
      <View style={styles.scaffold}>
        <View style={styles.appBar}>
          <Text style={styles.mediumTitle}>
            ComPDFKit PDF SDK for ReactNative
          </Text>
        </View>
        <View style={styles.container}>
          <TouchableOpacity onPress={() => {
            // var ve  : string = 'file:///android_asset/pdf_document.pdf'
            // ComPDFKit.openDocument(ve, '', JSON.stringify(configuration))

            const configuration : CPDFConfiguration = {
              modeConfig: {
                initialViewMode: CPDFModeConfig.ViewMode.VIEWER,
                availableViewModes: [
                  CPDFModeConfig.ViewMode.VIEWER,
                  CPDFModeConfig.ViewMode.ANNOTATIONS,
                  CPDFModeConfig.ViewMode.CONTENT_EDITOR,
                  CPDFModeConfig.ViewMode.FORMS,
                  CPDFModeConfig.ViewMode.SIGNATURES
                ]
              }
            }
            var json = JSON.stringify(configuration)
            ComPDFKit.testConfig(json)
          }}>
            <View style={styles.funItem}>
              <Text style={{ fontWeight: 'bold' }}>{'Open Sample'}</Text>
            </View>
          </TouchableOpacity>

          <View style={styles.dividingLine} />

          <TouchableOpacity onPress={() => {
            try {
              const pickerResult = DocumentPicker.pick({
                type: [DocumentPicker.types.pdf]
              });
              pickerResult.then(res => {
                ComPDFKit.openDocument(res[0]?.uri as string, '', JSON.stringify(configuration))
              })
            } catch (err) {
            }
          }}>
            <View style={styles.funItem}>
              <Text style={{ fontWeight: 'bold' }}>{'Pick Document'}</Text>
            </View>
            <View style={styles.dividingLine} />

          </TouchableOpacity>

          <View style={styles.buttom}>
            <Text style={styles.body2}>ComPDFKit {this.state.versionCode}</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  appBar: {
    height: 56,
    backgroundColor: '#FAFCFF',
    elevation: 4,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 16
  },
  mediumTitle: {
    fontSize: 16,
  },
  body2: {
    textAlign: 'center',
    fontSize: 12
  },
  scaffold: {
    flex: 1,
  },
  container: {
    marginHorizontal: 16,
    marginVertical: 8,
    flex: 1,
    // backgroundColor: '#F5FCFF',
  },
  funItem: {
    height: 56,
    justifyContent: 'center',
    textAlign: 'center'
  },
  dividingLine: {
    height: 0.5, backgroundColor: '#4D333333', width: '100%'
  },
  buttom: {
    flex: 1,
    justifyContent: 'flex-end',
  }
});