react-native-file-preview is a simple library to preview files. It's written in native code, support iOS platform (using WKWebView).

• Features:
  • iOS 9.0+, iPhone and iPad devices
  • Most popular document types (xlsx, pptx, docx, images, pdf, html, etc...)
  • Zoom in/out using gestures
  • Support network resources (https://) and local resources (file://)
  • Support large files, better performance compared to QuickLook implementation
  • Support AirPrint

Usage

import FilePreview from 'react-native-file-preview';

FilePreview.showPreview("https://acdbio.com/sites/default/files/sample.ppt");

Installation

The package can be added via npm or yarn:

$ yarn add react-native-file-preview

Link the packge

$ react-native link react-native-file-preview

Post link steps

After the link you'll need two extra steps to make it working. It's simple to configure them using XCode:

Step 1. Copy the image resouces

1. Click the project name in XCode Project navigator, choose your project name in the TARGETS sestion (to the right or the Project navigator).
2. Click Build Phases, click Copy Bundle Resources.
3. Drag the RNFilePreviewBundle.bundle file (under Project Navagator - Libraries - RNFilePreview.xcodeproj) to Copy Bundle Resources.

Step 2. Add the Swift bridging header (skip this step if you already use Swift in your iOS project)

1. Right click the souce code folder (the yellow folder contains AppDelegate.m） in the Project navigator (the left panel in XCode).
2. Select New File, choose iOS - Source - Swift file, choose Create.
3. XCode will popup a dialog asking "Would you like to configure an Objective-C bridging header?". Choose Create Bridging Header.

APIs

FilePreviewHelper.showPreview(path)

FilePreviewHelper.showPreview(path, showPrintButton)

FilePreviewHelper.showPreview(path, showPrintButton, showBlackStatusBar)

• path: string

  • The document file path. (https://www.exmaple.com/example.pdf, or file://FULL_LOCAL_PATH)

• showPrintButton: boolean

  • should the preview page show the AirPrint button
  • default value is true

• showBlackStatusBar: boolean

  • should the preview page show the status bar in balck
  • default value is true