Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/philipphecht/react-native-doc-viewer
React Native Doc Viewer (Supports file formats: xls,ppt,doc,xlsx,pptx,csv,docx,png,jpg,pdf,xml,binary ...)
https://github.com/philipphecht/react-native-doc-viewer
document java javascript objective-c react-native xcode
Last synced: about 2 months ago
JSON representation
React Native Doc Viewer (Supports file formats: xls,ppt,doc,xlsx,pptx,csv,docx,png,jpg,pdf,xml,binary ...)
- Host: GitHub
- URL: https://github.com/philipphecht/react-native-doc-viewer
- Owner: philipphecht
- License: mit
- Created: 2017-03-05T08:16:49.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T05:56:46.000Z (9 months ago)
- Last Synced: 2024-05-12T23:02:50.620Z (4 months ago)
- Topics: document, java, javascript, objective-c, react-native, xcode
- Language: Java
- Homepage:
- Size: 1.67 MB
- Stars: 89
- Watchers: 5
- Forks: 111
- Open Issues: 80
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native-native-modules - react-native-doc-viewer ★176
README
# react-native-doc-viewer [](https://www.npmjs.com/package/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 react-native-doc-viewer --save`
### Automatic installation
`$ react-native link 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 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/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` ➜ `react-native-doc-viewer` and add `RNDocViewer.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNDocViewer.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Linked Frameworks and Libraries must have this 2 Libraries (AssetsLibrary.framework & QuickLook.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.philipphecht.RNDocViewerPackage;` to the imports at the top of the file
- Add `new RNDocViewerPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
```
include ':react-native-doc-viewer'
project(':react-native-doc-viewer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-doc-viewer/android')
```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
```
compile project(':react-native-doc-viewer')
```
#### Windows on the Roadmap
[Read it! :D](https://github.com/ReactWindows/react-native)
1. In Visual Studio add the `RNReactNativeDocViewer.sln` in `node_modules/react-native-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.Philipphecht.RNReactNativeDocViewer;` to the usings at the top of the file
- Add `new RNReactNativeDocViewerPackage()` to the `List` 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
```javascript
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});
})
this.didPressToObjcButton = this.didPressToObjcButton.bind(this);
}
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{
//Android
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{
//Android
OpenFile.openDocb64([{
base64:"{BASE64String}"
fileName:"sample",
fileType:"png",
cache:true /*Use Cache Folder Android*/
}], (error, url) => {
if (error) {
console.error(error);
} else {
console.log(url)
}
})
}
/*
* 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");
}
}
this.handlePressVideo("http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4")}
title="Press Me Open Video"
accessibilityLabel="See a Document"
/>
}
```
## Screenshots
Copyright (c) 2017-present, Philipp Hecht
[email protected]
## Donation
If this project help you reduce time to develop, you can give me a cup of coffee :)
Etherum wallet: 0x124F99647a904240945d8B582eEf1E3CD6D00a8a