antu-react-native-doc-viewer

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

2017 Roadmap

• Download Progess Event Listener for big Files Android

2018 Roadmap

• Android file without external Application
• Windows Phone Support

IMPORTANT INFORMATION: THIS IS A OPEN SOURCE PROJECT, SOMETIMES I HAVE NO TIME TO DEVELOP THIS PROJECT. THANK YOU FOR YOUR PULL REQUEST AND YOUR SUPPORT. I will continue to develop it as it is possible in time.

Changelog:

2.7.8 -   XLS Exmaple Local File IOS 97-2003
2.7.7 -   "react": "^16.3.0-alpha.1","react-native": "0.54.3"
2.7.5 -   Pull Request local file from LeMinh1995 + Pull Request podspec Form Linh1987
2.7.3 -   Example Local File
2.7.2 -   Progress Download Feedback in example and Done Button Callback IOS
2.7.1 -   Fix Progress IOS Download
2.6.9 -   Progress IOS DOWNLOAD Document Callback in Native Code 
2.6.0 -   Android Openbase64
2.5.2 -   OpenDocAndroid
2.5.1 -   Cleanings
2.5.0  -  Update Project for React Native 0.50.3

Getting started

$ npm install antu-react-native-doc-viewer --save

Automatic installation

$ react-native link antu-react-native-doc-viewer

CocoaPods installation

If your project uses CocoaPods to manage React installation (especially with Expo-detached project), most likely you will run into issue with header files not found as described here (https://docs.expo.io/versions/latest/guides/expokit.html#changing-native-dependencies "Changing Native Dependencies"). It will be helpful to follow these steps to have it compiled successfully:

1. npm install antu-react-native-doc-viewer --save

2. Add the plugin dependency to your Podfile, pointing at the path where NPM installed it:

pod 'RNReactNativeDocViewer', path: '../node_modules/antu-react-native-doc-viewer'

3. Run pod install

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]

2. Go to node_modules ➜ antu-react-native-doc-viewer and add RNReactNativeDocViewer.xcodeproj

3. In XCode, in the project navigator, select your project. Add libRNReactNativeDocViewer.a to your project's Build Phases ➜ Link Binary With Libraries

4. Linked Frameworks and Libraries must have this 2 Libraries (AssetsLibrary.framework & QuickLock.framework). When not you have to add them.

   

   

5. When you Show http Links don't forget to set APP Transport Security Settings -> Allow Arbitrary Loads to YES

6. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainApplication.java

• Add import com.reactlibrary.RNReactNativeDocViewerPackage; to the imports at the top of the file
• Add new RNReactNativeDocViewerPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':antu-react-native-doc-viewer'
   project(':antu-react-native-doc-viewer').projectDir = new File(rootProject.projectDir, 	'../node_modules/antu-react-native-doc-viewer/android')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':antu-react-native-doc-viewer')
   

Windows on the Roadmap

Read it! :D

1. In Visual Studio add the RNReactNativeDocViewer.sln in node_modules/react-native-antu-react-native-doc-viewer/windows/RNReactNativeDocViewer.sln folder to their solution, reference from their app.
2. Open up your MainPage.cs app

