{"id":13776767,"url":"https://github.com/philipphecht/react-native-doc-viewer","last_synced_at":"2025-10-05T03:24:47.440Z","repository":{"id":37381921,"uuid":"83955222","full_name":"philipphecht/react-native-doc-viewer","owner":"philipphecht","description":"React Native Doc Viewer (Supports file formats: xls,ppt,doc,xlsx,pptx,csv,docx,png,jpg,pdf,xml,binary ...)","archived":false,"fork":false,"pushed_at":"2024-08-15T12:06:02.000Z","size":1747,"stargazers_count":94,"open_issues_count":79,"forks_count":115,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-04T09:38:56.632Z","etag":null,"topics":["document","java","javascript","objective-c","react-native","xcode"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/philipphecht.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-05T08:16:49.000Z","updated_at":"2025-01-29T12:10:25.000Z","dependencies_parsed_at":"2024-01-13T07:32:59.628Z","dependency_job_id":"98eab66a-02dd-48e9-ac4b-0ac9f6a30394","html_url":"https://github.com/philipphecht/react-native-doc-viewer","commit_stats":{"total_commits":198,"total_committers":26,"mean_commits":7.615384615384615,"dds":0.4292929292929293,"last_synced_commit":"eb0a265049c1961111bc75fa746866349d5784cf"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philipphecht%2Freact-native-doc-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philipphecht%2Freact-native-doc-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philipphecht%2Freact-native-doc-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philipphecht%2Freact-native-doc-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/philipphecht","download_url":"https://codeload.github.com/philipphecht/react-native-doc-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234923,"owners_count":20905854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["document","java","javascript","objective-c","react-native","xcode"],"created_at":"2024-08-03T18:00:32.804Z","updated_at":"2025-10-05T03:24:42.390Z","avatar_url":"https://github.com/philipphecht.png","language":"Java","funding_links":[],"categories":["\u003ca name=\"Image-\u0026-Audio-\u0026-Video-\u0026-Docs:-Native-Modules\"\u003eImage, Audio, Video \u0026 Docs: Native Modules\u003c/a\u003e"],"sub_categories":[],"readme":"\n# react-native-doc-viewer [![npm version](https://img.shields.io/npm/v/react-native-doc-viewer.svg?style=flat)](https://www.npmjs.com/package/react-native-doc-viewer)![Platform](https://img.shields.io/badge/platform-react--native%20%5Bios%20%26%20android%5D-blue.svg)![License](https://img.shields.io/npm/l/express.svg)\n\n![nodei.co](https://nodei.co/npm/react-native-doc-viewer.png?downloads=true\u0026downloadRank=true\u0026stars=true)\n\nA React Native bridge module: Document Viewer for files (pdf, png, jpg, xls, doc, ppt, xlsx, docx, pptx etc.)\n\n#### 2017 Roadmap\n- Download Progess Event Listener for big Files Android\n#### 2018 Roadmap\n- Android file without external Application\n- Windows Phone Support\n\n#### 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.\n\n\n\n\nChangelog:\n\n```\n2.7.8 -   XLS Exmaple Local File IOS 97-2003\n2.7.7 -   \"react\": \"^16.3.0-alpha.1\",\"react-native\": \"0.54.3\"\n2.7.5 -   Pull Request local file from LeMinh1995 + Pull Request podspec Form Linh1987\n2.7.3 -   Example Local File\n2.7.2 -   Progress Download Feedback in example and Done Button Callback IOS\n2.7.1 -   Fix Progress IOS Download\n2.6.9 -   Progress IOS DOWNLOAD Document Callback in Native Code\n2.6.0 -   Android Openbase64\n2.5.2 -   OpenDocAndroid\n2.5.1 -   Cleanings\n2.5.0  -  Update Project for React Native 0.50.3\n\n```\n\n\n## Getting started\n\n`$ npm install react-native-doc-viewer --save`\n\n### Automatic installation\n\n`$ react-native link react-native-doc-viewer`\n\n### CocoaPods installation\n\nIf 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:\n\n1. `npm install react-native-doc-viewer --save`\n\n2. Add the plugin dependency to your Podfile, pointing at the path where NPM installed it:\n\n`pod 'RNReactNativeDocViewer', path: '../node_modules/react-native-doc-viewer'`\n\n3. Run `pod install`\n\n### Manual installation\n\n\n#### iOS\n\n1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n2. Go to `node_modules` ➜ `react-native-doc-viewer` and add `RNDocViewer.xcodeproj`\n3. In XCode, in the project navigator, select your project. Add `libRNDocViewer.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n4. Linked Frameworks and Libraries must have this 2 Libraries (AssetsLibrary.framework \u0026 QuickLook.framework). When not you have to add them.\n\n   ![Alt text](https://raw.githubusercontent.com/philipphecht/react-native-doc-viewer/master/Screenshots/screenshot_xcode_addlibrary.png \"Xcode add Library\")\n\n   ![Alt text](https://raw.githubusercontent.com/philipphecht/react-native-doc-viewer/master/Screenshots/screenshot_xcode_addlibrary2.png \"Xcode add Library\")\n\n5.  When you Show http Links don't forget to set APP Transport Security Settings -\u003e\n    Allow Arbitrary Loads to YES\n\n![Alt text](https://raw.githubusercontent.com/philipphecht/react-native-doc-viewer/master/Screenshots/plist_file.png \"Plist\")\n\n6. Run your project (`Cmd+R`)\u003c\n\n#### Android\n\n1. Open up `android/app/src/main/java/[...]/MainApplication.java`\n  - Add `import com.philipphecht.RNDocViewerPackage;` to the imports at the top of the file\n  - Add `new RNDocViewerPackage()` to the list returned by the `getPackages()` method\n2. Append the following lines to `android/settings.gradle`:\n  \t```\n  \tinclude ':react-native-doc-viewer'\n  \tproject(':react-native-doc-viewer').projectDir = new File(rootProject.projectDir, \t'../node_modules/react-native-doc-viewer/android')\n  \t```\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n  \t```\n      compile project(':react-native-doc-viewer')\n  \t```\n\n#### Windows on the Roadmap\n[Read it! :D](https://github.com/ReactWindows/react-native)\n\n1. 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.\n2. Open up your `MainPage.cs` app\n  - Add `using com.Philipphecht.RNReactNativeDocViewer;` to the usings at the top of the file\n  - Add `new RNReactNativeDocViewerPackage()` to the `List\u003cIReactPackage\u003e` returned by the `Packages` method\n\n\n## API DOC\n### IOS Document Viewer Doc\n\n| resource                    | description                       |\n|:----------------------------|:----------------------------------|\n| `DoneButtonEvent`      | return true |\n| `RNDownloaderProgress`| return Progress Float|\n\n\n| resource                    | description                       |\n|:----------------------------|:----------------------------------|\n| `openDoc`      | {url:String,fileNameOptional:String (optional)} |\n| `openDocb64`| {url:String,fileName:String,fileType:String }|\n| `openDocBinaryinUrl` | {url:String,fileName:String,fileType:String } |\n\n### Android Document Viewer Doc\n\n| resource                    | description                       |\n|:----------------------------|:----------------------------------|\n| `openDoc`      | {url:String,fileName:String, cache:boolean} |\n| `openDocb64`| {url:String,fileName:String,fileType:String, cache:boolean }|\n| `openDocBinaryinUrl` | not implemented yet |\n\n## Usage\n```javascript\nimport React, { Component } from 'react';\nimport {\n  AppRegistry,\n  StyleSheet,\n  Text,\n  View,\n  Platform,\n  Button,\n  Alert,\n  ActivityIndicator,\n  NativeAppEventEmitter,\n  DeviceEventEmitter,\n  NativeModules,\n  NativeEventEmitter,\n  TouchableHighlight\n} from 'react-native';\nimport OpenFile from 'react-native-doc-viewer';\nvar RNFS = require('react-native-fs');\nvar SavePath = Platform.OS === 'ios' ? RNFS.MainBundlePath : RNFS.DocumentDirectoryPath;\nexport default class DocumentViewerExample extends Component {\n constructor(props) {\n    super(props);\n    this.state = {\n      animating: false,\n      progress: \"\",\n      donebuttonclicked: false,\n    }\n    this.eventEmitter = new NativeEventEmitter(NativeModules.RNReactNativeDocViewer);\n    this.eventEmitter.addListener('DoneButtonEvent', (data) =\u003e {\n      /*\n      *Done Button Clicked\n      * return true\n      */\n      console.log(data.close);\n      this.setState({donebuttonclicked: data.close});\n    })\n    this.didPressToObjcButton = this.didPressToObjcButton.bind(this);\n  }\n\n  componentDidMount(){\n    // download progress\n    this.eventEmitter.addListener(\n      'RNDownloaderProgress',\n      (Event) =\u003e {\n        console.log(\"Progress - Download \"+Event.progress  + \" %\")\n        this.setState({progress: Event.progress + \" %\"});\n      }\n\n    );\n  }\n\n  componentWillUnmount (){\n    this.eventEmitter.removeListener();\n  }\n  /*\n  * Handle WWW File Method\n  * 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.\n  */\n  handlePress = () =\u003e {\n    this.setState({animating: true});\n    if(Platform.OS === 'ios'){\n      OpenFile.openDoc([{\n        url:\"https://calibre-ebook.com/downloads/demos/demo.docx\",\n        fileNameOptional:\"test filename\"\n      }], (error, url) =\u003e {\n         if (error) {\n          this.setState({animating: false});\n         } else {\n          this.setState({animating: false});\n           console.log(url)\n         }\n       })\n    }else{\n      //Android\n      this.setState({animating: true});\n      OpenFile.openDoc([{\n        url:\"https://www.huf-haus.com/fileadmin/Bilder/Header/ART_3/Header_HUF_Haus_ART_3___1_.jpg\", // Local \"file://\" + filepath\n        fileName:\"sample\",\n        cache:false,\n        fileType:\"jpg\"\n      }], (error, url) =\u003e {\n         if (error) {\n          this.setState({animating: false});\n           console.error(error);\n         } else {\n          this.setState({animating: false});\n           console.log(url)\n         }\n       })\n    }\n\n  }\n\n\n  /*\n  * Handle Local File Method\n  * 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.\n  */\n  handlePressLocal = () =\u003e {\n    this.setState({animating: true});\n    if(Platform.OS === 'ios'){\n        OpenFile.openDoc([{url:SavePath+\"/react-native-logo.jpg\",\n        fileNameOptional:\"test filename\"\n      }], (error, url) =\u003e {\n         if (error) {\n          this.setState({animating: false});\n         } else {\n          this.setState({animating: false});\n           console.log(url)\n         }\n       })\n    }else{\n      OpenFile.openDoc([{url:SavePath+\"/demo.jpg\",\n        fileName:\"sample\",\n        cache:false,\n        fileType:\"jpg\"\n      }], (error, url) =\u003e {\n         if (error) {\n          this.setState({animating: false});\n         } else {\n          this.setState({animating: false});\n           console.log(url)\n         }\n       })\n\n    }\n  }\n\n    handlePressLocalXLS = () =\u003e {\n      this.setState({animating: true});\n      if(Platform.OS === 'ios'){\n          OpenFile.openDoc([{url:SavePath+\"/SampleXLSFile_19kb.xls\",\n          fileNameOptional:\"Sample XLS 94-2003\"\n        }], (error, url) =\u003e {\n           if (error) {\n            this.setState({animating: false});\n           } else {\n            this.setState({animating: false});\n             console.log(url)\n           }\n         })\n      }else{\n        OpenFile.openDoc([{url:SavePath+\"/demo.jpg\",\n          fileName:\"sample\",\n          cache:false,\n          fileType:\"jpg\"\n        }], (error, url) =\u003e {\n           if (error) {\n            this.setState({animating: false});\n           } else {\n            this.setState({animating: false});\n             console.log(url)\n           }\n         })\n\n      }\n    }\n\n\n  /*\n  * Binary in URL\n  * Binary String in Url\n  * 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\n  */\n  handlePressBinaryinUrl = () =\u003e {\n    this.setState({animating: true});\n    if(Platform.OS === 'ios'){\n      OpenFile.openDocBinaryinUrl([{\n        url:\"https://storage.googleapis.com/need-sure/example\",\n        fileName:\"sample\",\n        fileType:\"xml\"\n      }], (error, url) =\u003e {\n          if (error) {\n            console.error(error);\n            this.setState({animating: false});\n          } else {\n            console.log(url)\n            this.setState({animating: false});\n          }\n        })\n    }else{\n      OpenFile.openDocBinaryinUrl([{\n        url:\"https://storage.googleapis.com/need-sure/example\",\n        fileName:\"sample\",\n        fileType:\"xml\",\n        cache:true\n      }], (error, url) =\u003e {\n          if (error) {\n            console.error(error);\n            this.setState({animating: false});\n          } else {\n            console.log(url)\n            this.setState({animating: false});\n          }\n        })\n    }\n  }\n\n  /*\n  * Base64String\n  * put only the base64 String without data:application/octet-stream;base64\n  * 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\n  */\n  handlePressb64 = () =\u003e {\n    if(Platform.OS === 'ios'){\n      OpenFile.openDocb64([{\n        base64:\"{BASE64String}\"\n        fileName:\"sample\",\n        fileType:\"png\"\n      }], (error, url) =\u003e {\n          if (error) {\n            console.error(error);\n          } else {\n            console.log(url)\n          }\n        })\n    }else{\n      //Android\n      OpenFile.openDocb64([{\n        base64:\"{BASE64String}\"\n        fileName:\"sample\",\n        fileType:\"png\",\n        cache:true /*Use Cache Folder Android*/\n      }], (error, url) =\u003e {\n          if (error) {\n            console.error(error);\n          } else {\n            console.log(url)\n          }\n        })\n    }\n\n    /*\n  * Video File\n  */\n  handlePressVideo = () =\u003e {\n    if(Platform.OS === 'ios'){\n      OpenFile.playMovie(video, (error, url) =\u003e {\n                if (error) {\n                    console.error(error);\n                } else {\n                    console.log(url)\n                }\n            })\n    }else{\n      Alert.alert(\"Android coming soon\");\n    }\n  }\n\n\n  \u003cButton\n          onPress={this.handlePress.bind(this)}\n          title=\"Press Me Open Doc Url\"\n          accessibilityLabel=\"See a Document\"\n        /\u003e\n        \u003cButton\n          onPress={this.handlePressBinaryinUrl.bind(this)}\n          title=\"Press Me Open BinaryinUrl\"\n          accessibilityLabel=\"See a Document\"\n        /\u003e\n         \u003cButton\n          onPress={this.handlePressLocal.bind(this)}\n          title=\"Press Me Open Doc Path\"\n          accessibilityLabel=\"See a Document\"\n        /\u003e\n        \u003cButton\n          onPress={this.handlePressLocalXLS.bind(this)}\n          title=\"Press Me Open XLS DOC Path\"\n          accessibilityLabel=\"See a Document\"\n        /\u003e\n        \u003cButton\n          onPress={this.handlePressb64.bind(this)}\n          title=\"Press Me Open Base64 String\"\n          accessibilityLabel=\"See a Document\"\n        /\u003e\n        \u003cButton\n          onPress={()=\u003ethis.handlePressVideo(\"http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4\")}\n          title=\"Press Me Open Video\"\n          accessibilityLabel=\"See a Document\"\n        /\u003e\n}\n```\n\n\n## Screenshots\n\n![Alt text](https://raw.githubusercontent.com/philipphecht/react-native-doc-viewer/master/Screenshots/Screenshot.png \"Screenshot 1\")\n\n\n![Alt text](https://raw.githubusercontent.com/philipphecht/react-native-doc-viewer/master/Screenshots/Screenshot1.png \"Screenshot 2\")\n\n\n![Alt text](https://raw.githubusercontent.com/philipphecht/react-native-doc-viewer/master/Screenshots/Screenshot2.png \"Screenshot 3\")\n\n\n Copyright (c) 2017-present, Philipp Hecht\n philipp.hecht@icloud.com\n\n\n## Donation\nIf this project help you reduce time to develop, you can give me a cup of coffee :)\n\nEtherum wallet: 0x124F99647a904240945d8B582eEf1E3CD6D00a8a\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphilipphecht%2Freact-native-doc-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphilipphecht%2Freact-native-doc-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphilipphecht%2Freact-native-doc-viewer/lists"}