Skip to content

React Native Doc Viewer (Supports file formats: xls,ppt,doc,xlsx,pptx,docx,png,jpg,pdf)

Notifications You must be signed in to change notification settings

r2space/react-native-doc-viewer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-doc-viewer

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

nodei.co

Changelog:

1.4.0
        - Android Doc Viewer Implementation 

Getting started

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

Automatic installation

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

Manual installation

iOS

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

  2. Go to node_modulesreact-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 PhasesLink Binary With Libraries

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

    Alt text

    Alt text

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

Alt text

  1. 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
  1. 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')
    
  2. 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

  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.Reactlibrary.RNReactNativeDocViewer; to the usings at the top of the file
  • Add new RNReactNativeDocViewerPackage() to the List<IReactPackage> returned by the Packages method

Usage

import OpenFile from 'react-native-doc-viewer';

  //Handle Function Internet
  handlePress = () => {
   OpenFile.openDoc([{
     url:"http://www.snee.com/xml/xslt/sample.doc",
     fileName:"sample"
   }], (error, url) => {
      if (error) {
        console.error(error);
      } else {
        console.log(url)
      }
    })
  }
  
  //Handle Function Local File
  handlePress = () => {
    OpenFile.openDoc([{
     url:"{Path/to/the/document}",
     fileName:"sample"
   }], (error, url) => {
      if (error) {
        console.error(error);
      } else {
        console.log(url)
      }
    })
  }
  
  
   <Button
          onPress={this.handlePress.bind(this)}
          title="Press Me"
          accessibilityLabel="Open the Doc"
        />

Screenshots

Alt text

Alt text

Alt text

ROADMAP

  • IOS react-native >0.42
  • Base64StringtoFile
  • Windows Support

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

About

React Native Doc Viewer (Supports file formats: xls,ppt,doc,xlsx,pptx,docx,png,jpg,pdf)

Resources

Stars

Watchers

Forks

Packages

No packages published