• Add using Com.Reactlibrary.RNReactNativeDocViewer; to the usings at the top of the file
• Add new RNReactNativeDocViewerPackage() to the List<IReactPackage> returned by the Packages method

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 'antu-react-native-doc-viewer';
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   if(Platform.OS === 'ios'){
61      //IOS
62      OpenFile.openDoc([{
63        url:"https://www.cmu.edu/blackboard/files/evaluate/tests-example.xls",
64        fileNameOptional:"sample-test"
65      }], (error, url) => {
66         if (error) {
67           console.error(error);
68         } else {
69           console.log(url)
70         }
71       })
72    }else{
73      //Android
74      OpenFile.openDoc([{
75        url:"http://mail.hartl-haus.at/uploads/tx_hhhouses/htf13_classic153s(3_giebel_haus).jpg", // Local "file://" + filepath
76        fileName:"sample",
77        cache:false,
78        fileType:"jpg"
79      }], (error, url) => {
80         if (error) {
81           console.error(error);
82         } else {
83           console.log(url)
84         }
85       })
86    }
87  }
88
89  /*
90  * Binary in URL
91  * Binary String in Url
92  * 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
93  */
94  handlePressBinaryinUrl = () => {
95    if(Platform.OS === 'ios'){
96      //IOS
97      OpenFile.openDocBinaryinUrl([{
98        url:"https://storage.googleapis.com/need-sure/example",
99        fileName:"sample",
100        fileType:"xml"
101      }], (error, url) => {
102          if (error) {
103            console.error(error);
104          } else {
105            console.log(url)
106          }
107        })
108    }else{
109      //Android
110      Alert.alert("Coming soon for Android")
111    }
112  }
113  
114  /*
115  * Handle local File Method
116  * 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
117  */
118  handlePressLocalFile = () => {
119    if(Platform.OS === 'ios'){
120        OpenFile.openDoc([{
121        url:SavePath+"filename.pdf",
122        fileNameOptional:"sample"
123      }], (error, url) => {
124          if (error) {
125            console.error(error);
126          } else {
127            console.log(url)
128          }
129        })
130    }else{
131      //Android
132      OpenFile.openDoc([{
133        url:SavePath+"filename.pdf",
134        fileName:"sample",
135        cache:true /*Use Cache Folder Android*/
136      }], (error, url) => {
137          if (error) {
138            console.error(error);
139          } else {
140            console.log(url)
141          }
142        })
143    }
144  }
145
146  /*
147  * Base64String
148  * put only the base64 String without data:application/octet-stream;base64
149  * 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
150  */
151  handlePressb64 = () => {
152    if(Platform.OS === 'ios'){
153      OpenFile.openDocb64([{
154        base64:"{BASE64String}"
155        fileName:"sample",
156        fileType:"png"
157      }], (error, url) => {
158          if (error) {
159            console.error(error);
160          } else {
161            console.log(url)
162          }
163        })
164    }else{
165      //Android
166      OpenFile.openDocb64([{
167        base64:"{BASE64String}"
168        fileName:"sample",
169        fileType:"png",
170        cache:true /*Use Cache Folder Android*/
171      }], (error, url) => {
172          if (error) {
173            console.error(error);
174          } else {
175            console.log(url)
176          }
177        })
178    }
179    
180    /*
181  * Video File
182  */
183  handlePressVideo = () => {
184    if(Platform.OS === 'ios'){
185      OpenFile.playMovie(video, (error, url) => {
186                if (error) {
187                    console.error(error);
188                } else {
189                    console.log(url)
190                }
191            })
192    }else{
193      Alert.alert("Android coming soon");
194    }
195  }
196  
197  
198  <Button
199          onPress={this.handlePress.bind(this)}
200          title="Press Me Open Doc Url"
201          accessibilityLabel="See a Document"
202        />
203        <Button
204          onPress={this.handlePressBinaryinUrl.bind(this)}
205          title="Press Me Open BinaryinUrl"
206          accessibilityLabel="See a Document"
207        />
208        <Button
209          onPress={this.handlePressb64.bind(this)}
210          title="Press Me Open Base64 String"
211          accessibilityLabel="See a Document"
212        />
213        <Button
214          onPress={()=>this.handlePressVideo("http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4")}
215          title="Press Me Open Video"
216          accessibilityLabel="See a Document"
217        />
218}

Screenshots

Copyright (c) 2017-present, Philipp Hecht philipp.hecht@icloud.com

Donation

If this project help you reduce time to develop, you can give me a cup of coffee :)

Bitcoin wallet: 122dhCT98R6jrP5ahCKMRA1UupawtU9cVP

Etherum wallet: 0x68b93b03eb61a27b125416a5963f1e17c3ebad21