diff --git a/en/react-native-doc-viewer.md b/en/react-native-doc-viewer.md index 5ddea221ae433ecc40a7b63094ef3fd7ebbb6bdc..b7aa80182339787a3786db224a511fbfbdced92d 100644 --- a/en/react-native-doc-viewer.md +++ b/en/react-native-doc-viewer.md @@ -42,290 +42,181 @@ The following code shows the basic use scenario of the repository: > [!WARNING] The name of the imported repository remains unchanged. ```js -import React, { Component } from 'react'; -import { - AppRegistry, - StyleSheet, - Text, - View, - Platform, - Button, - Alert, - ActivityIndicator, - NativeAppEventEmitter, - DeviceEventEmitter, - NativeModules, - NativeEventEmitter, - TouchableHighlight -} from 'react-native'; -import OpenFile from 'react-native-doc-viewer'; -var RNFS = require('react-native-fs'); -var SavePath = Platform.OS === 'ios' ? RNFS.MainBundlePath : RNFS.DocumentDirectoryPath; -export default class DocumentViewerExample extends Component { - constructor(props) { - super(props); - this.state = { - animating: false, - progress: "", - donebuttonclicked: false, - } - this.eventEmitter = new NativeEventEmitter(NativeModules.RNReactNativeDocViewer); - this.eventEmitter.addListener('DoneButtonEvent', (data) => { - /* - *Done Button Clicked - * return true - */ - console.log(data.close); - this.setState({donebuttonclicked: data.close}); - }) - } - - componentDidMount(){ - // download progress - this.eventEmitter.addListener( - 'RNDownloaderProgress', - (Event) => { - console.log("Progress - Download "+Event.progress + " %") - this.setState({progress: Event.progress + " %"}); - } - - ); - } - - componentWillUnmount (){ - this.eventEmitter.removeListener(); - } - /* - * Handle WWW File Method - * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url the File Extension is missing. - */ - handlePress = () => { - this.setState({animating: true}); - if(Platform.OS === 'ios'){ - OpenFile.openDoc([{ - url:"https://calibre-ebook.com/downloads/demos/demo.docx", - fileNameOptional:"test filename" - }], (error, url) => { - if (error) { - this.setState({animating: false}); - } else { - this.setState({animating: false}); - console.log(url) - } - }) - }else{ - this.setState({animating: true}); - OpenFile.openDoc([{ - url:"https://www.huf-haus.com/fileadmin/Bilder/Header/ART_3/Header_HUF_Haus_ART_3___1_.jpg", // Local "file://" + filepath - fileName:"sample", - cache:false, - fileType:"jpg" - }], (error, url) => { - if (error) { - this.setState({animating: false}); - console.error(error); - } else { - this.setState({animating: false}); - console.log(url) - } - }) - } - - } - - - /* - * Handle Local File Method - * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url the File Extension is missing. - */ - handlePressLocal = () => { - this.setState({animating: true}); - if(Platform.OS === 'ios'){ - OpenFile.openDoc([{url:SavePath+"/react-native-logo.jpg", - fileNameOptional:"test filename" - }], (error, url) => { - if (error) { - this.setState({animating: false}); - } else { - this.setState({animating: false}); - console.log(url) - } - }) - }else{ - OpenFile.openDoc([{url:SavePath+"/demo.jpg", - fileName:"sample", - cache:false, - fileType:"jpg" - }], (error, url) => { - if (error) { - this.setState({animating: false}); - } else { - this.setState({animating: false}); - console.log(url) - } - }) - - } - } - - handlePressLocalXLS = () => { - this.setState({animating: true}); - if(Platform.OS === 'ios'){ - OpenFile.openDoc([{url:SavePath+"/SampleXLSFile_19kb.xls", - fileNameOptional:"Sample XLS 94-2003" - }], (error, url) => { - if (error) { - this.setState({animating: false}); - } else { - this.setState({animating: false}); - console.log(url) - } - }) - }else{ - OpenFile.openDoc([{url:SavePath+"/demo.jpg", - fileName:"sample", - cache:false, - fileType:"jpg" - }], (error, url) => { - if (error) { - this.setState({animating: false}); - } else { - this.setState({animating: false}); - console.log(url) - } - }) - - } - } - - - /* - * Binary in URL - * Binary String in Url - * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url you dont have an File Extensions - */ - handlePressBinaryinUrl = () => { - this.setState({animating: true}); - if(Platform.OS === 'ios'){ - OpenFile.openDocBinaryinUrl([{ - url:"https://storage.googleapis.com/need-sure/example", - fileName:"sample", - fileType:"xml" - }], (error, url) => { - if (error) { - console.error(error); - this.setState({animating: false}); - } else { - console.log(url) - this.setState({animating: false}); - } - }) - }else{ - OpenFile.openDocBinaryinUrl([{ - url:"https://storage.googleapis.com/need-sure/example", - fileName:"sample", - fileType:"xml", - cache:true - }], (error, url) => { - if (error) { - console.error(error); - this.setState({animating: false}); - } else { - console.log(url) - this.setState({animating: false}); - } - }) - } - } - - /* - * Base64String - * put only the base64 String without data:application/octet-stream;base64 - * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url you dont have an File Extensions - */ - handlePressb64 = () => { - if(Platform.OS === 'ios'){ - OpenFile.openDocb64([{ - base64:"{BASE64String}", - fileName:"sample", - fileType:"png" - }], (error, url) => { - if (error) { - console.error(error); - } else { - console.log(url) - } - }) - }else{ - OpenFile.openDocb64([{ - base64:"{BASE64String}", - fileName:"sample", - fileType:"png", - cache:true - }], (error, url) => { - if (error) { - console.error(error); - } else { - console.log(url) - } - }) - } - } +import React from 'react'; +import { ScrollView, StyleSheet, View, Button } from 'react-native'; +import OpenFile from '@react-native-oh-tpl/react-native-doc-viewer'; + +interface FileInfo { + url?: string; // Local files need to be appended with file:// + fileName?: string; + fileType?: string; + cache?: boolean; + base64?: string; +} - /* - * Video File - */ - handlePressVideo = () => { - if(Platform.OS === 'ios'){ - OpenFile.playMovie(video, (error, url) => { - if (error) { - console.error(error); - } else { - console.log(url) - } - }) - }else{ - Alert.alert("Android coming soon"); - } - } - render() { - return ( - -