react-native-docviewer-android

A React Native bridge module: Document Viewer for files (pdf, png, jpg, xls, doc, ppt, xlsx, docx, pptx etc.)

Getting started

$ npm install react-native-docviewer-android --save

Require RN >= 0.60

API DOC

IOS Document Viewer Doc

resource	description
DoneButtonEvent	return true
RNDownloaderProgress	return Progress Float

resource	description
openDoc	{url:String,fileNameOptional:String (optional)}
openDocb64	{url:String,fileName:String,fileType:String }
openDocBinaryinUrl	{url:String,fileName:String,fileType:String }

Android Document Viewer Doc

resource	description
openDoc	{url:String,fileName:String, cache:boolean}
openDocb64	{url:String,fileName:String,fileType:String, cache:boolean }
openDocBinaryinUrl	not implemented yet

Usage

1import React, { Component } from 'react';
2import {
3  AppRegistry,
4  StyleSheet,
5  Text,
6  View,
7  Platform,
8  Button,
9  Alert,
10  ActivityIndicator,
11  NativeAppEventEmitter,
12  DeviceEventEmitter,
13  NativeModules,
14  NativeEventEmitter,
15  TouchableHighlight
16} from 'react-native';
17import OpenFile from 'react-native-docviewer-android';
18var RNFS = require('react-native-fs');
19var SavePath = Platform.OS === 'ios' ? RNFS.MainBundlePath : RNFS.DocumentDirectoryPath;
20export default class DocumentViewerExample extends Component {
21 constructor(props) {
22    super(props);
23    this.state = {
24      animating: false,
25      progress: "",
26      donebuttonclicked: false,
27    }
28    this.eventEmitter = new NativeEventEmitter(NativeModules.RNReactNativeDocViewer);
29    this.eventEmitter.addListener('DoneButtonEvent', (data) => {
30      /*
31      *Done Button Clicked
32      * return true
33      */
34      console.log(data.close);
35      this.setState({donebuttonclicked: data.close});
36    })
37    this.didPressToObjcButton = this.didPressToObjcButton.bind(this);
38  }
39
40  componentDidMount(){
41    // download progress
42    this.eventEmitter.addListener(
43      'RNDownloaderProgress',
44      (Event) => {
45        console.log("Progress - Download "+Event.progress  + " %")
46        this.setState({progress: Event.progress + " %"});
47      }
48
49    );
50  }
51
52  componentWillUnmount (){
53    this.eventEmitter.removeListener();
54  }
55  /*
56  * Handle WWW File Method
57  * 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.
58  */
59  handlePress = () => {
60    this.setState({animating: true});
61    if(Platform.OS === 'ios'){
62      OpenFile.openDoc([{
63        url:"https://calibre-ebook.com/downloads/demos/demo.docx",
64        fileNameOptional:"test filename"
65      }], (error, url) => {
66         if (error) {
67          this.setState({animating: false});
68         } else {
69          this.setState({animating: false});
70           console.log(url)
71         }
72       })
73    }else{
74      //Android
75      this.setState({animating: true});
76      OpenFile.openDoc([{
77        url:"https://www.huf-haus.com/fileadmin/Bilder/Header/ART_3/Header_HUF_Haus_ART_3___1_.jpg", // Local "file://" + filepath
78        fileName:"sample",
79        cache:false,
80        fileType:"jpg"
81      }], (error, url) => {
82         if (error) {
83          this.setState({animating: false});
84           console.error(error);
85         } else {
86          this.setState({animating: false});
87           console.log(url)
88         }
89       })
90    }
91
92  }
93
94
95  /*
96  * Handle Local File Method
97  * 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.
98  */
99  handlePressLocal = () => {
100    this.setState({animating: true});
101    if(Platform.OS === 'ios'){
102        OpenFile.openDoc([{url:SavePath+"/react-native-logo.jpg",
103        fileNameOptional:"test filename"
104      }], (error, url) => {
105         if (error) {
106          this.setState({animating: false});
107         } else {
108          this.setState({animating: false});
109           console.log(url)
110         }
111       })
112    }else{
113      OpenFile.openDoc([{url:SavePath+"/demo.jpg",
114        fileName:"sample",
115        cache:false,
116        fileType:"jpg"
117      }], (error, url) => {
118         if (error) {
119          this.setState({animating: false});
120         } else {
121          this.setState({animating: false});
122           console.log(url)
123         }
124       })
125
126    }
127  }
128
129    handlePressLocalXLS = () => {
130      this.setState({animating: true});
131      if(Platform.OS === 'ios'){
132          OpenFile.openDoc([{url:SavePath+"/SampleXLSFile_19kb.xls",
133          fileNameOptional:"Sample XLS 94-2003"
134        }], (error, url) => {
135           if (error) {
136            this.setState({animating: false});
137           } else {
138            this.setState({animating: false});
139             console.log(url)
140           }
141         })
142      }else{
143        OpenFile.openDoc([{url:SavePath+"/demo.jpg",
144          fileName:"sample",
145          cache:false,
146          fileType:"jpg"
147        }], (error, url) => {
148           if (error) {
149            this.setState({animating: false});
150           } else {
151            this.setState({animating: false});
152             console.log(url)
153           }
154         })
155
156      }
157    }
158
159
160  /*
161  * Binary in URL
162  * Binary String in Url
163  * 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
164  */
165  handlePressBinaryinUrl = () => {
166    this.setState({animating: true});
167    if(Platform.OS === 'ios'){
168      OpenFile.openDocBinaryinUrl([{
169        url:"https://storage.googleapis.com/need-sure/example",
170        fileName:"sample",
171        fileType:"xml"
172      }], (error, url) => {
173          if (error) {
174            console.error(error);
175            this.setState({animating: false});
176          } else {
177            console.log(url)
178            this.setState({animating: false});
179          }
180        })
181    }else{
182      OpenFile.openDocBinaryinUrl([{
183        url:"https://storage.googleapis.com/need-sure/example",
184        fileName:"sample",
185        fileType:"xml",
186        cache:true
187      }], (error, url) => {
188          if (error) {
189            console.error(error);
190            this.setState({animating: false});
191          } else {
192            console.log(url)
193            this.setState({animating: false});
194          }
195        })
196    }
197  }
198
199  /*
200  * Base64String
201  * put only the base64 String without data:application/octet-stream;base64
202  * 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
203  */
204  handlePressb64 = () => {
205    if(Platform.OS === 'ios'){
206      OpenFile.openDocb64([{
207        base64:"{BASE64String}"
208        fileName:"sample",
209        fileType:"png"
210      }], (error, url) => {
211          if (error) {
212            console.error(error);
213          } else {
214            console.log(url)
215          }
216        })
217    }else{
218      //Android
219      OpenFile.openDocb64([{
220        base64:"{BASE64String}"
221        fileName:"sample",
222        fileType:"png",
223        cache:true /*Use Cache Folder Android*/
224      }], (error, url) => {
225          if (error) {
226            console.error(error);
227          } else {
228            console.log(url)
229          }
230        })
231    }
232
233    /*
234  * Video File
235  */
236  handlePressVideo = () => {
237    if(Platform.OS === 'ios'){
238      OpenFile.playMovie(video, (error, url) => {
239                if (error) {
240                    console.error(error);
241                } else {
242                    console.log(url)
243                }
244            })
245    }else{
246      Alert.alert("Android coming soon");
247    }
248  }
249
250
251  <Button
252          onPress={this.handlePress.bind(this)}
253          title="Press Me Open Doc Url"
254          accessibilityLabel="See a Document"
255        />
256        <Button
257          onPress={this.handlePressBinaryinUrl.bind(this)}
258          title="Press Me Open BinaryinUrl"
259          accessibilityLabel="See a Document"
260        />
261         <Button
262          onPress={this.handlePressLocal.bind(this)}
263          title="Press Me Open Doc Path"
264          accessibilityLabel="See a Document"
265        />
266        <Button
267          onPress={this.handlePressLocalXLS.bind(this)}
268          title="Press Me Open XLS DOC Path"
269          accessibilityLabel="See a Document"
270        />
271        <Button
272          onPress={this.handlePressb64.bind(this)}
273          title="Press Me Open Base64 String"
274          accessibilityLabel="See a Document"
275        />
276        <Button
277          onPress={()=>this.handlePressVideo("http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4")}
278          title="Press Me Open Video"
279          accessibilityLabel="See a Document"
280        />
281}