kmpdfkit_demo/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 {
  Platform,
  StyleSheet,
  Text,
  View,
  Button,
  NativeModules
} from 'react-native';


const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});


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

  componentDidMount(){

       // offline auth
    NativeModules.OpenPDFModule.init_('77/0LbrlNGNUEKWCmu4/iG3ZlSv4+47zdgsGOxDX3vGx64O2BtvxJyDzgqNvAmqU8eM0G0ALjeYHtV3vrL7mNtev5BHDGmg2ye3WigSqpN8y0gOPPutXKAQyW9vM+cC81ws4sjcXt2vphQXKjRGeVnQodoe+0FbKzffywJ2DORo32GO9qJ51qIKGmXhokKOuQIDJ2eDgQDkIwUChC+yVz088AjTSDSYOe0UobLHOpkP6Ou4qbkx6pKJ+WexOqFxIb90cAQVVa02NpLJdSu8VPIDJNzuwds1y2RLVD6lgBj8Zez+CGDL4JzeYnYhQhlOZNLXJQ4ZqkN/eHcvgIlpzL2u0lH1oY17eVN2TRW5amzqOuoo5orgnAvMGFLdEwMLlC+K5dn2h1bB4RjP9ZTqgoNaGtyKiQ+FhqHLgPV+faNMUdCBlrq4FNafN5ZoZwbHn4fzUh88DO0481O/H5F0zHak/PQJR7Gu1OfN94Q2uALpL4t3i0S76cdEeJ6wRw44AH0PQikF7jWqqmAB1bqcqsgePNE97RigZwYiDA0p2AGWxhBg2+pgZD9EPOOjdtWPXK9LTAop75OQ9whjDWL1y0LTP/JhOPQIOghNPepj3VtjzSVrUbTBFktXeDGlz0NH9TnbvjZoxJRlcNN1+9x100WEfF4A2XbJZEjcpxV9tk1r9UpDZNXkuRC5cqSCOndk3WcAQjbXfQ4Bb9zwxbcvORsTU9lFmAbRS4KFSnCfN/gMqYb0QzhAKt6Wube1sAVkj4n7AvEss/0SdC9zk5m0/E/c0dDshJ3XKSLU/PaI1wbf/SnQhn+gZICJWg9lWCAi16kSStNvD+Tlg8iXYGXcUT967Gjfe/7Au1tVEU3oE60OBrEnSCSSJJt3MWbr/52CRpTtQ6bC+eZK0ijaRGZnS60G4A4sqfUpH3dRQ0juEnz0zrfyaQi4TKGCC1SzT5YPtsIEy4Stbdh3CCWoYV8SehrEkB58JHrolHhy5cVPV2RRYE30JXG5sJOlwb6wuhHVLlanJ7OE5ewEJCtZIHMkJ/rlfinOunS0G9GL2IMBwsyfOB1Cxl+yXx4V3li2ymawe')
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.tsx
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
        <Button
          title={'Open sample document'}
          onPress={() => {
            this.jumpToNativeView();
          }}
        />
        <View style={{margin:5}}/>
        <Button 
          title={'pick document'}
          onPress={() => {
            try {
              const pickerResult = DocumentPicker.pick({
                type: [DocumentPicker.types.pdf]
              });
              pickerResult.then(res => {
                if (Platform.OS == 'android') {
                  // only android
                  NativeModules.OpenPDFModule.openPDFByUri(res[0].uri, '', JSON.stringify(configuration))
                } else {
                  NativeModules.OpenPDFModule.openPDFByConfiguration(res[0].uri, '', JSON.stringify(configuration))
                }
              })
            } catch (err) {
            }
          }}
        />
      </View>
    );
  }

  jumpToNativeView() {
    NativeModules.OpenPDFModule.openPDF(JSON.stringify(configuration))

    // NativeModules.OpenPDFModule.openPDFByConfiguration(filePath, password, JSON.stringify(configuration))

    // only android platform
    // NativeModules.OpenPDFModule.openPDFByUri(uriString, password, JSON.stringify(configuration))
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  }
});